/* RL OS shipment tracker (app/tracker.php). Own file so the client portal, the staff OS shell (client view preview)
   and the public share page (/t) all load it. Self-contained: no variables from app.css or os.css. */
/* ---------- the shipment tracker (Leon, 12 Oct 2026, ~15:20: "our logos and colour theme, animated vessel or plane").
   In the Rapple Logistics house look of www.rapplelogistics.co.za (site.css v3): ink, steel, silver, no orange;
   Barlow Condensed headings, Inter, IBM Plex Mono. app/tracker.php draws it; app.js moves the vehicle on load. */
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-600-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2')}
.trk{--k-ink:#0A0B0C;--k-ink2:#12161B;--k-steel:#4C6076;--k-steel2:#3E5063;--k-hi:#5E7690;--k-silver:#C7CDD6;--k-gold:#93A3B8;--k-line:#DCDFE4;--k-mute:#5E6570;
  --k-sky1:#DDE5EE;--k-sky2:#F3F6F9;--k-head:'Barlow Condensed','Arial Narrow',Arial,sans-serif;--k-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;--h:.0833;
  position:relative;container-type:inline-size;background:#fff;border:1px solid var(--k-line);border-radius:12px;padding:0 16px 18px;margin:0 0 16px;overflow:hidden;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
.n2{--h:.25}.n3{--h:.1667}.n4{--h:.125}.n5{--h:.1}.n6{--h:.0833}.n7{--h:.0714}.n8{--h:.0625}.n9{--h:.0556}.n10{--h:.05}
.trk-scene{margin:0 -16px;border-bottom:1px solid var(--k-line);background:var(--k-sky2)}
.scn{display:block;width:100%;height:auto}
.scn .sky{fill:var(--k-sky1)}
.scn .cl{fill:#fff;opacity:.75}.scn .cl.b{opacity:.55}
.scn .land{fill:var(--k-silver)}
.scn .crane{fill:none;stroke:var(--k-steel2);stroke-width:3}
.scn .c1{fill:var(--k-steel)}.scn .c2{fill:var(--k-silver)}.scn .c2b{fill:var(--k-steel2)}.scn .c3{fill:var(--k-hi)}.scn .c4{fill:var(--k-gold)}
.scn .sea{fill:var(--k-steel2)}
.scn .wv path{fill:none;stroke:var(--k-silver);stroke-width:2;opacity:.7}.scn .wv.b path{stroke-width:1.5;opacity:.5}
.scn .rt{fill:none;stroke:var(--k-silver);stroke-width:2;stroke-dasharray:5 7;opacity:.8}
.scn .rt-done{fill:none;stroke:#fff;stroke-width:3}
.k-road .scn .rt-done{stroke:var(--k-steel)}
.scn .hull{fill:var(--k-ink2)}.scn .deck{stroke:#fff;stroke-width:1.5}.scn .brg{fill:#fff}
.scn .wk{fill:var(--k-silver)}
.scn .rw{fill:var(--k-steel2)}.scn .rwl{fill:none;stroke:var(--k-silver);stroke-width:2;stroke-dasharray:10 8}
.scn .arc{fill:none;stroke:var(--k-hi);stroke-width:2;stroke-dasharray:5 7;opacity:.6}.scn .arc-done{fill:none;stroke:var(--k-steel);stroke-width:3}
.scn .trail{fill:none;stroke:var(--k-hi);stroke-width:2;stroke-dasharray:4 7}
.scn .road{fill:var(--k-steel2)}
.scn .farm path{fill:var(--k-hi)}.scn .farm .door{fill:var(--k-ink2)}.scn .farm .field{fill:none;stroke:var(--k-steel);stroke-width:3}
.scn .whl{fill:var(--k-ink);stroke:var(--k-silver);stroke-width:2;stroke-dasharray:4 3}
.scn .tg{font:600 15px var(--k-head);letter-spacing:.1em;fill:var(--k-ink)}
.scn .tg2{font:500 12px var(--k-mono);fill:var(--k-mute)}
.trk-cap{margin:12px 0 0;font-size:15px;font-weight:500;color:var(--k-ink)}
/* the steps: dots on a line, the bar running to where the vehicle is */
.trk-stops{position:relative;list-style:none;margin:18px 0 0;padding:0;display:flex}
.trk-stops li{flex:1 1 0;min-width:0;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:0 2px}
.trk-stops li.trk-bar{position:absolute;z-index:0;top:9px;left:calc(100% * var(--h));right:calc(100% * var(--h));height:3px;padding:0;background:var(--k-line);border-radius:2px;display:block}
.trk-bar span{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--k-steel);border-radius:2px}
.trk .dot{width:21px;height:21px;border-radius:50%;background:#fff;border:3px solid var(--k-line);display:grid;place-items:center;margin-bottom:6px}
.trk .ts-done .dot,.trk .ts-now .dot{background:var(--k-steel);border-color:var(--k-steel)}
.trk .ts-done .dot::after,.trk .ts-now .dot::after{content:"";width:6px;height:3px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.trk .ts-next .dot{border-color:var(--k-steel)}
.trk-stops b{font:600 15px var(--k-head);letter-spacing:.05em;text-transform:uppercase;color:var(--k-ink);line-height:1.1}
.trk-stops small{font:500 12px var(--k-mono);color:var(--k-mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.trk .ts-todo b{color:var(--k-mute)}
.trk .ts-now small:last-child{color:var(--k-steel);font-weight:600}
.all-done .trk-stops li:last-child .dot{background:#1C6B4F;border-color:#1C6B4F}
/* motion: waves, clouds, the ship bobbing with its wake, the plane's contrail, the truck's wheels; the current step rings */
.trk.on .wv{animation:trk-wave 6s linear infinite}.trk.on .wv.b{animation-duration:9s}
.trk.on .cl{animation:trk-cloud 40s linear infinite}.trk.on .cl.b{animation-duration:60s}
.trk.on .bob{animation:trk-bob 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.trk.on .bob.sm{animation:trk-rumble .5s ease-in-out infinite}
.trk.on .wk{animation:trk-wake 1.6s ease-out infinite;transform-box:fill-box;transform-origin:right center}
.trk.on .trail{animation:trk-trail 1s linear infinite}
.trk.on .whl{animation:trk-spin .6s linear infinite;transform-box:fill-box;transform-origin:center}
.trk.on.parked .whl,.trk.on.parked .bob.sm{animation:none}
.trk.on .ts-now .dot{animation:trk-ring 2s 3.4s infinite}
@keyframes trk-wave{to{transform:translateX(-120px)}}
@keyframes trk-cloud{to{transform:translateX(-1100px)}}
@keyframes trk-bob{0%,100%{transform:translateY(0) rotate(-.8deg)}50%{transform:translateY(3px) rotate(.8deg)}}
@keyframes trk-rumble{0%,100%{transform:translateY(0)}50%{transform:translateY(1px)}}
@keyframes trk-wake{0%{opacity:.8;transform:scaleX(.4)}100%{opacity:0;transform:scaleX(1.4)}}
@keyframes trk-trail{to{stroke-dashoffset:-11}}
@keyframes trk-spin{to{transform:rotate(360deg)}}
@keyframes trk-ring{0%{box-shadow:0 0 0 0 rgba(76,96,118,.55)}100%{box-shadow:0 0 0 12px rgba(76,96,118,0)}}
/* narrow (a phone, or the 400px share card): the picture keeps its whole route (labels move to the caption), the steps run down the page */
@container (max-width:639px){
  .scn .tg,.scn .tg2{display:none}
  .trk-stops{flex-direction:column;margin-top:14px}
  .trk-stops li{display:grid;grid-template-columns:21px minmax(0,1fr) auto;column-gap:12px;align-items:center;text-align:left;padding:0 0 14px}
  .trk-stops li:last-child{padding-bottom:0}
  .trk .dot{margin:0;grid-row:1 / 3}
  .trk-stops b{grid-column:2}
  .trk-stops small.pl{grid-column:2;grid-row:2}
  .trk-stops small:not(.pl){grid-column:3;grid-row:1 / 3;font-size:12px}
  .trk-stops li:not(.trk-bar)::before{content:"";position:absolute;left:9px;top:22px;bottom:0;width:3px;background:var(--k-line)}
  .trk-stops li.ts-done::before,.trk-stops li.ts-now::before{background:var(--k-steel)}
  .trk-stops li:last-child::before,.trk-stops li.trk-bar{display:none}
}
@media (prefers-reduced-motion:reduce){
  .trk.on .wv,.trk.on .cl,.trk.on .bob,.trk.on .wk,.trk.on .trail,.trk.on .whl,.trk.on .ts-now .dot{animation:none}
}
/* the small strip on a shipment row: one bar per step */
.tstrip{display:flex;gap:3px;max-width:220px;margin-top:4px}
.tstrip i{flex:1 1 0;height:4px;border-radius:999px;background:#DCDFE4}
.tstrip i.d{background:#4C6076}
.tstrip i.c{background:#0A0B0C;box-shadow:0 0 0 2px #E6EBF1}

/* the public share page (/t?k=..., render_track in app/tracker.php): portal background, ink bar, one wide card */
body.tpage{margin:0;min-height:100vh;background:#E6EAF0;color:#262B33;font:16px/1.5 'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-text-size-adjust:100%}
.tp-top{background:#0A0B0C;padding:calc(14px + env(safe-area-inset-top)) 16px 14px}
.tp-in{max-width:820px;margin:0 auto}
.tp-top img{display:block;height:28px;width:auto;max-width:100%}
.tp-main{max-width:820px;margin:24px auto;padding:0 16px}
.tp-card{background:#fff;border:1px solid #DCDFE4;border-radius:12px;padding:24px}
.tp-card h1{margin:0 0 6px;font:600 30px/1.1 'Barlow Condensed','Arial Narrow',Arial,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:#0A0B0C}
.tp-card .trk{margin:16px 0}
.tp-foot{max-width:820px;margin:0 auto;padding:0 16px 32px;font-size:12px;color:#5E6570;text-align:center}
@media (max-width:639px){.tp-main{margin:12px auto;padding:0 10px}.tp-card{padding:16px 14px}.tp-card h1{font-size:24px}.tp-top img{height:22px}}
/* the status bits above the tracker (styled for the signcard in os.css; here in the wide card) */
.tpage .trk-sub{margin:0 0 12px;color:#5E6570;font-size:15px}
.tpage .trk-now{display:grid;gap:6px;margin:0 0 14px}
.tpage .trk-now p{margin:0;font-size:16px;color:#262B33}
.tpage .trk-date{padding:12px 16px;border-radius:12px;background:#F3F4F6;margin:0 0 4px}
.tpage .trk-date small{display:block;font:600 12px/1.4 'Inter',system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em;color:#5E6570}
.tpage .trk-date strong{display:block;font:700 26px/1.15 'Inter',system-ui,sans-serif;color:#0A0B0C}
.tpage .trk-by{font-size:13px;color:#5E6570;margin:0}