@font-face {
  font-family: "InterVariable";
  src: url("/static/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --tracking-bg: #f6f7f9;
  --tracking-surface: #ffffff;
  --tracking-ink: #111827;
  --tracking-muted: #64748b;
  --tracking-soft: #94a3b8;
  --tracking-line: #e7ebf0;
  --tracking-brand: #ff9f0a;
  --tracking-brand-strong: #f97316;
  --tracking-success: #22a06b;
  --tracking-danger: #c93c3c;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--tracking-bg);
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--tracking-bg);
  color: var(--tracking-ink);
  font-family:
    "InterVariable",
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
  text-decoration: none;
}

[hidden] {
  display: none !important;
}


/* ==========================================================================
   OFFLINE BANNER
   ========================================================================== */

.swift-offline-banner {
  position: fixed;
  left: 50%;
  bottom: max(
    16px,
    env(safe-area-inset-bottom)
  );
  z-index: 9000;
  width: min(
    calc(100% - 28px),
    520px
  );
  padding: 11px 16px;
  transform: translate(
    -50%,
    18px
  );
  border-radius: 999px;
  background: rgba(
    17,
    24,
    39,
    0.94
  );
  box-shadow:
    0 18px 45px
    rgba(15, 23, 42, 0.2);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 650;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s ease;
}

.swift-offline-banner.is-visible {
  transform: translate(
    -50%,
    0
  );
  opacity: 1;
  visibility: visible;
}

.swift-is-offline
button[data-offline-disabled="true"],
.swift-is-offline
input[data-offline-disabled="true"] {
  cursor: not-allowed !important;
  opacity: 0.58 !important;
}


/* ==========================================================================
   PUBLIC SHELL
   ========================================================================== */

.public-site-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.public-site-main {
  flex: 1;
  width: min(
    760px,
    calc(100% - 32px)
  );
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding:
    max(
      22px,
      env(safe-area-inset-top)
    )
    0
    42px;
}

.public-site-footer {
  padding:
    8px
    16px
    calc(
      22px
      + env(safe-area-inset-bottom)
    );
  color: #8b95a5;
  font-size: 0.74rem;
  text-align: center;
}

.tracking-public-page {
  display: grid;
  gap: 16px;
}


.tracking-public-page.is-landing {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 1;
  grid-template-rows:
    auto
    minmax(min-content, 1fr);
  align-content: stretch;
}

.tracking-public-page.is-landing::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: 8px -38px 8px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20%20%20%20viewBox%3D%220%200%20760%201280%22%3E%0A%0A%20%20%3Cg%0A%20%20%20%20fill%3D%22none%22%0A%20%20%20%20stroke%3D%22%23cfd8e3%22%0A%20%20%20%20stroke-width%3D%222.1%22%0A%20%20%20%20stroke-linecap%3D%22round%22%0A%20%20%20%20stroke-linejoin%3D%22round%22%0A%20%20%20%20opacity%3D%220.8%22%3E%0A%0A%20%20%20%20%3Cpath%20d%3D%22M-30%20130%20C90%2055%20180%2095%20264%20166%20S430%20248%20540%20171%20S690%2092%20810%20126%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-10%20310%20C92%20270%20164%20303%20246%20366%20S404%20446%20502%20399%20S654%20280%20790%20248%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-20%20522%20C82%20466%20176%20488%20258%20546%20S420%20642%20530%20592%20S670%20464%20796%20426%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-34%20755%20C90%20694%20180%20718%20276%20790%20S448%20878%20556%20822%20S692%20704%20810%20662%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M-12%201010%20C98%20946%20192%20974%20282%201034%20S448%201115%20560%201068%20S704%20944%20802%20906%22%2F%3E%0A%0A%20%20%20%20%3Cpath%20d%3D%22M116%2036%20C108%20132%20142%20196%20214%20248%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M430%20148%20C408%20236%20438%20306%20506%20360%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M174%20430%20C168%20514%20204%20574%20276%20628%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M548%20566%20C522%20654%20550%20730%20628%20796%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M238%20828%20C230%20912%20270%20980%20346%201030%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M566%20922%20C542%201000%20568%201080%20636%201150%22%2F%3E%0A%0A%20%20%20%20%3Cpath%20d%3D%22M42%20215%20C116%20208%20174%20228%20224%20276%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M474%20470%20C530%20434%20604%20428%20688%20458%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M74%20874%20C142%20842%20212%20848%20278%20884%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%0A%20%20%3Cg%20fill%3D%22%23ff9f2f%22%20opacity%3D%220.34%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22264%22%20cy%3D%22166%22%20r%3D%225%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22502%22%20cy%3D%22399%22%20r%3D%224.5%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22276%22%20cy%3D%22790%22%20r%3D%224.5%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%0A%20%20%3Cg%20fill%3D%22%23aebaca%22%20opacity%3D%220.38%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22214%22%20cy%3D%22248%22%20r%3D%224%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22530%22%20cy%3D%22592%22%20r%3D%224%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22346%22%20cy%3D%221030%22%20r%3D%224%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22628%22%20cy%3D%22796%22%20r%3D%224%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.48;
  filter:
    saturate(0.78)
    contrast(1.08);
}

.tracking-public-page.is-landing::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(248, 250, 252, 0.08) 0%,
      rgba(248, 250, 252, 0.02) 24%,
      rgba(248, 250, 252, 0.00) 52%,
      rgba(248, 250, 252, 0.04) 78%,
      rgba(248, 250, 252, 0.12) 100%
    );
}

.tracking-public-page.is-landing > * {
  position: relative;
  z-index: 1;
}


.tracking-public-page.is-landing
.tracking-search-card {
  align-self: center;
}


/* ==========================================================================
   APP HEADER
   ========================================================================== */

.tracking-app-chrome {
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 4px;
}

.tracking-app-brand {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  color: #0f172a;
  font-size: 1.08rem;
  font-weight: 760;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tracking-app-brand span {
  margin-left: 5px;
  color: var(--tracking-brand);
}

.tracking-app-link {
  flex: 0 0 auto;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  color: #526071;
  font-size: 0.82rem;
  font-weight: 680;
}


/* ==========================================================================
   LANDING / SEARCH
   ========================================================================== */

.tracking-search-card {
  width: 100%;
  display: grid;
  gap: 20px;
  padding: 26px;
  border: 1px solid
    var(--tracking-line);
  border-radius: 24px;
  background:
    rgba(
      255,
      255,
      255,
      0.98
    );
  box-shadow:
    0 12px 34px
    rgba(15, 23, 42, 0.045);
}

.tracking-search-copy {
  display: grid;
  gap: 7px;
  text-align: center;
}

.tracking-page-eyebrow,
.tracking-result-eyebrow {
  color: #7c8798;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.tracking-search-copy h1,
.tracking-result-status h1 {
  margin: 0;
  color: #0f172a;
  letter-spacing: -0.045em;
}

.tracking-search-copy h1 {
  font-size: clamp(
    1.75rem,
    6vw,
    2.15rem
  );
  line-height: 1.04;
}

.tracking-search-copy p {
  max-width: 470px;
  margin: 0 auto;
  color: var(--tracking-muted);
  font-size: 0.9rem;
  line-height: 1.48;
}

.tracking-public-form {
  width: 100%;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.tracking-public-form label {
  color: #1f2937;
  font-size: 0.78rem;
  font-weight: 720;
}

.tracking-public-input-row {
  min-width: 0;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    132px;
  gap: 10px;
}

.tracking-public-input-shell {
  position: relative;
  min-width: 0;
  width: 100%;
}

.tracking-public-input-shell input {
  display: block;
  width: 100%;
  min-width: 0;
  height: 52px;
  padding: 0 46px 0 15px;
  border: 1px solid
    #dce2ea;
  border-radius: 14px;
  outline: none;
  background: #ffffff;
  color: #111827;
  box-shadow: none;
  font-size: 16px;
  font-weight: 620;
  letter-spacing: 0.005em;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.tracking-public-input-shell
input::placeholder {
  color: #9aa4b2;
  font-weight: 520;
}

.tracking-public-input-shell
input:focus {
  border-color: #ffad42;
  box-shadow:
    0 0 0 3px
    rgba(255, 159, 10, 0.1);
}

.tracking-clear-button {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #f1f4f8;
  color: #708093;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.tracking-public-submit {
  position: relative;
  width: 132px;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      #ffc229 0%,
      #ffb515 100%
    );
  color: #111827;
  cursor: pointer;
  font-weight: 760;
  transition:
    transform 0.1s ease,
    filter 0.16s ease;
}

.tracking-public-submit:hover {
  filter: brightness(0.98);
}

.tracking-public-submit:active {
  transform: scale(0.985);
}

.tracking-public-submit:disabled {
  cursor: wait;
  opacity: 0.78;
}

.tracking-public-submit.is-loading
.tracking-submit-text {
  opacity: 0;
}

.tracking-submit-spinner {
  display: none;
}

.tracking-public-submit.is-loading
.tracking-submit-spinner {
  position: absolute;
  inset: 0;
  width: 18px;
  height: 18px;
  display: block;
  margin: auto;
  border: 2px solid
    rgba(15, 23, 42, 0.2);
  border-top-color: #111827;
  border-radius: 999px;
  animation:
    trackingSpin
    0.7s
    linear
    infinite;
}

@keyframes trackingSpin {
  to {
    transform: rotate(360deg);
  }
}

.tracking-input-error {
  min-height: 18px;
  margin: 0;
  color: var(--tracking-danger);
  font-size: 0.76rem;
  font-weight: 620;
}

.tracking-search-server-error {
  display: grid;
  gap: 3px;
  padding: 12px 13px;
  border: 1px solid
    #f1caca;
  border-radius: 13px;
  background: #fff7f7;
  color: #852c2c;
}

.tracking-search-server-error
strong {
  font-size: 0.82rem;
}

.tracking-search-server-error
span {
  font-size: 0.77rem;
  line-height: 1.42;
}

.tracking-search-footer {
  display: grid;
  gap: 9px;
  padding-top: 2px;
}

.tracking-help-link {
  width: fit-content;
  color: #526071;
  font-size: 0.8rem;
  font-weight: 690;
}

.tracking-landing-note {
  max-width: 560px;
  margin: 0;
  color: #8a94a3;
  font-size: 0.75rem;
  line-height: 1.48;
}

.tracking-searching-state {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  color: #697586;
  font-size: 0.78rem;
  font-weight: 620;
}

.tracking-search-spinner {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  border: 2px solid #e5e9ef;
  border-top-color:
    var(--tracking-brand-strong);
  border-radius: 999px;
  animation:
    trackingSpin
    0.7s
    linear
    infinite;
}


/* ==========================================================================
   RESULTS
   ========================================================================== */

.tracking-public-results {
  width: 100%;
  display: grid;
  gap: 14px;
}

.tracking-results-stack {
  margin: 0 auto;
}

.tracking-card {
  border: 1px solid
    var(--tracking-line);
  border-radius: 22px;
  background:
    var(--tracking-surface);
  box-shadow:
    0 9px 28px
    rgba(15, 23, 42, 0.04);
}

.tracking-card-soft {
  background: #ffffff;
}

.tracking-card-flat {
  box-shadow: none;
}

.tracking-summary-card-primary {
  padding: 21px;
}

.tracking-result-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.tracking-result-status {
  min-width: 0;
}

.tracking-result-status h1 {
  margin-top: 5px;
  font-size: clamp(
    1.45rem,
    5vw,
    1.8rem
  );
  line-height: 1.08;
}

.tracking-result-status p {
  margin: 5px 0 0;
  color: var(--tracking-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.tracking-status-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid
    #ffddb0;
  border-radius: 13px;
  background: #fff8ee;
  color:
    var(--tracking-brand-strong);
}

.tracking-status-mark svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tracking-status-mark
.tracking-status-delivered,
.tracking-status-mark.tracking-status-delivered {
  border-color: #bee8d0;
  background: #effbf4;
  color: var(--tracking-success);
}


/* ==========================================================================
   DELIVERY PROGRESS
   ========================================================================== */

.tracking-progress {
  position: relative;
  margin-top: 19px;
  padding: 18px 0 3px;
  border-top: 1px solid
    #edf0f4;
}

.tracking-progress-line {
  position: absolute;
  z-index: 0;
  top: 33px;
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4e9ef;
}

.tracking-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      var(--tracking-success) 0%,
      #f6aa16 72%,
      var(--tracking-brand-strong) 100%
    );
  transition: width 0.24s ease;
}

.tracking-progress-stage-1 {
  width: 0%;
}

.tracking-progress-stage-2 {
  width: 33.333%;
}

.tracking-progress-stage-3 {
  width: 66.666%;
}

.tracking-progress-fill.tracking-progress-stage-4 {
  width: 100%;
  background:
    var(--tracking-success);
}

.tracking-progress-steps {
  position: relative;
  z-index: 1;
  list-style: none;
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
  gap: 5px;
  margin: 0;
  padding: 0;
}

.tracking-progress-steps li {
  min-width: 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  color: #9aa4b2;
  text-align: center;
}

.tracking-progress-dot {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 2px solid
    #d7dee7;
  border-radius: 999px;
  background: #ffffff;
  color: #98a3b2;
  box-shadow:
    0 0 0 3px
    rgba(255, 255, 255, 0.92);
}

.tracking-progress-dot svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tracking-progress-steps
strong {
  max-width: 76px;
  color: inherit;
  font-size: 0.65rem;
  font-weight: 690;
  line-height: 1.2;
}

.tracking-progress-steps
li.is-current {
  color: #111827;
}


.tracking-progress-steps
li.is-current
strong {
  font-weight: 780;
}

.tracking-progress-steps
li.is-current
.tracking-progress-dot {
  border-color:
    var(--tracking-brand-strong);
  background:
    var(--tracking-brand-strong);
  color: #ffffff;
  box-shadow:
    0 0 0 5px
    rgba(249, 115, 22, 0.12);
  transform: scale(1.12);
  transform-origin: center;
  will-change: transform;
  animation:
    trackingCurrentStagePulse
    1.85s
    ease-in-out
    infinite;
}

.tracking-progress-steps
li.is-current.is-delivered
.tracking-progress-dot {
  border-color:
    var(--tracking-success);
  background:
    var(--tracking-success);
  color: #ffffff;
  box-shadow:
    0 0 0 5px
    rgba(34, 197, 94, 0.12);
}


.tracking-progress-steps
li.is-complete {
  color: #586575;
}

.tracking-progress-steps
li.is-complete
.tracking-progress-dot {
  border-color:
    var(--tracking-success);
  background:
    var(--tracking-success);
  color: #ffffff;
}


/* ==========================================================================
   ROUTE
   ========================================================================== */

.tracking-route-summary {
  margin-top: 18px;
  padding: 17px 0;
  border-top: 1px solid
    #edf0f4;
  border-bottom: 1px solid
    #edf0f4;
}

.tracking-route-stop {
  display: grid;
  grid-template-columns:
    36px
    minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.tracking-route-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
}

.tracking-route-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tracking-route-icon.is-origin {
  border: 1px solid
    #fed7aa;
  background: #fff8ed;
  color: #c86500;
}

.tracking-route-icon.is-destination {
  background:
    var(--tracking-brand-strong);
  color: #ffffff;
}

.tracking-route-stop div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.tracking-route-stop small,
.tracking-meta-item small {
  color: #94a3b8;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.tracking-route-stop strong {
  color: #111827;
  font-size: 0.94rem;
  line-height: 1.35;
}

.tracking-route-connector {
  width: 2px;
  height: 27px;
  margin: 4px 0 4px 15px;
  border-radius: 999px;
  background: #dce3eb;
}


/* ==========================================================================
   META + ACTIONS
   ========================================================================== */

.tracking-meta-row {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  align-items: end;
  gap: 22px;
  padding: 17px 3px 0;
}

.tracking-meta-item {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.tracking-meta-item strong {
  color: #334155;
  font-size: 0.78rem;
  font-weight: 670;
}

.tracking-meta-code strong {
  overflow-wrap: anywhere;
}

.tracking-meta-row
.tracking-meta-item:last-child {
  justify-items: end;
  text-align: right;
}

.tracking-result-actions {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 17px;
}

.tracking-share-button,
.tracking-support-action {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
}

.tracking-share-button {
  min-width: 126px;
  border: 1px solid
    #dfe5ec;
  background: #ffffff;
  color: #172033;
  cursor: pointer;
}

.tracking-share-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tracking-support-action {
  color: #445164;
}

.tracking-share-feedback {
  color: #728094;
  font-size: 0.74rem;
}


/* ==========================================================================
   HISTORY
   ========================================================================== */

.tracking-timeline-card {
  padding: 18px 19px;
  background: #fbfcfd;
  box-shadow: none;
}

.tracking-section-title {
  display: grid;
  gap: 4px;
  margin-bottom: 15px;
}

.tracking-section-title h2,
.tracking-section-title h3 {
  margin: 0;
  color: #111827;
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -0.025em;
}

.tracking-section-title p,
.tracking-muted,
.tracking-empty-copy {
  margin: 0;
  color: var(--tracking-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.tracking-timeline {
  list-style: none;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
}

.tracking-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns:
    20px
    minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 16px;
}

.tracking-timeline-item:last-child {
  padding-bottom: 0;
}

.tracking-timeline-rail {
  position: relative;
  display: flex;
  justify-content: center;
}

.tracking-timeline-rail::after {
  content: "";
  position: absolute;
  top: 15px;
  bottom: -3px;
  width: 2px;
  background: #e4e9ef;
}

.tracking-timeline-item:last-child
.tracking-timeline-rail::after {
  display: none;
}

.tracking-timeline-dot {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border: 2px solid #c6cfda;
  border-radius: 999px;
  background: #ffffff;
}

.tracking-timeline-body {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.tracking-timeline-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tracking-timeline-head strong {
  color: #182235;
  font-size: 0.84rem;
  font-weight: 700;
}

.tracking-timeline-body p {
  margin: 0;
  color: #5f6d7f;
  font-size: 0.78rem;
  line-height: 1.4;
}

.tracking-timeline-body time {
  color: #98a3b2;
  font-size: 0.7rem;
}

.tracking-another-link {
  width: fit-content;
  justify-self: center;
  padding: 8px 3px;
  color: #344154;
  border-bottom: 2px solid
    var(--tracking-brand);
  font-size: 0.8rem;
  font-weight: 720;
}


/* ==========================================================================
   HELP / OFFLINE SHARED PUBLIC PAGES
   ========================================================================== */

.tracking-public-hero {
  border: 1px solid
    var(--tracking-line);
  border-radius: 22px;
  background: #ffffff;
  box-shadow:
    0 8px 24px
    rgba(15, 23, 42, 0.035);
}

.tracking-public-hero-light {
  background: #ffffff;
}

.tracking-public-hero-inner {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.tracking-public-hero h1 {
  margin: 0;
  color: #111827;
  font-size: 1.65rem;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.tracking-public-hero p {
  margin: 0;
  color: var(--tracking-muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.tracking-public-badge {
  width: fit-content;
  color: #7c8798;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tracking-empty-state,
.tracking-not-found {
  display: grid;
  gap: 14px;
}

.tracking-empty-state-compact,
.tracking-help-stack {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.tracking-help-stack {
  gap: 14px;
}

.tracking-help-stack
.tracking-card,
.tracking-empty-state
.tracking-card {
  padding: 20px;
}

.tracking-info-box {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid
    var(--tracking-line);
  border-radius: 15px;
  background: #fbfcfd;
}

.tracking-info-box small {
  color: #8793a3;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.tracking-info-box strong {
  color: #253145;
  font-size: 0.84rem;
  line-height: 1.45;
}

.tracking-list-stack,
.tracking-help-statuses {
  display: grid;
  gap: 9px;
}

.tracking-list-stack span {
  color: #465568;
  font-size: 0.82rem;
  line-height: 1.4;
}

.tracking-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tracking-not-found-card {
  padding: 20px;
  text-align: center;
}

.tracking-not-found-card h2 {
  margin: 0 0 6px;
  font-size: 1.1rem;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@keyframes trackingCurrentStagePulse {
  0%,
  100% {
    transform: scale(1.10);
  }

  50% {
    transform: scale(1.17);
  }
}

@media (max-width: 640px) {
  .public-site-main {
    width: calc(100% - 20px);
    padding-top:
      max(
        16px,
        env(safe-area-inset-top)
      );
  }

  .tracking-public-page {
    gap: 12px;
  }

  .tracking-app-chrome {
    min-height: 42px;
    padding: 0 16px;
  }

  .tracking-app-brand {
    font-size: 1.02rem;
  }

  .tracking-search-card {
    gap: 18px;
    padding: 22px 17px;
    border-radius: 20px;
  }

  .tracking-search-copy {
    gap: 6px;
  }

  .tracking-search-copy h1 {
    font-size: 1.72rem;
  }

  .tracking-public-input-row {
    grid-template-columns:
      minmax(0, 1fr);
    gap: 9px;
  }

  .tracking-public-submit {
    width: 100%;
    min-height: 50px;
  }

      .tracking-summary-card-primary {
    padding: 17px 16px;
  }

  .tracking-result-header {
    gap: 12px;
  }

  .tracking-result-status h1 {
    font-size: 1.42rem;
  }

  .tracking-status-mark {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

        .tracking-progress {
    margin-top: 17px;
    padding-top: 18px;
  }

    .tracking-progress-line {
    top: 34px;
  }

  .tracking-progress-steps
  strong {
    max-width: 72px;
    font-size: 0.63rem;
    line-height: 1.18;
  }

      .tracking-route-summary {
    margin-top: 16px;
    padding: 17px 0;
  }

          .tracking-meta-row {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
    align-items: end;
    gap: 18px;
    padding-left: 2px;
    padding-right: 2px;
  }

            .tracking-result-actions {
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 10px 16px;
  }

        .tracking-timeline-card {
    padding: 17px 16px;
  }

  .tracking-public-hero-inner {
    padding: 18px;
  }
}


@media (
  prefers-reduced-motion:
  reduce
) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration:
      0.01ms !important;
    animation-iteration-count:
      1 !important;
    transition-duration:
      0.01ms !important;
  }
}