/* Parcelpath design tokens and components */

@font-face{font-family:'Barlow';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/barlow-400.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlow-600.woff2') format('woff2');}
@font-face{font-family:'Barlow';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/barlow-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibmplexmono-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibmplexmono-600.woff2') format('woff2');}

:root{
  --pp-ink:#12181f;
  --pp-route:#0b6b5b;
  --pp-route-dark:#085043;
  --pp-route-tint:#e4f0ed;
  --pp-route-tint-2:#cfe6e0;
  --pp-amber:#d98218;
  --pp-amber-tint:#fbe6cf;
  --pp-alert:#a52a21;
  --pp-alert-tint:#f7e3e1;
  --pp-grey:#6c7580;
  --pp-paper:#fafaf8;
  --pp-card:#ffffff;
  --pp-line:#e3e2dd;

  --pp-r-sm:5px;
  --pp-r-md:9px;
  --pp-r-lg:14px;

  --pp-s1:4px; --pp-s2:8px; --pp-s3:12px; --pp-s4:16px;
  --pp-s5:24px; --pp-s6:32px; --pp-s7:48px;

  --pp-shadow:0 1px 2px rgba(11,107,91,.06), 0 6px 20px rgba(18,24,31,.06);
  --pp-shadow-lg:0 2px 6px rgba(11,107,91,.10), 0 16px 36px rgba(18,24,31,.12);

  --pp-body:"Barlow", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --pp-mono:"IBM Plex Mono", Consolas, ui-monospace, monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--pp-paper);color:var(--pp-ink);
  font-family:var(--pp-body);font-size:16px;line-height:1.6;
}
h1,h2,h3{font-family:var(--pp-body);font-weight:700;line-height:1.15;margin:0 0 .4em}
h1{font-size:clamp(1.6rem,1.2rem + 1.8vw,2.35rem);letter-spacing:-.01em}
h2{font-size:1.28rem}
h3{font-size:1.04rem;font-weight:600}
p{margin:0 0 1rem}
a{color:var(--pp-route);text-decoration:none}
a:hover{text-decoration:underline}

/* top bar */
.pp-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--pp-s4);
  padding:var(--pp-s3) clamp(var(--pp-s4),4vw,var(--pp-s6));
  background:var(--pp-route);color:#eaf2f0;
}
.pp-brand{display:inline-flex;align-items:center;gap:.55rem}
.pp-brand img{height:26px;width:auto;display:block}
.pp-brand:hover{text-decoration:none}
.pp-nav{display:flex;align-items:center;gap:clamp(var(--pp-s3),2vw,var(--pp-s5));flex-wrap:wrap}
.pp-nav a{color:#c9ded9;font-weight:500;font-size:.95rem;padding:4px 2px;border-bottom:2px solid transparent}
.pp-nav a:hover{color:#fff;text-decoration:none;border-bottom-color:#fff}

/* layout */
.pp-wrap{max-width:1060px;margin:0 auto;padding:clamp(var(--pp-s5),4vw,var(--pp-s7)) clamp(var(--pp-s4),4vw,var(--pp-s6))}
.pp-narrow{max-width:560px}
.pp-foot{max-width:1060px;margin:var(--pp-s7) auto 0;padding:var(--pp-s5) clamp(var(--pp-s4),4vw,var(--pp-s6));
  border-top:1px solid var(--pp-line);display:flex;align-items:center;gap:var(--pp-s3);color:var(--pp-grey);font-size:.85rem}
.pp-foot img{height:20px;width:auto;opacity:.9}
.pp-eyebrow{color:var(--pp-route);font-weight:600;font-size:.9rem;margin-bottom:.3rem}
.pp-lead{color:var(--pp-grey);font-size:1.02rem;max-width:60ch}

/* cards */
.pp-card{background:var(--pp-card);border:1px solid var(--pp-line);border-radius:var(--pp-r-lg);
  padding:clamp(var(--pp-s4),3vw,var(--pp-s6));box-shadow:var(--pp-shadow)}
.pp-card + .pp-card{margin-top:var(--pp-s5)}
.pp-mt{margin-top:var(--pp-s5)}

/* forms */
label{display:block;font-weight:500;font-size:.9rem;margin:0 0 .35rem}
.pp-field{margin-bottom:var(--pp-s4)}
input,select,textarea{width:100%;font-family:var(--pp-body);font-size:1rem;color:var(--pp-ink);
  padding:.7rem .85rem;background:#fff;border:1px solid var(--pp-line);border-radius:var(--pp-r-md);
  transition:border-color .15s ease, box-shadow .15s ease}
input:hover,select:hover,textarea:hover{border-color:#c7c6c0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--pp-route);box-shadow:0 0 0 3px rgba(11,107,91,.16)}
.pp-row{display:flex;gap:var(--pp-s4);flex-wrap:wrap}
.pp-row > *{flex:1 1 220px}

/* buttons */
.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--pp-body);font-weight:600;font-size:1rem;line-height:1;cursor:pointer;
  padding:.8rem 1.4rem;border-radius:var(--pp-r-md);border:1px solid transparent;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease}
.pp-btn-primary{background:var(--pp-route);color:#fff}
.pp-btn-primary:hover{background:var(--pp-route-dark);box-shadow:var(--pp-shadow-lg);text-decoration:none}
.pp-btn-secondary{background:#fff;color:var(--pp-route);border-color:var(--pp-line)}
.pp-btn-secondary:hover{box-shadow:var(--pp-shadow);text-decoration:none}
.pp-btn:active{transform:translateY(1px)}
.pp-btn:focus-visible{outline:3px solid var(--pp-route);outline-offset:2px}
.pp-btn-block{width:100%}
.pp-btn-lg{font-size:1.08rem;padding:.95rem 1.6rem}

/* tracking code */
.pp-code{font-family:var(--pp-mono);font-weight:600;letter-spacing:.02em}

/* notices */
.pp-notice{padding:var(--pp-s3) var(--pp-s4);border-radius:var(--pp-r-md);font-size:.95rem;border:1px solid transparent}
.pp-notice--ok{background:var(--pp-route-tint);border-color:var(--pp-route-tint-2);color:var(--pp-route-dark)}
.pp-notice--error{background:var(--pp-alert-tint);border-color:#e7c4c0;color:var(--pp-alert)}
.pp-flash{background:var(--pp-route-tint);border:1px solid var(--pp-route-tint-2);color:var(--pp-route-dark);
  padding:var(--pp-s3) var(--pp-s4);border-radius:var(--pp-r-md);margin-bottom:var(--pp-s5);font-size:.95rem}

/* status badges — weight escalates so the sequence reads in black & white.
   outline -> tinted -> solid. amber is used for Out for Delivery only. */
.pp-status{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.85rem;
  padding:.32rem .68rem;border-radius:999px;border:1px solid var(--pp-grey);color:var(--pp-ink);background:transparent}
.pp-status::before{content:"";width:8px;height:8px;border-radius:50%;border:2px solid currentColor;background:transparent}
.pp-status--registered{border-style:dashed;color:var(--pp-grey)}
.pp-status--warehouse,
.pp-status--dispatched,
.pp-status--transit,
.pp-status--arrived{background:var(--pp-route-tint);border-color:var(--pp-route-tint-2);color:var(--pp-route-dark)}
.pp-status--warehouse::before,
.pp-status--dispatched::before,
.pp-status--transit::before,
.pp-status--arrived::before{border-color:var(--pp-route);background:var(--pp-route)}
.pp-status--dispatched,.pp-status--transit,.pp-status--arrived{border-width:1px;background:var(--pp-route-tint-2)}
.pp-status--delivery{background:var(--pp-amber-tint);border-color:#eccf9a;color:#8a5310}
.pp-status--delivery::before{border-color:var(--pp-amber);background:var(--pp-amber)}
.pp-status--delivered{background:var(--pp-route);border-color:var(--pp-route);color:#fff;font-weight:700}
.pp-status--delivered::before{border-color:#fff;background:#fff}

/* route timeline */
.pp-timeline{list-style:none;margin:var(--pp-s5) 0 0;padding:0;display:flex;gap:0}
.pp-timeline li{flex:1;position:relative;text-align:center;padding-top:34px;min-width:0}
.pp-timeline li::before{content:"";position:absolute;top:10px;left:-50%;width:100%;height:3px;background:var(--pp-line)}
.pp-timeline li:first-child::before{display:none}
.pp-timeline .pp-node{position:absolute;top:3px;left:50%;transform:translateX(-50%);
  width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--pp-line);z-index:1}
.pp-timeline .pp-st{font-size:.78rem;color:var(--pp-grey);line-height:1.25;padding:0 4px;display:block}
.pp-timeline li.done::before{background:var(--pp-route)}
.pp-timeline li.done .pp-node{background:var(--pp-route);border-color:var(--pp-route)}
.pp-timeline li.done .pp-st{color:var(--pp-ink)}
.pp-timeline li.current::before{background:var(--pp-route)}
.pp-timeline li.current .pp-node{background:#fff;border-color:var(--pp-route);box-shadow:0 0 0 4px var(--pp-route-tint-2)}
.pp-timeline li.current .pp-st{color:var(--pp-ink);font-weight:700}

/* tables */
.pp-table-wrap{overflow-x:auto;border:1px solid var(--pp-line);border-radius:var(--pp-r-md);background:#fff}
table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:420px}
th,td{text-align:left;padding:.68rem .85rem;border-bottom:1px solid var(--pp-line);white-space:nowrap}
th{background:#f4f3ef;font-weight:600;color:var(--pp-grey);font-size:.82rem}
tr:last-child td{border-bottom:none}
td.pp-wrap-cell{white-space:normal;min-width:160px}

/* stat tiles */
.pp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--pp-s4);margin-bottom:var(--pp-s5)}
.pp-stat{background:#fff;border:1px solid var(--pp-line);border-radius:var(--pp-r-md);padding:var(--pp-s4);box-shadow:var(--pp-shadow)}
.pp-stat .pp-num{font-weight:700;font-size:2rem;line-height:1;color:var(--pp-route)}
.pp-stat .pp-lbl{color:var(--pp-grey);font-size:.85rem;margin-top:.4rem}

/* scanner */
.pp-stage-banner{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--pp-route-tint);
  border:1px solid var(--pp-route-tint-2);border-radius:var(--pp-r-md);padding:var(--pp-s3) var(--pp-s4);
  margin-bottom:var(--pp-s5);color:var(--pp-route-dark);font-weight:500}
.pp-stage-banner strong{color:var(--pp-route-dark)}
#code{font-family:var(--pp-mono);font-size:1.2rem;padding:1rem}
#result{margin-top:var(--pp-s5)}
#result:empty{display:none}
#result.pp-notice{font-size:1.05rem;padding:var(--pp-s4) var(--pp-s5)}
#reader{margin-top:var(--pp-s4);max-width:360px}

/* label sheet */
.pp-label{background:#fff;border:1px dashed #b6b4ab;border-radius:var(--pp-r-sm);max-width:420px;
  padding:var(--pp-s5);text-align:center;box-shadow:var(--pp-shadow)}
.pp-label img{display:block;margin:0 auto var(--pp-s3)}
.pp-label .pp-code{font-size:1.25rem;display:block;margin-top:var(--pp-s2)}
.pp-label .pp-dest{color:var(--pp-grey);margin-top:.25rem}

/* misc */
.pp-hint{color:var(--pp-grey);font-size:.88rem}
.pp-spread{display:flex;align-items:center;justify-content:space-between;gap:var(--pp-s4);flex-wrap:wrap}
.pp-badge{font-size:.78rem;padding:.2rem .5rem;border-radius:999px;background:var(--pp-route-tint);color:var(--pp-route-dark);font-weight:600}
.pp-badge.off{background:var(--pp-alert-tint);color:var(--pp-alert)}

@media (max-width:640px){
  .pp-timeline{flex-direction:column;gap:0}
  .pp-timeline li{text-align:left;padding:0 0 var(--pp-s4) 34px;min-height:40px}
  .pp-timeline li::before{top:0;left:8px;width:3px;height:100%}
  .pp-timeline li:first-child::before{display:block}
  .pp-timeline li:last-child::before{display:none}
  .pp-timeline .pp-node{top:0;left:8px;transform:none}
  .pp-timeline .pp-st{padding:0}
}
@media print{
  .pp-topbar,.pp-foot,.pp-noprint{display:none !important}
  body{background:#fff}
  .pp-label{box-shadow:none;border-style:solid}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}