/* ==========================================================================
   The tracker — what happened to a report.

   One component, two homes: the owner's list on account.html and the public
   page on report-detail.html. Both emit exactly the contract markup:

     <ol class="tracker">
       <li class="tracker__step is-done|is-current|is-declined">
         <span class="tracker__dot"></span>
         <span class="tracker__label">Received</span>
         <span class="tracker__date">Aug 12, 2026</span>
       </li>
     </ol>

   Numbered dots joined by a line. Done steps are filled, the current step is
   ringed, a declined step takes the danger tone. Steps: Received, Reviewed,
   Published (or Not published), and Sent to county when a referral happened.

   Vertical on a phone, horizontal from 640px — same markup, the switch is
   all grid/flex. The numbers come from a CSS counter so the markup carries
   no presentation.
   ========================================================================== */

.tracker {
  list-style: none;
  counter-reset: tracker-step;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
}

.tracker__step {
  counter-increment: tracker-step;
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: start;
  padding-bottom: var(--space-4);
}

.tracker__step:last-child {
  padding-bottom: 0;
}

/* The joining line, drawn below each dot down to the next one. It reads as
   "progress passed through here", so it takes the accent only when the step
   it hangs from is complete. */
.tracker__step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--rule);
}

.tracker__step.is-done:not(:last-child)::before {
  background: var(--accent);
}

/* ---- The dot ------------------------------------------------------------ */

.tracker__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--bg-raised);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-muted);
  grid-row: 1 / span 2;
}

.tracker__dot::before {
  content: counter(tracker-step);
}

/* Done: filled solid, number knocked out. */
.tracker__step.is-done .tracker__dot {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text-on-accent);
}

/* Current: ringed — an open dot with a halo, the number in the accent. */
.tracker__step.is-current .tracker__dot {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* Declined: the danger tone, and a multiplication sign instead of a number —
   this step is an outcome, not a stage passed through. */
.tracker__step.is-declined .tracker__dot {
  background: var(--danger-soft);
  border-color: var(--danger);
  color: var(--danger);
}

.tracker__step.is-declined .tracker__dot::before {
  content: "\00d7";
  font-size: 1rem;
  line-height: 1;
}

/* ---- The words ---------------------------------------------------------- */

.tracker__label {
  grid-column: 2;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text);
  line-height: var(--leading-snug);
  padding-top: 0.28rem; /* optically centres the first line on the dot */
}

.tracker__step.is-declined .tracker__label {
  color: var(--danger);
}

/* Upcoming steps (no state class) recede. */
.tracker__step:not(.is-done):not(.is-current):not(.is-declined) .tracker__label {
  color: var(--text-subtle);
  font-weight: var(--weight-medium);
}

.tracker__date {
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-snug);
  margin-top: 2px;
}

.tracker__date:empty {
  display: none;
}

/* ---- Horizontal, once there is room ------------------------------------- */

@media (min-width: 640px) {
  .tracker {
    flex-direction: row;
    align-items: flex-start;
  }

  .tracker__step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 var(--space-2);
    row-gap: 0;
  }

  /* The line now runs from this dot across to the next one. */
  .tracker__step:not(:last-child)::before {
    left: calc(50% + 18px);
    right: calc(-50% + 18px);
    top: 13px;
    bottom: auto;
    width: auto;
    height: 2px;
    margin-left: 0;
    margin-top: -1px;
  }

  .tracker__label {
    padding-top: var(--space-2);
  }

  .tracker__date {
    margin-top: 2px;
  }
}