/* ============================================================
   ICON GUARD — keep this first

   An inline SVG with only a viewBox has no intrinsic size and will
   expand to fill its parent. If this stylesheet is ever served from
   cache against newer markup, everything below may not apply — but
   these three lines will, and they stop an icon taking over the page.
   Colour comes from currentColor, so icons follow the brand rather
   than falling back to black body text.
   ============================================================ */
.pxt svg,
.pxt-rail svg,
.pxt-ico{width:20px;height:20px;max-width:100%;flex:none;color:inherit}

/* =====================================================================
   PRIMEX TRACKING v2
   Bold corporate, matching the approved homepage direction.
   ===================================================================== */

.pxt{
  /* Matches the site palette. If you rebrand, these five follow the
     values in primex-snippet.php and Notify's brand constants. */
  --navy:#2A2166; --navy-d:#1B1544; --yellow:#FFC72C; --yellow-d:#E8AC00;
  --ink:#12142A; --g50:#F4F5F7; --g100:#EBEDF1; --g200:#DCDFE6;
  --g500:#767D90; --g700:#4A5163;
  --ok:#1E7B4D; --warn:#B26200; --bad:#A32B26;
  --display:"Archivo",-apple-system,sans-serif;
  --body:"Inter",-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  font-family:var(--body);font-size:16px;line-height:1.6;color:var(--ink);
  max-width:1180px;margin-inline:auto;padding:clamp(1.5rem,4vw,3rem) clamp(1.25rem,4vw,2.5rem) 4rem;
  -webkit-font-smoothing:antialiased;
}
.pxt *,.pxt *::before,.pxt *::after{box-sizing:border-box}
.pxt h1,.pxt h2,.pxt h3{font-family:var(--display);font-weight:800;letter-spacing:-0.03em;line-height:1.05;margin:0 0 .75rem}
.pxt h1{font-size:clamp(1.9rem,3.8vw,3rem);font-weight:900;letter-spacing:-0.04em}
.pxt h2{font-size:clamp(1.3rem,2.2vw,1.8rem)}
.pxt h3{font-size:1.05rem;letter-spacing:-0.02em}
.pxt p{margin:0 0 .75rem}
.pxt :focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.mono,.pxt .mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---------- search ---------- */
.pxt-search{background:var(--navy);border-top:6px solid var(--yellow);padding:clamp(1.5rem,3.5vw,2.5rem);margin-bottom:1.5rem}
.pxt-search__head h2{color:#fff;margin-bottom:.35rem}
.pxt-search__head p{color:rgba(255,255,255,.7);font-size:.95rem;margin-bottom:1.5rem}
.pxt-search__row{display:grid;grid-template-columns:2fr 1.2fr auto;gap:.85rem;align-items:end}
@media(max-width:820px){.pxt-search__row{grid-template-columns:1fr}}

.pxt-field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:.45rem}
.pxt-field label em{font-style:normal;text-transform:none;letter-spacing:0;color:rgba(255,255,255,.5);font-weight:500}
.pxt-field input{width:100%;font-family:var(--mono);font-size:1.05rem;letter-spacing:.05em;text-transform:uppercase;padding:1rem 1.1rem;border:2px solid transparent;background:#fff;color:var(--ink);border-radius:2px}
.pxt-field--narrow input{font-family:var(--body);text-transform:none;letter-spacing:0;font-size:1rem}
.pxt-field input::placeholder{color:var(--g500);text-transform:none;letter-spacing:0;font-family:var(--body)}
.pxt-field input:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,199,44,.3)}

.pxt-hint{display:block;margin-top:.5rem;font-size:.82rem;font-weight:600;min-height:1.2em}
.pxt-hint.is-neutral{color:rgba(255,255,255,.6)}
.pxt-hint.is-good{color:#7BE0A8}
.pxt-hint.is-bad{color:#FFB4AF}

.pxt-textarea{width:100%;font-family:var(--mono);font-size:1rem;padding:1rem;border:2px solid transparent;border-radius:2px;margin-bottom:1rem;text-transform:uppercase}

.pxt-btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--body);font-size:1rem;font-weight:700;padding:1rem 2rem;border:2px solid transparent;border-radius:2px;cursor:pointer;transition:background .18s,border-color .18s,color .18s;text-decoration:none}
.pxt-btn--go{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.pxt-btn--go:hover{background:var(--yellow-d);border-color:var(--yellow-d)}
.pxt-btn--solid{background:var(--navy);border-color:var(--navy);color:#fff}
.pxt-btn--solid:hover{background:var(--navy-d);color:#fff}
.pxt-btn--ghost{background:transparent;border-color:var(--g200);color:var(--navy)}
.pxt-btn--ghost:hover{border-color:var(--navy)}

/* ---------- problem states ---------- */
.pxt-problem{background:var(--g50);border-left:6px solid var(--yellow);padding:clamp(1.5rem,3vw,2.25rem)}
.pxt-problem--checksum{border-left-color:var(--warn)}
.pxt-problem--throttled{border-left-color:var(--bad)}
.pxt-problem h3{font-size:1.4rem;margin-bottom:.5rem}
.pxt-problem p{color:var(--g700);max-width:64ch;margin:0}

/* ---------- status band ---------- */
.pxt-result{display:flex;flex-direction:column;gap:1.5rem}

.pxt-band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem 2rem;align-items:start;padding:clamp(1.75rem,3.5vw,2.75rem);background:var(--g50);border-left:8px solid var(--g200)}
@media(max-width:760px){.pxt-band{grid-template-columns:1fr}}
.pxt-band--active{border-left-color:var(--yellow)}
.pxt-band--success{border-left-color:var(--ok)}
.pxt-band--danger{border-left-color:var(--bad);background:#FDF3F2}
.pxt-band h1{margin-bottom:.5rem}
.pxt-band__note{color:var(--warn);font-weight:600;font-size:.95rem}
.pxt-band__loc{color:var(--g700);font-size:.98rem;margin:0}

.pxt-chip{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.4rem .85rem;border-radius:2px;background:var(--navy);color:#fff;margin-bottom:1rem}
.pxt-band--success .pxt-chip{background:var(--ok)}
.pxt-band--danger .pxt-chip{background:var(--bad)}
.pxt-band--active .pxt-chip{background:var(--yellow);color:var(--ink)}

.pxt-band__ref{text-align:right;border-left:2px solid var(--g200);padding-left:1.75rem}
@media(max-width:760px){.pxt-band__ref{text-align:left;border-left:0;border-top:2px solid var(--g200);padding:1rem 0 0}}
.pxt-band__ref span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--g500);margin-bottom:.4rem}
.pxt-band__ref strong{font-family:var(--mono);font-size:clamp(1.05rem,1.8vw,1.4rem);font-weight:500;color:var(--navy);white-space:nowrap}

/* ---------- progress ---------- */
.pxt-progress{padding:clamp(1.5rem,3vw,2rem);border:1px solid var(--g200)}
.pxt-progress__track{height:8px;background:var(--g200);position:relative;margin-bottom:1.5rem}
.pxt-progress__fill{position:absolute;inset:0 auto 0 0;width:var(--pxt-pct,0%);background:var(--yellow);transition:width .8s cubic-bezier(.22,.61,.36,1)}
.pxt-progress__stages{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;list-style:none;margin:0;padding:0;gap:.5rem}
@media(max-width:760px){.pxt-progress__stages{grid-auto-flow:row;gap:.85rem}}
.pxt-progress__stages li{font-size:.88rem;font-weight:600;color:var(--g500);display:flex;align-items:center;gap:.55rem}
.pxt-progress__stages li span{width:14px;height:14px;border-radius:50%;border:3px solid var(--g200);background:#fff;flex:none}
.pxt-progress__stages li.is-done{color:var(--g700)}
.pxt-progress__stages li.is-done span{background:var(--yellow);border-color:var(--yellow)}
.pxt-progress__stages li.is-now{color:var(--ink);font-weight:800}
.pxt-progress__stages li.is-now span{border-color:var(--navy);box-shadow:0 0 0 4px rgba(42,33,102,.16)}
.pxt-progress__stages li.is-flag{color:var(--bad);font-weight:800}
.pxt-progress__stages li.is-flag span{border-color:var(--bad);box-shadow:0 0 0 4px rgba(163,43,38,.15)}

/* ---------- facts ---------- */
.pxt-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--g200);border:1px solid var(--g200)}
.pxt-fact{background:#fff;padding:1.25rem;display:flex;flex-direction:column;gap:.35rem}
.pxt-fact span{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--g500)}
.pxt-fact strong{font-size:1rem;font-weight:700}
.pxt-fact.is-locked{background:var(--g50)}
.pxt-locked{color:var(--g500);font-weight:500;font-style:italic}
.pxt-unlock{background:var(--g50);border-left:5px solid var(--navy);padding:1.25rem;font-size:.95rem;color:var(--g700);margin:0;max-width:none}

/* ---------- timeline ---------- */
.pxt-history{border:1px solid var(--g200);padding:clamp(1.5rem,3vw,2.25rem)}
.pxt-history h2{padding-bottom:.85rem;border-bottom:3px solid var(--yellow);display:inline-block;margin-bottom:2rem}
.pxt-timeline{list-style:none;margin:0;padding:0}
.pxt-timeline li{position:relative;display:grid;grid-template-columns:1.1rem 1fr;gap:0 1.4rem;padding-bottom:2rem}
.pxt-timeline li:last-child{padding-bottom:0}
.pxt-timeline li:not(:last-child)::before{content:"";position:absolute;left:.45rem;top:1.4rem;bottom:-.2rem;width:3px;background:var(--g200)}
.pxt-timeline__dot{width:1.1rem;height:1.1rem;border-radius:50%;border:4px solid var(--g200);background:#fff;margin-top:.3rem}
.pxt-timeline li.is-latest .pxt-timeline__dot{border-color:var(--yellow);background:var(--yellow)}
.pxt-timeline li.is-flag .pxt-timeline__dot{border-color:var(--bad);background:var(--bad)}
.pxt-timeline__body h3{margin-bottom:.25rem}
.pxt-timeline li.is-flag h3{color:var(--bad)}
.pxt-timeline__loc{font-size:.95rem;font-weight:600;color:var(--navy);margin:0 0 .15rem}
.pxt-timeline time{display:block;font-family:var(--mono);font-size:.78rem;letter-spacing:.03em;color:var(--g500);margin-bottom:.5rem}
.pxt-timeline__note{font-size:.95rem;color:var(--g700);max-width:66ch;margin-bottom:.5rem}
.pxt-seal{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border:2px solid currentColor;margin-right:.5rem}
.pxt-seal--intact,.pxt-seal--verified{color:var(--ok)}
.pxt-seal--breached{color:var(--bad)}
.pxt-actor{font-size:.78rem;color:var(--g500)}
.pxt-audit{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--g200);font-size:.88rem;color:var(--g500);max-width:70ch}

/* ---------- tables ---------- */
.pxt-table{width:100%;border-collapse:collapse;font-size:.95rem}
.pxt-table th{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--g500);text-align:left;padding:0 1rem .75rem 0;border-bottom:2px solid var(--g200);white-space:nowrap}
.pxt-table td{padding:1rem 1rem 1rem 0;border-bottom:1px solid var(--g200);vertical-align:top}
.pxt-table th.num,.pxt-table td.num{text-align:right;padding-right:0;font-family:var(--mono);font-variant-numeric:tabular-nums}
.pxt-table tfoot td{border-bottom:0;border-top:3px solid var(--ink);font-weight:800;padding-top:1rem}
.pxt-table tr.is-released{color:var(--g500)}
.pxt-table tr.is-released strong{font-weight:600}
.pxt-table--compact td,.pxt-table--compact th{padding-block:.6rem}
.pxt-table small{color:var(--g500)}

.pxt-pill{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.28rem .6rem;border:2px solid currentColor;white-space:nowrap}
.pxt-pill--live{color:var(--navy)}
.pxt-pill--done{color:var(--g500)}
.pxt-pill--success{color:var(--ok)}
.pxt-pill--warning{color:var(--warn)}
.pxt-pill--danger{color:var(--bad)}
.pxt-pill--active{color:var(--warn)}
.pxt-pill--neutral{color:var(--g500)}

.pxt-inventory,.pxt-billing,.pxt-ledger{border:1px solid var(--g200);padding:clamp(1.5rem,3vw,2.25rem)}
.pxt-inventory h2,.pxt-billing h2,.pxt-ledger h2{padding-bottom:.85rem;border-bottom:3px solid var(--yellow);display:inline-block;margin-bottom:1.75rem}

/* ---------- rate schedule ---------- */
.pxt-schedule{background:var(--g50);padding:1.5rem;margin-bottom:1.75rem}
.pxt-schedule h3{margin-bottom:.5rem}
.pxt-schedule__lede{font-size:.95rem;color:var(--g700);max-width:70ch}
.pxt-schedule__grace{margin:1rem 0 0;font-size:.9rem;font-weight:600;color:var(--ok)}

/* ---------- balances ---------- */
.pxt-balances{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:var(--g200);border:1px solid var(--g200)}
.pxt-balance{background:#fff;padding:1.5rem;display:flex;flex-direction:column;gap:.3rem}
.pxt-balance span{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--g500)}
.pxt-balance strong{font-family:var(--display);font-size:1.75rem;font-weight:800;letter-spacing:-0.03em}
.pxt-balance em{font-style:normal;font-size:.8rem;color:var(--g500)}
.pxt-balance--due{background:var(--navy)}
.pxt-balance--due span{color:var(--yellow)}
.pxt-balance--due strong,.pxt-balance--due em{color:#fff}
.pxt-balance--due.is-settled{background:#fff}
.pxt-balance--due.is-settled span{color:var(--g500)}
.pxt-balance--due.is-settled strong{color:var(--ok)}
.pxt-balance--due.is-settled em{color:var(--g500)}

.pxt-callout{margin-top:1.5rem;padding:1.25rem 1.5rem;background:var(--g50);border-left:5px solid var(--yellow);font-size:.98rem;color:var(--g700);max-width:none}
.pxt-callout--plain{border-left-color:var(--g200)}
.pxt-callout strong{color:var(--ink)}
.pxt-empty{background:var(--g50);padding:1.5rem;color:var(--g700);font-size:.95rem;margin:0}
.pxt-muted{color:var(--g500)}

.pxt-actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- print ---------- */
@media print{
  .pxt-search,.pxt-actions{display:none!important}
  .pxt{max-width:none;padding:0;font-size:10.5pt}
  .pxt-band{background:#fff!important;border:1px solid #000;border-left-width:6px}
  .pxt-chip{background:#fff!important;color:#000!important;border:1px solid #000}
  .pxt-progress,.pxt-history,.pxt-inventory,.pxt-billing,.pxt-ledger,.pxt-facts{border:1px solid #999;break-inside:avoid}
  .pxt-balance--due{background:#fff!important}
  .pxt-balance--due span,.pxt-balance--due strong,.pxt-balance--due em{color:#000!important}
  .pxt-timeline li{break-inside:avoid}
  .pxt-timeline__dot{border-color:#000!important}
  .pxt-timeline li.is-latest .pxt-timeline__dot{background:#000!important}
  .pxt-audit{border-top:1px solid #000}
}

@media(prefers-reduced-motion:reduce){.pxt *{transition:none!important;animation:none!important}}

/* ============================================================
   RESPONSIVE CORRECTIONS

   The search row put two labelled fields beside an unlabelled
   button, so nothing shared a baseline. Every cell now carries a
   label — the button's is a spacer — and the hint line reserves
   its height whether or not it has text, so the row does not jump
   as you type.
   ============================================================ */

.pxt-search__row{align-items:end}
.pxt-field{min-width:0}
.pxt-field label{display:block;min-height:1.15rem;line-height:1.15rem}
.pxt-field--btn label{visibility:hidden}
.pxt-field--btn .pxt-btn{width:100%}
.pxt-hint{min-height:1.25rem}

/* tablet: reference on its own line, factor and button share the next */
@media(max-width:1000px) and (min-width:641px){
  .pxt-search__row{grid-template-columns:1fr 1fr;gap:1rem .85rem}
  .pxt-search__row .pxt-field:first-child{grid-column:1 / -1}
}

/* phone */
@media(max-width:640px){
  .pxt-search__row{grid-template-columns:1fr;gap:1rem}
  .pxt-field--btn label{display:none}
  .pxt-search{padding:1.5rem 1.25rem}
  .pxt-field input{font-size:16px}      /* stops iOS zooming the page on focus */
  .pxt-band{padding:1.5rem 1.25rem}
  .pxt-band h1{font-size:1.6rem}
  .pxt-band__ref{padding:1rem 0 0}
  .pxt-band__ref strong{font-size:1.1rem;white-space:normal;word-break:break-all}
  .pxt-facts{grid-template-columns:1fr 1fr}
  .pxt-progress,.pxt-history,.pxt-inventory,.pxt-billing,.pxt-ledger{padding:1.25rem}
  .pxt-timeline li{grid-template-columns:0.9rem 1fr;gap:0 1rem}
  .pxt-timeline__note{font-size:.92rem}
  .pxt-balances{grid-template-columns:1fr 1fr}
  .pxt-balance strong{font-size:1.4rem}
  .pxt-workings{grid-template-columns:1fr}
  .pxt-actions .pxt-btn{width:100%}
}

@media(max-width:420px){
  .pxt-facts,.pxt-balances{grid-template-columns:1fr}
}

/* landscape phones: the band was eating the whole viewport */
@media(max-height:520px) and (orientation:landscape){
  .pxt-search{padding-block:1.25rem}
  .pxt-band{padding-block:1.25rem}
}

/* very wide screens: stop the timeline notes running to silly lengths */
@media(min-width:1400px){
  .pxt{max-width:1240px}
}

/* tables that must scroll rather than squash */
.pxt-inventory,.pxt-ledger{overflow-x:auto}
.pxt-table{min-width:520px}
@media(max-width:640px){
  .pxt-table{min-width:0}
  .pxt-table thead{display:none}
  .pxt-table tbody tr{display:grid;grid-template-columns:1fr auto;gap:.2rem .75rem;
    padding:.85rem 0;border-bottom:1px solid var(--g200)}
  .pxt-table tbody td{border:0;padding:0}
  .pxt-table tbody td.num{text-align:right}
  .pxt-table tfoot tr{display:grid;grid-template-columns:1fr auto;padding-top:.75rem}
  .pxt-table tfoot td{border:0;padding:0}
}

/* ============================================================
   WAYBILL EXTRACT

   Replaces the old facts grid. That used gap-as-border — a 1px
   grid gap over a grey container — so a row that did not fill
   its columns left the container showing through as a grey slab.
   Cells now carry their own rules on a white ground, so a short
   row simply ends.

   Split into two blocks because that is how an air waybill or a
   bill of lading actually reads: particulars anyone may see, then
   the commercially sensitive part behind a lock.
   ============================================================ */

.pxt-waybill{border:1px solid var(--g200);background:#fff}

.pxt-waybill__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.75rem 1.5rem;padding:1.15rem clamp(1.25rem,2.5vw,1.75rem);
  border-bottom:1px solid var(--g200);background:var(--g50)}
.pxt-waybill__head h2,.pxt-waybill__head h3{margin:0;font-size:1rem;letter-spacing:-.01em}
.pxt-waybill__head--sub{border-top:1px solid var(--g200)}

.pxt-waybill__mode{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--g500)}

.pxt-waybill__lock{font-family:var(--mono);font-size:.68rem;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;padding:.28rem .6rem;border:1px solid currentColor;color:var(--warn)}
.pxt-waybill__lock.is-open{color:var(--ok)}

.pxt-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:0}
.pxt-spec__cell{padding:1.1rem clamp(1.25rem,2.5vw,1.75rem);
  border-right:1px solid var(--g200);border-bottom:1px solid var(--g200);min-width:0}
.pxt-spec__cell:last-child{border-right:0}
.pxt-spec > .pxt-spec__cell:nth-last-child(-n+1){border-bottom:0}
.pxt-spec dt{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--g500);margin-bottom:.4rem}
.pxt-spec dd{margin:0;font-size:1rem;font-weight:600;color:var(--ink);line-height:1.45;
  overflow-wrap:anywhere}

.pxt-spec--protected .pxt-spec__cell.is-locked{background:
  repeating-linear-gradient(135deg,var(--g50),var(--g50) 8px,#fff 8px,#fff 16px)}
.pxt-spec--protected .pxt-spec__cell.is-locked dd{font-weight:500}
.pxt-locked{color:var(--g500);font-style:italic;font-size:.92rem}

@media(max-width:820px){
  .pxt-spec{grid-template-columns:1fr 1fr}
  .pxt-spec__cell:nth-child(2n){border-right:0}
}
@media(max-width:460px){
  .pxt-spec{grid-template-columns:1fr}
  .pxt-spec__cell{border-right:0}
}

/* the old classes stay defined so nothing else breaks */
.pxt-facts{display:none}

/* ============================================================
   THE RAIL

   Replaces the flat bar and dots. Each stage carries its own
   mark, the connector runs between the marks rather than above
   them, and colour is the only thing carrying state:

     green   finished cleanly
     yellow  moving normally
     red     exception

   Desktop runs horizontal, phone runs vertical with the
   connector down the left. Same markup, no duplication.
   ============================================================ */

.pxt-rail{
  --tone: var(--yellow);
  border:1px solid var(--g200);background:#fff;
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1rem,2.5vw,1.75rem);
}
.pxt-rail--success{--tone:var(--ok)}
.pxt-rail--active {--tone:var(--yellow)}
.pxt-rail--danger {--tone:var(--bad)}
.pxt-rail--neutral{--tone:var(--g500)}

.pxt-rail__list{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  list-style:none;margin:0;padding:0;position:relative;
}

.pxt-rail__step{
  position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:.6rem;padding:0 .25rem;min-width:0;
}

/* connector — drawn from each step back to the previous one, so it
   cannot overshoot the last mark the way a full-width bar did */
.pxt-rail__step::before{
  content:"";position:absolute;top:22px;right:50%;left:-50%;
  height:3px;background:var(--g200);z-index:0;
}
.pxt-rail__step:first-child::before{display:none}
.pxt-rail__step.is-done::before,
.pxt-rail__step.is-now::before{background:var(--tone)}

.pxt-rail__mark{
  position:relative;z-index:1;
  width:44px;height:44px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  background:#fff;border:3px solid var(--g200);color:var(--g500);
  transition:transform .3s var(--ease),border-color .3s,background .3s,color .3s;
}
.pxt-rail__mark svg{width:20px;height:20px}

.pxt-rail__step.is-done .pxt-rail__mark{
  background:var(--tone);border-color:var(--tone);
  color:#fff;
}
.pxt-rail--active .pxt-rail__step.is-done .pxt-rail__mark{color:var(--ink)}
.pxt-rail--success .pxt-rail__step.is-done .pxt-rail__mark{color:#fff}
.pxt-rail--danger  .pxt-rail__step.is-done .pxt-rail__mark{color:#fff}

.pxt-rail__step.is-now .pxt-rail__mark{
  width:52px;height:52px;
  background:#fff;border-color:var(--tone);color:var(--tone);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--tone) 18%, transparent);
}
.pxt-rail__step.is-now .pxt-rail__mark svg{width:24px;height:24px}

.pxt-rail__label{font-size:.9rem;font-weight:600;color:var(--g500);line-height:1.3}
.pxt-rail__step.is-done .pxt-rail__label{color:var(--g700)}
.pxt-rail__step.is-now  .pxt-rail__label{color:var(--ink);font-weight:800}

.pxt-rail__when{font-family:var(--mono);font-size:.72rem;color:var(--g500);letter-spacing:.03em}

.pxt-rail__flag{
  font-family:var(--mono);font-size:.66rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;background:var(--tone);
  padding:.22rem .5rem;border-radius:2px;
}

/* the current mark breathes, but only while something is actually moving */
.pxt-rail--active .pxt-rail__step.is-now .pxt-rail__mark{animation:pxt-breathe 2.8s ease-in-out infinite}
@keyframes pxt-breathe{
  0%,100%{box-shadow:0 0 0 6px rgba(255,199,44,.20)}
  50%    {box-shadow:0 0 0 11px rgba(255,199,44,.06)}
}
.pxt-rail--danger .pxt-rail__step.is-now .pxt-rail__mark{animation:pxt-alert 2s ease-in-out infinite}
@keyframes pxt-alert{
  0%,100%{box-shadow:0 0 0 6px rgba(163,43,38,.22)}
  50%    {box-shadow:0 0 0 11px rgba(163,43,38,.06)}
}

/* ---------- phone: vertical rail ---------- */
@media(max-width:720px){
  .pxt-rail__list{grid-auto-flow:row;grid-auto-columns:auto;gap:0}
  .pxt-rail__step{
    flex-direction:row;align-items:flex-start;text-align:left;
    gap:1rem;padding:0 0 1.5rem 0;
  }
  .pxt-rail__step:last-child{padding-bottom:0}
  .pxt-rail__step::before{
    top:auto;bottom:-8px;left:22px;right:auto;
    width:3px;height:calc(100% - 36px);
  }
  .pxt-rail__step:first-child::before{display:none}
  /* on a column the connector belongs above each mark, not below */
  .pxt-rail__step::before{top:-8px;bottom:auto}

  .pxt-rail__mark{width:44px;height:44px}
  .pxt-rail__step.is-now .pxt-rail__mark{width:44px;height:44px}
  .pxt-rail__step.is-now .pxt-rail__mark svg{width:20px;height:20px}

  .pxt-rail__label{font-size:1rem;padding-top:.7rem}
  .pxt-rail__when,.pxt-rail__flag{margin-top:.75rem}
  .pxt-rail__step{flex-wrap:wrap}
}

@media(prefers-reduced-motion:reduce){
  .pxt-rail__step.is-now .pxt-rail__mark{animation:none}
}

/* older markup, retired */
.pxt-progress{display:none}

/* ---------- evidence on the public timeline ---------- */
.pxt-evidence{list-style:none;margin:.75rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.pxt-evidence a{display:flex;align-items:center;gap:.55rem;padding:.4rem .7rem;
  border:1px solid var(--g200);background:#fff;font-size:.85rem;color:var(--navy);
  text-decoration:none;transition:border-color .2s}
.pxt-evidence a:hover{border-color:var(--navy)}
.pxt-evidence img{width:30px;height:30px;object-fit:cover;flex:none}
@media(max-width:640px){
  .pxt-evidence a{width:100%}
}