/* Publishers Portal — order tracker.
   Shared by the admin order screen and the publisher's order card, so both
   sides read the same picture. Horizontal on a wide screen, a vertical rail
   on a narrow one. */

.pp-track {
  --pp-done: #cdd3da;
  --pp-done-ink: #46505c;
  --pp-now: #2b6cff;
  --pp-warn: #d97706;
  --pp-todo: #e3e5e8;
  --pp-off: #f0f1f3;

  display: flex;
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  counter-reset: none;
}
.pp-step {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding: 0 6px;
  text-align: center;
  margin: 0;
}
/* The connector belongs to the step it arrives at, so it can take that
   step's colour and the line fills in as the order advances. */
.pp-step::before {
  content: '';
  position: absolute;
  top: 15px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--pp-todo);
  z-index: 0;
}
.pp-step:first-child::before { display: none; }
.pp-step.is-done::before { background: var(--pp-done); }
.pp-step.is-current::before, .pp-step.is-blocked::before {
  background: linear-gradient(to right, var(--pp-done) 55%, var(--pp-todo) 55%);
}

.pp-step-mark {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--pp-todo);
  color: #9aa1ab;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}
.pp-step-body { display: block; margin-top: 8px; }
.pp-step-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: #46505c;
  line-height: 1.35;
}
.pp-step-note {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: #8b929c;
  line-height: 1.4;
  word-wrap: break-word;
}

.pp-step.is-done .pp-step-mark { background: var(--pp-done); border-color: var(--pp-done); color: #fff; font-size: 15px; }
.pp-step.is-done .pp-step-label { color: var(--pp-done-ink); }

.pp-step.is-current .pp-step-mark {
  background: var(--pp-now); border-color: var(--pp-now); color: #fff;
  box-shadow: 0 0 0 4px rgba(43, 108, 255, .15);
}
.pp-step.is-current .pp-step-label { color: #1b1f24; }

.pp-step.is-blocked .pp-step-mark {
  background: var(--pp-warn); border-color: var(--pp-warn); color: #fff;
  box-shadow: 0 0 0 4px rgba(217, 119, 6, .16);
}
.pp-step.is-blocked .pp-step-label { color: #92400e; }
.pp-step.is-blocked .pp-step-note { color: #b45309; font-weight: 600; }

.pp-step.is-off .pp-step-mark { background: var(--pp-off); border-color: var(--pp-off); color: #b6bcc4; }
.pp-step.is-off .pp-step-label, .pp-step.is-off .pp-step-note { color: #b6bcc4; }

.pp-step.is-cancelled .pp-step-mark { background: #b32d2e; border-color: #b32d2e; color: #fff; font-size: 15px; }
.pp-step.is-cancelled .pp-step-label { color: #b32d2e; }

/* The admin view carries more words per step, so it gets more room. */
.pp-track-admin { margin-bottom: 6px; }
.pp-track-admin .pp-step-label { font-size: 13px; }
.pp-track-admin .pp-step-note { font-size: 12px; }

.pp-trackbox { padding: 22px 20px 18px; }
.pp-blocker {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between;
  margin-top: 18px; padding: 14px 16px;
  background: #fffaf0; border: 1px solid #f3d9a8; border-radius: 10px;
}
.pp-blocker strong { display: block; color: #92400e; font-size: 13.5px; }
.pp-blocker span { display: block; margin-top: 3px; color: #a16207; font-size: 12.5px; line-height: 1.5; }
.pp-blocker form { margin: 0; }

/* Publisher cards sit inside a rounded panel of their own. */
.pp-order .pp-track { margin: 16px 0 6px; }

/* Asked for explicitly, for a tracker in a narrow column beside the order
   rather than across the top of it. Same rules the narrow-screen layout uses;
   the difference is that this one does not wait for the screen to be narrow. */
.pp-track-vertical { display: block; padding-left: 4px; }
.pp-track-vertical .pp-step { display: flex; gap: 12px; text-align: left; padding: 0 0 18px; }
.pp-track-vertical .pp-step:last-child { padding-bottom: 0; }
.pp-track-vertical .pp-step::before {
  top: 32px; bottom: -4px; left: 15px; right: auto;
  width: 2px; height: auto;
}
.pp-track-vertical .pp-step:first-child::before { display: block; }
.pp-track-vertical .pp-step:last-child::before { display: none; }
/* The line now runs downward FROM each step, so it takes that step's colour
   rather than the next one's. */
.pp-track-vertical .pp-step.is-todo::before,
.pp-track-vertical .pp-step.is-off::before,
.pp-track-vertical .pp-step.is-current::before,
.pp-track-vertical .pp-step.is-blocked::before { background: var(--pp-todo); }
.pp-track-vertical .pp-step-mark { flex: 0 0 32px; }
.pp-track-vertical .pp-step-body { margin-top: 5px; }
.pp-track-vertical .pp-step-label { font-size: 13.5px; }
.pp-track-vertical .pp-step-note { font-size: 12px; }

@media (max-width: 700px) {
  .pp-track { display: block; padding-left: 4px; }
  .pp-step { display: flex; gap: 12px; text-align: left; padding: 0 0 16px; }
  .pp-step:last-child { padding-bottom: 0; }
  .pp-step::before {
    top: 32px; bottom: -4px; left: 15px; right: auto;
    width: 2px; height: auto;
  }
  .pp-step:first-child::before { display: block; }
  .pp-step:last-child::before { display: none; }
  /* Vertical: the line now runs downward FROM each step, so it takes that
     step's colour rather than the next one's. */
  .pp-step.is-todo::before, .pp-step.is-off::before { background: var(--pp-todo); }
  .pp-step.is-current::before, .pp-step.is-blocked::before { background: var(--pp-todo); }
  .pp-step-mark { flex: 0 0 32px; }
  .pp-step-body { margin-top: 5px; }
}