/* Track an order (templates/track.html): the island's palette, a road of
   steps on the left and the parcels on the right; one column on a phone. */
:root{--tk-paper:#f4f5e9;--tk-card:#fcfdf7;--tk-ink:#17382f;--tk-ink-2:#36554a;--tk-muted:#5a6c60;
  --tk-line:#d6dfcf;--tk-cta:#1f4a3a;--tk-done:#2f7a52;--tk-now:#c77a1c;--tk-warn:#a8402c}
body.track-page{margin:0;background:var(--tk-paper);color:var(--tk-ink);font-family:Nunito,ui-sans-serif,system-ui,sans-serif}
.tk{max-width:1120px;margin:0 auto;padding:30px 24px 72px}
.tk-eyebrow{margin:0;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#647668}
.tk-head h1{margin:6px 0 0;font:700 clamp(32px,4.4vw,52px)/1.05 Fredoka,Nunito,system-ui;letter-spacing:-.025em}
.tk-lede{max-width:60ch;margin:12px 0 0;color:var(--tk-ink-2);font-size:17px;line-height:1.55;font-weight:600}

.tk-find{margin:24px 0 0;max-width:640px}
.tk-find label{display:block;font-weight:800;font-size:14px;margin-bottom:8px}
.tk-find label span{font-weight:600;color:var(--tk-muted)}
.tk-find-row{display:flex;gap:8px}
.tk-find input{flex:1;min-width:0;min-height:50px;padding:0 16px;border:1.5px solid var(--tk-line);border-radius:16px;
  background:#fff;color:var(--tk-ink);font:600 16px ui-monospace,SFMono-Regular,Consolas,monospace}
.tk-find input:focus{outline:3px solid #254f4633;border-color:var(--tk-cta)}
.tk-find button{min-height:50px;padding:0 20px;border:0;border-radius:16px;background:var(--tk-cta);color:#f4f9f1;
  font:800 15px Nunito,system-ui;cursor:pointer}
.tk-err{margin:10px 0 0;padding:10px 14px;border-radius:12px;background:#fbe6e0;color:#8c2f1e;font-weight:700}
.tk-sample{display:inline-block;margin-top:12px;color:var(--tk-cta);font-weight:800;text-underline-offset:3px}
.tk-note{margin:22px 0 0;padding:12px 16px;border-radius:14px;background:#fff4dd;color:#6a4a12;font-weight:700;max-width:640px}

.tk-summary{display:flex;flex-wrap:wrap;gap:10px 28px;margin:26px 0 0;padding:16px 20px;border-radius:20px;
  background:var(--tk-card);border:1px solid var(--tk-line)}
.tk-summary span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tk-muted)}
.tk-summary b{font:600 16px Fredoka,Nunito,system-ui}
.tk-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;margin-top:24px;align-items:start}

/* The road: dots on a line, done in green, the current step pulsing amber. */
.tk-road{list-style:none;margin:0;padding:22px 22px 6px;border-radius:24px;background:var(--tk-card);border:1px solid var(--tk-line)}
.tk-road li{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;padding-bottom:22px}
.tk-road li:not(:last-child)::before{content:"";position:absolute;left:16px;top:34px;bottom:0;width:2px;background:var(--tk-line)}
.tk-road li.is-done:not(:last-child)::before{background:var(--tk-done)}
.tk-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--tk-line);
  font:800 16px Fredoka,system-ui;color:#fff}
.tk-dot svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.is-done .tk-dot{background:var(--tk-done);border-color:var(--tk-done)}
.is-current .tk-dot{border-color:var(--tk-now);box-shadow:0 0 0 6px #c77a1c22;position:relative}
.is-current .tk-dot::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--tk-now);animation:tk-pulse 1.8s ease-in-out infinite}
.is-problem .tk-dot{background:var(--tk-warn);border-color:var(--tk-warn)}
@keyframes tk-pulse{50%{opacity:.35}}
.tk-step-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:5px}
.tk-step-head b{font:600 18px Fredoka,Nunito,system-ui}
.tk-step-head time{font-size:13px;font-weight:800;color:var(--tk-muted);white-space:nowrap}
.tk-step p{margin:4px 0 0;color:var(--tk-ink-2);font-size:14.5px;line-height:1.55;font-weight:600}
.is-upcoming .tk-step{opacity:.62}

.tk-side{display:grid;gap:14px}
.tk-parcel{padding:16px 18px;border-radius:22px;background:var(--tk-card);border:1px solid var(--tk-line)}
.tk-parcel-head{display:flex;gap:12px;align-items:center}
.tk-parcel-head img,.tk-box{width:64px;height:64px;flex:none;border-radius:14px;object-fit:cover;background:#e8efdf}
.tk-box{display:grid;place-items:center}
.tk-box svg{width:30px;height:30px;fill:none;stroke:#4d6b5c;stroke-width:1.6;stroke-linejoin:round}
.tk-parcel-head b{display:block;font:600 16px/1.25 Fredoka,Nunito,system-ui}
.tk-parcel-head span{display:block;font-size:13px;color:var(--tk-muted);font-weight:700}
.tk-chip{display:inline-block!important;margin-top:6px;padding:3px 10px;border-radius:99px;background:#e8efdf;color:#264c3b!important;font-size:12px!important}
.is-sent .tk-chip{background:#d9efdf;color:#1d5a37!important}
.is-refunding .tk-chip,.is-refunded .tk-chip{background:#fbe6e0;color:#8c2f1e!important}
.tk-track{display:grid;gap:10px;margin-top:14px;padding-top:14px;border-top:1px dashed var(--tk-line)}
.tk-track span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tk-muted)}
.tk-track b{font-size:15px}
.tk-number{position:relative}
.tk-number code{display:block;margin-top:2px;padding-right:70px;font:700 15px ui-monospace,SFMono-Regular,Consolas,monospace;word-break:break-all}
.tk-copy{position:absolute;right:0;bottom:-4px;min-height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--tk-line);
  background:#fff;color:var(--tk-ink);font:800 13px Nunito,system-ui;cursor:pointer}
.tk-follow{display:inline-flex;justify-content:center;align-items:center;gap:6px;min-height:46px;padding:0 16px;border-radius:14px;
  background:var(--tk-cta);color:#f4f9f1;font-weight:800;text-decoration:none}
.tk-follow.is-sample{opacity:.55}
.tk-sample-note{color:var(--tk-muted);font-weight:700;font-size:12.5px}
.tk-wait{margin:12px 0 0;color:var(--tk-ink-2);font-size:14px;line-height:1.5;font-weight:600}
.tk-eta{margin:10px 0 0;font-size:14px;color:var(--tk-muted);font-weight:700}
.tk-eta b{color:var(--tk-ink)}
.tk-help{padding:16px 18px;border-radius:22px;background:#eaf0e1}
.tk-help h2{margin:0 0 8px;font:600 18px Fredoka,Nunito,system-ui}
.tk-help ul{margin:0;padding-left:18px;display:grid;gap:8px;color:var(--tk-ink-2);font-size:14px;line-height:1.5;font-weight:600}
.tk-help a{color:var(--tk-cta);font-weight:800;text-underline-offset:3px}
.tk :is(a,button,input):focus-visible{outline:3px solid #254f46;outline-offset:3px}

@media (max-width:820px){
  .tk{padding:22px 16px 56px}
  .tk-grid{grid-template-columns:1fr}
  .tk-find-row{flex-direction:column}
  .tk-road{padding:18px 16px 4px}
}
@media (prefers-reduced-motion:reduce){.is-current .tk-dot::after{animation:none}}