/* ChaiBD order tracking: the live map hero (public/js/chai-track.js, MapLibre GL in /vendor/maplibre). */
@keyframes tk-live { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes tk-ring { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes tk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes tk-fresh { 0% { background: color-mix(in srgb, var(--red) 18%, transparent); } 100% { background: transparent; } }
.tk-hero:not(.no-map) { display: block; padding: 0; color: var(--ink); background: var(--card); border: 1px solid var(--card-b); box-shadow: 0 30px 60px -40px rgba(0,0,0,.45); }
.tk-hero:not(.no-map)::before { display: none; }
.tk-map { position: relative; height: 430px; overflow: hidden; background: radial-gradient(120% 100% at 70% 0%, color-mix(in srgb, var(--red) 25%, #0b1020), #070a14); }
.tk-map .tk-map-c { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.tk-map.live .tk-map-c { opacity: 1; }
.tk-map-fb { position: absolute; inset: 0; display: grid; place-items: center; padding: 70px 24px 120px; color: #fff; transition: opacity .6s; }
.tk-map.live .tk-map-fb { opacity: 0; pointer-events: none; }
.tk-map-fb .tk-route { max-width: 420px; } .tk-map-fb .tk-mover circle { fill: var(--red); stroke: #fff; } .tk-map-fb .tk-mover-i path { fill: #fff; }
.tk-map-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.28), transparent 22%, transparent 70%, color-mix(in srgb, var(--card) 70%, transparent)); }
.tk-map-cr { position: absolute; z-index: 2; right: 10px; bottom: 6px; font-size: 9.5px; color: #374151; text-decoration: none; background: rgba(255,255,255,.7); padding: 1px 6px; border-radius: 6px; opacity: 0; transition: opacity .6s; }
.tk-map.live .tk-map-cr { opacity: 1; }
@media (max-width: 1099px) { .tk-map-cr { bottom: 140px; left: 12px; right: auto; } }
.tk-hero:not(.no-map) .tk-hero-top { position: absolute; z-index: 3; top: 12px; left: 12px; right: 12px; }
.tk-hero:not(.no-map) .tk-back, .tk-hero:not(.no-map) .tk-inv { color: #fff; background: rgba(12,14,24,.74);  -webkit-  box-shadow: 0 6px 18px -8px rgba(0,0,0,.5); }
.tk-live { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; margin-left: 8px; padding: 6px 11px; border-radius: 99px; font: 800 11.5px Poppins, sans-serif; letter-spacing: .06em; color: #fff; background: rgba(12,14,24,.74);  -webkit-  }
.tk-live i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.3); animation: tk-live 1.4s ease-in-out infinite; }
.tk-live small { font: 600 11px "Hind Siliguri", sans-serif; letter-spacing: 0; opacity: .8; }
.tk-map-ctl { position: absolute; z-index: 3; right: 12px; top: 64px; display: grid; gap: 8px; }
.tk-map-ctl button { width: 40px; height: 40px; border-radius: 13px; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: var(--card);  -webkit-  box-shadow: 0 8px 20px -10px rgba(0,0,0,.45); font: 800 12px Poppins, sans-serif; transition: transform .2s; }
.tk-map-ctl button:active { transform: scale(.9); } .tk-map-ctl button svg { width: 20px; height: 20px; } .tk-map-ctl button.on { color: var(--red); }
.tk-glass { position: relative; z-index: 2; display: grid; gap: 12px; margin: -96px 10px 10px; padding: 16px; border-radius: 22px; background: var(--card);  -webkit-  border: 1px solid color-mix(in srgb, #fff 40%, transparent); box-shadow: 0 20px 44px -24px rgba(0,0,0,.5); animation: tk-in .6s .2s cubic-bezier(.2,.8,.2,1) both; }
.no-map .tk-glass { display: contents; }
.tk-hero:not(.no-map) .tk-hero-t h1 { color: var(--red); font-size: 22px; }
.tk-hero.tone-ok:not(.no-map) .tk-hero-t h1 { color: #15803d; }
.tk-where { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 5px 0 0 !important; font-size: 13.5px !important; color: var(--ink) !important; opacity: 1 !important; }
.tk-where svg { width: 16px; height: 16px; color: var(--red); flex: none; } .tk-where em { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.tk-where em::before { content: "·"; margin-right: 6px; }
.tk-eta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--red) 10%, transparent), color-mix(in srgb, var(--amber, #f2b705) 12%, transparent)); }
.tk-eta > span { display: grid; font-size: 12.5px; font-weight: 700; color: var(--ink); } .tk-eta > span small { font-weight: 500; color: var(--ink-soft); font-size: 11.5px; }
.tk-eta-c { display: flex; align-items: baseline; gap: 3px; font-variant-numeric: tabular-nums; }
.tk-eta-c b { font: 800 19px Poppins, sans-serif; color: var(--red); min-width: 1.3em; text-align: right; } .tk-eta-c small { font-size: 10.5px; color: var(--ink-soft); margin-right: 5px; }
.tk-hero:not(.no-map) .tk-stages-line { background: color-mix(in srgb, var(--ink) 10%, transparent); top: 18px; }
.tk-hero:not(.no-map) .tk-stages-line i { background: linear-gradient(90deg, #f59e0b, var(--red)); }
.tk-hero:not(.no-map) .tk-stage span { width: 34px; height: 34px; color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 7%, var(--card)); }
.tk-hero:not(.no-map) .tk-stage.st-done span { color: #fff; background: var(--red); }
.tk-hero.tone-ok:not(.no-map) .tk-stage.st-done span { background: #16a34a; }
.tk-hero:not(.no-map) .tk-stage.st-now span { color: #fff; background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 22%, transparent); }
.tk-hero:not(.no-map) .tk-stage small { color: var(--ink); }

/* map markers */
.tk-stop { display: flex; align-items: center; gap: 6px; pointer-events: none; }
.tk-stop i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid #9ca3af; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
.tk-stop.ok i { background: #16a34a; border-color: #fff; } .tk-stop i svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tk-stop.home i { width: 26px; height: 26px; background: var(--red); border-color: #fff; } .tk-stop.home i svg { width: 14px; height: 14px; stroke-width: 2.4; }
.tk-stop span { padding: 3px 8px; border-radius: 8px; font: 700 11px "Hind Siliguri", Poppins, sans-serif; color: #111; background: rgba(255,255,255,.92); box-shadow: 0 3px 10px rgba(0,0,0,.18); white-space: nowrap; }
.tk-stop.here span { display: none; }
[data-theme="dark"] .tk-stop span { color: #f3f4f6; background: rgba(17,24,39,.9); }
.tk-parcel { position: relative; width: 52px; height: 52px; display: grid; place-items: center; }
.tk-parcel-ring { position: absolute; inset: 0; border-radius: 50%; background: color-mix(in srgb, var(--red) 40%, transparent); animation: tk-ring 2s ease-out infinite; }
.tk-parcel-ring.r2 { animation-delay: 1s; }
.tk-parcel-i { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--red) 70%, #ff8a3d), var(--red)); border: 3px solid #fff; box-shadow: 0 10px 24px -6px var(--red); animation: tk-bob 2.2s ease-in-out infinite; }
.tk-parcel-i svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s; }
.tk-parcel.s3 .tk-parcel-i svg { fill: currentColor; stroke: none; }
.tk-parcel.s7 .tk-parcel-i { background: linear-gradient(145deg, #4ade80, #16a34a); box-shadow: 0 10px 24px -6px #16a34a; } .tk-parcel.s7 .tk-parcel-ring { background: rgba(34,197,94,.4); }
.tk-parcel em { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); padding: 3px 9px; border-radius: 99px; font: 700 11px "Hind Siliguri", sans-serif; font-style: normal; color: #fff; background: #111827; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.3); }
.tk-parcel em::after { content: ""; position: absolute; left: 50%; bottom: -4px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: #111827; }

/* the log: places and the newest update */
.tk-log-pl { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 2px 9px 2px 6px; border-radius: 99px; font-size: 12px; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--red) 8%, transparent); }
.tk-log-pl svg { width: 13px; height: 13px; color: var(--red); }
.tk-log li.fresh > div { animation: tk-fresh 2.4s ease; border-radius: 10px; }

@media (min-width: 1100px) {
  .tk-hero:not(.no-map) { min-height: 620px; }
  .tk-hero:not(.no-map) .tk-map { position: absolute; inset: 0; height: auto; }
  .tk-hero:not(.no-map) .tk-map-shade { background: linear-gradient(90deg, color-mix(in srgb, var(--card) 55%, transparent), transparent 45%), linear-gradient(180deg, rgba(0,0,0,.22), transparent 20%); }
  .tk-hero:not(.no-map) .tk-glass { position: absolute; left: 24px; bottom: 24px; width: 410px; margin: 0; padding: 20px; }
  .tk-hero:not(.no-map) .tk-hero-t h1 { font-size: 26px; }
  .tk-hero:not(.no-map) .tk-stages { grid-column: auto; max-width: none; }
  .tk-map-ctl { top: auto; bottom: 24px; right: 24px; grid-auto-flow: column; }
}
@media (max-width: 620px) {
  .tk-hero:not(.no-map) { margin: 0 -6px; border-radius: 24px; }
  .tk-map { height: 470px; }
  .tk-glass { margin: -100px 8px 8px; padding: 14px; }
  .tk-hero:not(.no-map) .tk-hero-t h1 { font-size: 20px; }
  .tk-eta-c b { font-size: 17px; } .tk-eta > span { font-size: 12px; }
  .tk-live small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tk-parcel *, .tk-live i { animation: none !important; } }

/* ---- live feel: a big map, the HUD, update banner, live feed, the parcel's shadow ---- */
@keyframes tk-sync { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
@keyframes tk-drop { from { transform: translate(-50%, -140%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
@keyframes tk-dot { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
@keyframes tk-sway { 0%, 100% { translate: 0 0; } 25% { translate: 0 -1.5px; } 75% { translate: 0 1px; } }
.tk-map { height: clamp(460px, calc(100svh - 190px), 680px); }
.tk-hud { position: absolute; z-index: 3; left: 12px; top: 62px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 80px); pointer-events: none; }
.tk-hud[hidden], .tk-hud span[hidden] { display: none; }
.tk-hud span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(12,14,24,.76);  -webkit-  box-shadow: 0 6px 16px -8px rgba(0,0,0,.5); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tk-hud span b { font: 800 13.5px Poppins, sans-serif; }
.tk-hud svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk-hud [data-hud="mode"] { background: linear-gradient(135deg, color-mix(in srgb, var(--red) 85%, #ff8a3d), var(--red)); }
.tk-banner { position: absolute; z-index: 4; left: 50%; top: 58px; transform: translate(-50%, 0); display: flex; align-items: center; gap: 10px; width: min(92%, 420px); padding: 11px 14px; border-radius: 16px; color: var(--ink); background: var(--card); box-shadow: 0 18px 40px -16px rgba(0,0,0,.55); border-left: 4px solid var(--red); opacity: 0; transition: opacity .35s; }
.tk-banner.in { animation: tk-drop .55s cubic-bezier(.2,1.2,.3,1) both; opacity: 1; }
.tk-banner i { font-style: normal; font-size: 22px; } .tk-banner span { display: grid; font-size: 13px; line-height: 1.35; } .tk-banner b { color: var(--red); font-size: 13.5px; }
.tk-live.sync i { animation: tk-live 1.4s ease-in-out infinite, tk-dot .5s ease; }
.tk-live::after { content: ""; width: 11px; height: 11px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; opacity: 0; }
.tk-live.sync::after { animation: tk-sync .7s linear; opacity: 1; transition: opacity .3s .7s; }
.tk-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tk-feed li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; color: var(--ink-soft); }
.tk-feed li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk-feed time { font-size: 11px; }
.tk-feed li i { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 25%, transparent); }
.tk-feed li.new { color: var(--ink); font-weight: 600; } .tk-feed li.new i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); animation: tk-live 1.4s ease-in-out infinite; }
.tk-pshadow { width: 30px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.35), transparent); }
.tk-pshadow.air { width: 26px; height: 10px; background: radial-gradient(closest-side, rgba(0,0,0,.22), transparent); }
.tk-parcel { pointer-events: none; }
.tk-parcel.moving .tk-parcel-i { animation: tk-sway .9s ease-in-out infinite; }
.tk-parcel.k-plane .tk-parcel-i { animation: tk-bob 3s ease-in-out infinite; }
.tk-parcel.k-plane .tk-parcel-i svg { fill: currentColor; stroke: none; }
.tk-parcel-i svg { transition: none; }
.tk-parcel.moving em { background: var(--red); } .tk-parcel.moving em::after { border-top-color: var(--red); }
@media (max-width: 1099px) {
  .tk-hero:not(.no-map) { overflow: hidden; }
  .tk-hero:not(.no-map) .tk-glass { margin: -130px 0 0; border-radius: 26px 26px 22px 22px; padding-top: 22px; }
  .tk-hero:not(.no-map) .tk-glass::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 20%, transparent); }
  .tk-map-ctl { top: 104px; bottom: auto; }
}
@media (max-width: 620px) { .tk-map { height: clamp(440px, calc(100svh - 170px), 620px); } .tk-hud { top: 56px; } .tk-hud span { font-size: 11.5px; padding: 5px 9px; } }
@media (min-width: 1100px) { .tk-hud { left: auto; right: 24px; top: 70px; justify-content: flex-end; max-width: 60%; } .tk-banner { top: 70px; } }
/* the lights running from the parcel to the customer's door */
.tk-run { width: 18px; height: 18px; pointer-events: none; }
.tk-run b { display: block; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #fff 0 3px, var(--red) 3.5px 5px, color-mix(in srgb, var(--red) 35%, transparent) 5.5px, transparent 9px); will-change: transform, opacity; }
.tk-map.far .tk-stop:not(.home) span { display: none; }
.tk-stop { z-index: 1; } .tk-run { z-index: 2; } .tk-pshadow { z-index: 3; } .tk-parcel { z-index: 5; }
/* the markers that move every frame sit on their own layers; nothing above the map blurs (a blur over a live map is
   worked out again on every frame, the main cause of lag on phones) */
.tk-parcel, .tk-pshadow, .tk-run { will-change: transform; contain: layout style; }
.tk-parcel-i, .tk-parcel-ring { will-change: transform; }
.tk-map { contain: layout paint; }
@media (max-width: 1099px) { .tk-parcel-ring.r2 { display: none; } }

/* ---- easy to use: map buttons, full screen ---- */
.tk-map-ctl { gap: 8px; }
.tk-map-ctl button { width: 42px; height: 42px; touch-action: manipulation; }
.tk-zoom { display: grid; border-radius: 13px; overflow: hidden; box-shadow: 0 8px 20px -10px rgba(0,0,0,.45); }
.tk-zoom button { border-radius: 0 !important; box-shadow: none !important; font: 500 24px/1 Poppins, sans-serif !important; }
.tk-zoom button + button { border-top: 1px solid var(--card-b) !important; }
.tk-map-ctl .tk-full-b { color: #fff; background: var(--red); }
.tk-map-c canvas { touch-action: none; }
@media (max-width: 1099px) {
  .tk-map { height: clamp(400px, 64svh, 580px); }
  .tk-map-ctl { top: 58px; }
}
@media (max-width: 620px) { .tk-map { height: clamp(380px, 62svh, 560px); } }
@media (min-width: 1100px) { .tk-map-ctl { grid-auto-flow: row; top: 70px; bottom: auto; right: 20px; } .tk-hud { right: 76px; } }
/* full screen */
.tk-hero.tk-full { position: fixed !important; inset: 0; z-index: 2000; margin: 0 !important; border-radius: 0 !important; border: 0; min-height: 0; }
.tk-hero.tk-full .tk-map { position: absolute !important; inset: 0; height: auto !important; }
.tk-hero.tk-full .tk-hero-top { top: calc(12px + env(safe-area-inset-top)); }
.tk-hero.tk-full .tk-glass { position: absolute; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; max-width: 440px; margin: 0; padding: 14px; gap: 8px; border-radius: 20px; }
.tk-hero.tk-full .tk-glass::before, .tk-hero.tk-full .tk-feed, .tk-hero.tk-full .tk-stages { display: none; }
.tk-hero.tk-full .tk-map-cr { bottom: 6px; top: auto; right: 10px; left: auto; }
@media (max-width: 1099px) { .tk-hero.tk-full .tk-map-ctl { top: calc(60px + env(safe-area-inset-top)); } }
html.tk-lock body { overflow: hidden; }

/* ---- plane vapour, ship wake, ship, landed ---- */
.tk-trail { width: 16px; height: 16px; pointer-events: none; z-index: 4; }
.tk-trail b { display: block; width: 16px; height: 16px; border-radius: 50%; will-change: transform, opacity; }
.tk-trail.vapour b { background: radial-gradient(circle, rgba(255,255,255,.95) 0 3px, rgba(255,255,255,.55) 4px, transparent 8px); filter: drop-shadow(0 0 2px rgba(0,0,0,.25)); }
.tk-trail.wake b { background: radial-gradient(circle, rgba(255,255,255,.9) 0 2px, rgba(186,230,253,.7) 3.5px, rgba(14,165,233,.25) 6px, transparent 8px); }
.tk-trail { will-change: transform; }
.tk-parcel.k-ship .tk-parcel-i { background: linear-gradient(145deg, #38bdf8, #0369a1); box-shadow: 0 10px 24px -6px #0369a1; animation: tk-rock 3.2s ease-in-out infinite; }
.tk-parcel.k-ship .tk-parcel-ring { background: rgba(14,165,233,.35); }
.tk-parcel.k-ship.moving em { background: #0369a1; } .tk-parcel.k-ship.moving em::after { border-top-color: #0369a1; }
@keyframes tk-rock { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-2px); } }
.tk-parcel.landed .tk-parcel-i { animation: none; background: linear-gradient(145deg, #4ade80, #15803d); box-shadow: 0 10px 24px -6px #15803d; }
.tk-parcel.landed .tk-parcel-ring { background: rgba(34,197,94,.35); }
.tk-parcel.landed em { background: #15803d; } .tk-parcel.landed em::after { border-top-color: #15803d; }
.tk-parcel.k-plane.landed .tk-parcel-i svg { fill: currentColor; stroke: none; }
.tk-hud [data-hud="mode"] svg { flex: none; }

/* ---- phones: a clean map. Only full screen and "parcel" buttons, one HUD line, icon-only back, no stop names
   but home (all of it comes back in full screen) ---- */
@media (max-width: 720px) {
  .tk-hero:not(.tk-full) .tk-map-ctl .tk-zoom, .tk-hero:not(.tk-full) .tk-map-ctl [data-cam="route"], .tk-hero:not(.tk-full) .tk-map-ctl [data-cam="tilt"] { display: none; }
  .tk-hero:not(.tk-full) .tk-hud [data-hud="speed"] { display: none; }
  .tk-hero:not(.tk-full) .tk-stop:not(.home) span { display: none; }
  .tk-hero:not(.no-map) .tk-back { padding: 8px; } .tk-hero:not(.no-map) .tk-back span { display: none; }
  .tk-hero:not(.no-map) .tk-inv { padding: 6px 9px 6px 11px; font-size: 12px; }
  .tk-live { padding: 5px 9px; font-size: 10.5px; }
  .tk-hud { top: 54px; left: 10px; } .tk-hud span { padding: 4px 8px; font-size: 11px; border-radius: 10px; } .tk-hud span b { font-size: 12.5px; }
  .tk-map-ctl { top: 54px; right: 10px; gap: 6px; } .tk-map-ctl button { width: 38px; height: 38px; border-radius: 12px; }
  .tk-map-cr { font-size: 8px; opacity: .55 !important; padding: 0 4px; }
  .tk-stop span { font-size: 10px; padding: 2px 6px; }
  .tk-parcel em { font-size: 10px; top: -22px; padding: 2px 7px; }
  .tk-parcel { width: 44px; height: 44px; } .tk-parcel-i { width: 36px; height: 36px; } .tk-parcel-i svg { width: 18px; height: 18px; }
}

/* ---- no dark loading screen: a light map ground that matches the map, the map fades in over it ---- */
.tk-map { background: #eef1f5; }
[data-theme="dark"] .tk-map { background: #151a24; }
.tk-map-shade { display: none; }
.tk-map .tk-map-c { transition: opacity .6s ease, filter .7s ease, transform .7s ease; }
/* the loading shine moves by transform (no repaint of the map under it each frame) */
.tk-map:not(.live):not(.nogl)::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 220%; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); animation: tk-shine-x 1.4s linear infinite; will-change: transform; }
@keyframes tk-shine-x { from { transform: translateX(-55%); } to { transform: translateX(10%); } }
[data-theme="dark"] .tk-map:not(.live):not(.nogl)::before { background-image: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%); }
.tk-map.nogl { background: radial-gradient(120% 100% at 70% 0%, color-mix(in srgb, var(--red) 25%, #0b1020), #070a14); }

/* ---- find an order: the map, blurred, under one box ---- */
.tk-find { position: relative; display: block; max-width: none; margin: 0; height: clamp(540px, calc(100svh - 150px), 720px); border-radius: 26px; overflow: hidden; border: 1px solid var(--card-b); box-shadow: 0 30px 60px -40px rgba(0,0,0,.45); }
.tk-find .tk-map { position: absolute !important; inset: 0; height: auto !important; }
.tk-map.blur .tk-map-c { filter: blur(5px) saturate(1.15); transform: scale(1.06); pointer-events: none; }
.tk-map.blur .tk-hud, .tk-map.blur .tk-banner, .tk-map.blur .maplibregl-marker { display: none !important; }
.tk-pop { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow: auto; overscroll-behavior: contain;
  display: grid; gap: 10px; padding: 24px 20px 18px; border-radius: 26px; text-align: center; background: color-mix(in srgb, var(--card) 94%, transparent); border: 1px solid color-mix(in srgb, #fff 50%, transparent);
  box-shadow: 0 30px 70px -24px rgba(0,0,0,.45); animation: tk-popin .5s cubic-bezier(.2,1.1,.3,1) both; }
@keyframes tk-popin { from { opacity: 0; transform: translate(-50%, -44%) scale(.96); } }
.tk-pop.out { opacity: 0; transform: translate(-50%, -50%) scale(.96); transition: opacity .3s, transform .3s; }
.tk-pop-ic { justify-self: center; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--red) 75%, #ff8a3d), var(--red)); box-shadow: 0 14px 26px -14px var(--red); }
.tk-pop-ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.tk-pop h1 { margin: 4px 0 0; font-size: 23px; line-height: 1.25; }
.tk-pop > p { margin: 0; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }
.tk-pop .tk-form { padding: 0; border: 0; background: none; animation: none; gap: 8px; margin-top: 4px; }
.tk-pop .tk-in { height: 54px; } .tk-pop .tk-in input { font-size: 16px; }
.tk-pop .tk-go { height: 52px; }
.tk-pop .tk-mine, .tk-pop .tk-recent, .tk-pop .tk-pick { text-align: left; }
.tk-pop .tk-pick h3, .tk-pop .tk-mine h3, .tk-pop .tk-recent h3 { margin: 6px 2px 6px; font-size: 13px; color: var(--ink-soft); font-weight: 600; }
.tk-pop .tk-chip { padding: 8px 10px; border-radius: 15px; } .tk-pop .tk-chip img, .tk-pop .tk-chip-i { width: 40px; height: 40px; }
@media (max-width: 620px) { .tk-find { height: calc(100svh - 160px); min-height: 520px; margin: 0 -6px; border-radius: 22px; } .tk-pop { padding: 20px 16px 14px; } .tk-pop h1 { font-size: 21px; } }

/* ---- an order opened with one detail: personal details hidden, add the mobile number to see them ---- */
.tk-lim .tk-ic { color: #b45309; background: color-mix(in srgb, #f59e0b 14%, var(--card)); }
.tk-unlock { display: flex; gap: 6px; margin-top: 8px; }
.tk-unlock input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--card-b); background: var(--card); color: var(--ink); font: inherit; font-size: 14px; outline: none; }
.tk-unlock input:focus { border-color: var(--red); }
.tk-unlock button { flex: none; height: 40px; padding: 0 16px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; color: #fff; background: var(--red); cursor: pointer; }
.tk-unlock.bad input { border-color: #e11d48; animation: tk-shake .4s; }

/* ---- find view: the map stays sharp (and can be moved); the box is a small frosted glass card over it ---- */
.tk-map.blur .tk-map-c { filter: none; transform: none; pointer-events: auto; }
.tk-pop { width: min(330px, calc(100% - 32px)); gap: 7px; padding: 16px 14px 12px; border-radius: 22px;
  background: color-mix(in srgb, var(--card) 52%, transparent); backdrop-filter: blur(16px) saturate(1.7); -webkit-backdrop-filter: blur(16px) saturate(1.7);
  border: 1px solid color-mix(in srgb, #fff 55%, transparent); box-shadow: 0 22px 50px -22px rgba(0,0,0,.45); }
[data-theme="dark"] .tk-pop { background: rgba(17,22,32,.55); border-color: rgba(255,255,255,.12); }
.tk-pop-ic { width: 42px; height: 42px; border-radius: 13px; } .tk-pop-ic svg { width: 21px; height: 21px; }
.tk-pop h1 { font-size: 18px; margin: 2px 0 0; } .tk-pop > p { font-size: 12px; }
.tk-pop .tk-form { gap: 7px; margin-top: 2px; }
.tk-pop .tk-in { height: 44px; border-radius: 13px; padding: 0 12px; background: color-mix(in srgb, var(--card) 80%, transparent); }
.tk-pop .tk-in input { font-size: 15px; } .tk-pop .tk-in > svg { width: 18px; height: 18px; }
.tk-pop .tk-go { height: 44px; border-radius: 13px; font-size: 15px; }
.tk-pop .tk-chip { padding: 6px 8px; gap: 9px; border-radius: 13px; background: color-mix(in srgb, var(--card) 82%, transparent); }
.tk-pop .tk-chip img, .tk-pop .tk-chip-i { width: 34px; height: 34px; border-radius: 9px; }
.tk-pop .tk-chip-t b { font-size: 13px; } .tk-pop .tk-chip-r small { font-size: 12px; }
.tk-pop .tk-pick h3, .tk-pop .tk-mine h3, .tk-pop .tk-recent h3 { margin: 4px 2px; font-size: 12px; }
.tk-pop .tk-mine-l { gap: 6px; }
@media (max-width: 620px) { .tk-pop { width: min(310px, calc(100% - 28px)); padding: 14px 12px 10px; } .tk-pop h1 { font-size: 17px; } }
.tk-pop .tk-pick .tk-mine-l { max-height: 186px; overflow: auto; overscroll-behavior: contain; padding-right: 2px; }
@media (max-width: 620px) { .tk-pop { width: min(296px, calc(100% - 28px)); } }

/* ---- the search box: real glass with depth. It tilts toward the pointer on computers and floats gently on phones;
   the icon, title and field sit at different depths. Only transforms move, so it stays light. ---- */
@property --rx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ry { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes tk-float { 0%, 100% { --rx: 3deg; --ry: -4deg; } 50% { --rx: -3deg; --ry: 4deg; } }
.tk-find { perspective: 1100px; }
.tk-pop { overflow: visible; transform-style: preserve-3d; --mx: 30%; --my: 0%;
  transform: translate(-50%, -50%) rotateX(var(--rx)) rotateY(var(--ry));
  background: linear-gradient(135deg, rgba(255,255,255,.46), rgba(255,255,255,.14) 55%, rgba(255,255,255,.26));
  backdrop-filter: blur(18px) saturate(1.8); -webkit-backdrop-filter: blur(18px) saturate(1.8);
  border: 1px solid rgba(255,255,255,.65);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.25), inset 0 0 30px rgba(255,255,255,.12),
    0 2px 0 rgba(0,0,0,.04), 0 30px 60px -24px rgba(0,0,0,.5), 0 12px 24px -16px rgba(0,0,0,.3);
  animation: tk-popin .55s cubic-bezier(.2,1.1,.3,1) both, tk-float 7s ease-in-out .6s infinite; }
.tk-pop.tilt { animation: none; transition: --rx .15s ease-out, --ry .15s ease-out; }
.tk-pop.rest { transition: --rx .6s ease, --ry .6s ease; }
/* light sliding across the glass */
.tk-pop::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 60%); mix-blend-mode: soft-light; }
.tk-pop::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -18px; height: 26px; border-radius: 50%; background: rgba(0,0,0,.28); filter: blur(14px); transform: translateZ(-40px); pointer-events: none; }
.tk-pop > * { transform-style: preserve-3d; }
.tk-pop-ic { transform: translateZ(46px); box-shadow: 0 18px 28px -14px var(--red), inset 0 1px 0 rgba(255,255,255,.45); }
.tk-pop h1 { transform: translateZ(30px); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.tk-pop > p { transform: translateZ(20px); }
.tk-pop .tk-form { transform: translateZ(26px); }
.tk-pop .tk-in { background: rgba(255,255,255,.55); box-shadow: inset 0 2px 6px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.8); border-color: rgba(255,255,255,.6); }
.tk-pop .tk-go { box-shadow: 0 6px 0 color-mix(in srgb, var(--red) 70%, #000), 0 14px 22px -10px var(--red); transform: translateY(-2px); transition: transform .15s, box-shadow .15s; }
.tk-pop .tk-go:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--red) 70%, #000), 0 6px 12px -8px var(--red); }
.tk-pop .tk-pick, .tk-pop .tk-mine { transform: translateZ(14px); }
.tk-pop .tk-chip { background: rgba(255,255,255,.55); border-color: rgba(255,255,255,.6); }
[data-theme="dark"] .tk-pop { background: linear-gradient(135deg, rgba(40,46,60,.62), rgba(17,22,32,.42) 55%, rgba(30,36,50,.55)); border-color: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 30px 60px -24px rgba(0,0,0,.7); }
[data-theme="dark"] .tk-pop::before { background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255,255,255,.14), transparent 60%); mix-blend-mode: normal; }
[data-theme="dark"] .tk-pop .tk-in, [data-theme="dark"] .tk-pop .tk-chip { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
[data-theme="dark"] .tk-pop h1 { text-shadow: none; }
.tk-pop.out { animation: none; }
@media (prefers-reduced-motion: reduce) { .tk-pop { animation: tk-popin .3s both; } }

/* ---- clearer glass (less blur, more see-through), a glass Track button, and the login card's tilt: the box
   leans a little toward the pointer while it is over the box, with a glare; flat while typing ---- */
.tk-pop { animation: tk-popin .55s cubic-bezier(.2,1.1,.3,1) both; transition: --rx .25s ease-out, --ry .25s ease-out;
  background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.06) 55%, rgba(255,255,255,.16));
  backdrop-filter: blur(6px) saturate(1.5); -webkit-backdrop-filter: blur(6px) saturate(1.5); border-color: rgba(255,255,255,.7); }
.tk-pop.tilt, .tk-pop.rest { animation: tk-popin .55s cubic-bezier(.2,1.1,.3,1) both; transition: --rx .25s ease-out, --ry .25s ease-out; }
.tk-pop::before { background: radial-gradient(280px circle at var(--mx) var(--my), rgba(255,255,255,.5), transparent 60%); }
.tk-pop .tk-in { background: rgba(255,255,255,.4); }
.tk-pop .tk-chip { background: rgba(255,255,255,.42); }
[data-theme="dark"] .tk-pop { background: linear-gradient(135deg, rgba(40,46,60,.45), rgba(17,22,32,.22) 55%, rgba(30,36,50,.35)); }
.tk-pop .tk-go { color: #fff; border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(180deg, color-mix(in srgb, var(--red) 55%, rgba(255,255,255,.45)) 0%, color-mix(in srgb, var(--red) 72%, transparent) 48%, color-mix(in srgb, var(--red) 88%, transparent) 100%);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 6px rgba(0,0,0,.12), 0 10px 22px -12px var(--red); transform: none; text-shadow: 0 1px 1px rgba(0,0,0,.2); }
.tk-pop .tk-go::after { background: linear-gradient(180deg, rgba(255,255,255,.35), transparent 50%); animation: none; transform: none; border-radius: inherit; }
.tk-pop .tk-go:hover { filter: brightness(1.06); }
.tk-pop .tk-go:active { transform: scale(.97); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 2px 8px rgba(0,0,0,.18), 0 6px 12px -10px var(--red); }

/* ---- the Track button: the site's main button look (like checkout's Place order): a bright red-to-orange pill,
   a light sweeping across now and then, an arrow that steps forward on hover, a press that springs back ---- */
@keyframes tk-btn-sweep { 0%, 62% { transform: translateX(-120%) skewX(-20deg); } 100% { transform: translateX(260%) skewX(-20deg); } }
.tk-pop .tk-go { position: relative; overflow: hidden; height: 46px; border: 0; border-radius: 999px; gap: 8px; color: #fff; font-weight: 700; font-size: 15.5px; letter-spacing: .01em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--red) 78%, #ff8a3d) 0%, var(--red) 55%, color-mix(in srgb, var(--red) 85%, #000) 100%);
  backdrop-filter: none; -webkit-backdrop-filter: none; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 24px -12px var(--red), 0 2px 6px -2px rgba(0,0,0,.25);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, filter .2s; }
.tk-pop .tk-go::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: tk-btn-sweep 3.6s ease-in-out infinite; pointer-events: none; }
.tk-pop .tk-go span { position: relative; z-index: 1; }
.tk-pop .tk-go::before { content: ""; position: relative; z-index: 1; order: 2; width: 18px; height: 18px; border-radius: 0;
  background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1); animation: none; border: 0; left: auto; top: auto; }
.tk-pop .tk-go:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 16px 28px -12px var(--red), 0 2px 6px -2px rgba(0,0,0,.25); filter: saturate(1.1); }
.tk-pop .tk-go:hover::before { transform: translateX(4px); }
.tk-pop .tk-go:active { transform: scale(.96); box-shadow: inset 0 2px 6px rgba(0,0,0,.2), 0 6px 12px -10px var(--red); }
.tk-pop .tk-go.busy::before { -webkit-mask: none; mask: none; position: absolute; width: 20px; height: 20px; left: calc(50% - 10px); top: calc(50% - 10px); border-radius: 50%; background: none; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: tk-spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .tk-pop .tk-go::after { animation: none; display: none; } }

/* ---- the search field when tapped: no red frame; the glass brightens with a soft white glow, the icon turns red ---- */
.tk-pop .tk-in { border: 1.5px solid rgba(255,255,255,.6); transition: background .25s, border-color .25s, box-shadow .25s; }
.tk-pop .tk-in input { outline: none; caret-color: var(--red); }
.tk-pop .tk-in > svg { color: var(--ink-soft); transition: color .25s, transform .3s cubic-bezier(.34,1.56,.64,1); }
.tk-pop .tk-in:focus-within { border-color: rgba(255,255,255,.95); background: rgba(255,255,255,.72);
  box-shadow: 0 0 0 4px rgba(255,255,255,.35), 0 8px 22px -12px rgba(0,0,0,.35), inset 0 1px 0 #fff; }
.tk-pop .tk-in:focus-within > svg { color: var(--red); transform: scale(1.12); }
[data-theme="dark"] .tk-pop .tk-in:focus-within { border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.14); box-shadow: 0 0 0 4px rgba(255,255,255,.08), 0 8px 22px -12px rgba(0,0,0,.6); }
.tk-pop .tk-in.need { border-color: #f43f5e; box-shadow: 0 0 0 4px rgba(244,63,94,.15); }

/* ---- the field when tapped: no box at all (no frame, glow or ring). A red line grows under it from the middle
   and the icon turns red ---- */
.tk-pop .tk-in { position: relative; overflow: hidden; }
.tk-pop .tk-in, .tk-pop .tk-in:focus-within { border-color: rgba(255,255,255,.6); box-shadow: none; background: rgba(255,255,255,.4); outline: none; }
[data-theme="dark"] .tk-pop .tk-in, [data-theme="dark"] .tk-pop .tk-in:focus-within { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.08); box-shadow: none; }
.tk-pop .tk-in input, .tk-pop .tk-in input:focus, .tk-pop .tk-in input:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; background: transparent !important; }
.tk-pop .tk-in::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2.5px; border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--red), color-mix(in srgb, var(--red) 60%, #ff8a3d), var(--red), transparent);
  transform: scaleX(0); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.tk-pop .tk-in:focus-within::after { transform: scaleX(1); }
.tk-pop .tk-in.need { border-color: rgba(255,255,255,.6); box-shadow: none; }
.tk-pop .tk-in.need::after { transform: scaleX(1); background: #f43f5e; }
/* the search page's globe turns on its own and cannot be moved */
.tk-map.blur .tk-map-c { pointer-events: none; }

/* ---- computers (1100px and wider): the status panel and the map side by side, sized to the screen; nothing covers
   the map. Below 1100px (tablets and phones) the map sits on top with the status sheet under it. ---- */
@media (min-width: 1100px) {
  html.tk-page body > section:first-of-type { padding-top: 12px !important; }
  html.tk-page .crumb { margin-bottom: 10px; }
  .tk-find { height: clamp(480px, calc(100vh - 245px), 700px); }
  .tk-hero:not(.no-map):not(.tk-full) { display: grid; grid-template-columns: minmax(340px, 390px) minmax(0, 1fr); column-gap: 0; row-gap: 0; padding: 0; height: clamp(480px, calc(100vh - 245px), 700px); min-height: 0; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-map { position: relative !important; inset: auto; grid-column: 2; grid-row: 1; height: 100% !important; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-glass { position: relative; grid-column: 1; grid-row: 1; left: auto; bottom: auto; width: auto; margin: 0; border-radius: 0; border: 0; border-right: 1px solid var(--card-b);
    box-shadow: none; background: var(--card); align-content: start; overflow: auto; overscroll-behavior: contain; padding: 70px 22px 22px; gap: 14px; animation: none; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-hero-t h1 { font-size: 25px; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-hero-top { left: 16px; right: 16px; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-back, .tk-hero:not(.no-map):not(.tk-full) .tk-live { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, var(--card)); box-shadow: none; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-live small { color: var(--ink-soft); }
  .tk-hero:not(.no-map):not(.tk-full) .tk-stages { margin-top: 4px; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-feed li { font-size: 13px; }
  .tk-hero.tk-full { display: block; }
}
/* the newest updates: two under the map on phones and tablets, up to five in the computer's side panel */
/* the updates list is the order's whole story now (no separate list below): all of it on phones too */
@media (min-width: 1100px) { .tk-hero:not(.tk-full) .tk-feed { order: 9; padding-top: 12px; border-top: 1px dashed var(--card-b); } .tk-hero:not(.tk-full) .tk-feed li { padding: 3px 0; } }

/* ---- tablets and computers: full screen like the phone. The search map and the order's map run edge to edge
   under the header and down to the bottom of the screen (no side margins, no breadcrumb); --tk-top is where the
   map starts, measured by the page ---- */
@media (min-width: 721px) {
  html.tk-page .crumb { display: none; }
  html.tk-page body > section:first-of-type { padding-top: 0 !important; }
  .tk-find, .tk-hero:not(.no-map):not(.tk-full) { width: calc(100vw - var(--sbw, 0px)); max-width: none; margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2) !important; margin-right: 0 !important; border-radius: 0 !important; border-left: 0; border-right: 0; }
  .tk-find { height: calc(100svh - var(--tk-top, 160px)); min-height: 460px; }
}
@media (min-width: 721px) and (max-width: 1099px) {
  .tk-hero:not(.no-map):not(.tk-full) .tk-map { height: calc(100svh - var(--tk-top, 160px) - 150px) !important; min-height: 420px; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-glass { margin: -40px 16px 0; border-radius: 22px; }
}
@media (min-width: 1100px) {
  .tk-hero:not(.no-map):not(.tk-full) { height: calc(100svh - var(--tk-top, 160px)); min-height: 460px; grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); }
}
.tk-res > .tk-cols { margin-top: 16px; }
/* a mobile number's orders: on the way first, delivered / closed under them */
.tk-pop .tk-pick .tk-mine-l { max-height: 230px; }
.tk-grp { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; margin: 2px 0 0; padding: 5px 4px; font-size: 12px; font-weight: 700; color: var(--ink-soft);
  background: color-mix(in srgb, var(--card) 88%, transparent); border-radius: 8px; }
.tk-grp i { width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; }
.tk-grp.live { color: var(--ink); } .tk-grp.live i { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); animation: tk-live 1.4s ease-in-out infinite; }
.tk-grp em { font-style: normal; margin-left: auto; padding: 0 7px; border-radius: 99px; font-size: 11px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
/* the order lists in the box are flat (no 3D depth): inside a 3D box a scrolling list took the taps itself, so the
   orders in it could not be opened */
.tk-pop .tk-pick, .tk-pop .tk-mine, .tk-pop .tk-pick *, .tk-pop .tk-mine * { transform-style: flat; }
.tk-pop .tk-pick, .tk-pop .tk-mine { transform: none; }
.tk-pop:has(.tk-pick:not([hidden])), .tk-pop:has(.tk-mine:not([hidden])) { transform-style: flat; }
/* small phones: the countdown on one line */
@media (max-width: 400px) {
  .tk-eta { padding: 9px 10px; gap: 6px; } .tk-eta > span { font-size: 11.5px; white-space: nowrap; } .tk-eta > span small { font-size: 10.5px; }
  .tk-eta-c { gap: 2px; } .tk-eta-c b { font-size: 15px; min-width: 1.1em; } .tk-eta-c small { font-size: 9.5px; margin-right: 3px; }
}

/* tablets and computers: the order's cards in the side panel (js placeCols) — one column, quiet cards, a thin scroll bar */
@media (min-width: 1100px) { .tk-hero:not(.no-map):not(.tk-full) { grid-template-columns: minmax(380px, 440px) minmax(0, 1fr); } }
@media (min-width: 768px) {
  .tk-glass > .tk-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: none; margin: 4px 0 0; padding-top: 14px; border-top: 1px dashed var(--card-b); order: 10; }
  .tk-glass > .tk-cols .tk-main, .tk-glass > .tk-cols .tk-side { display: grid; gap: 12px; position: static; }
  .tk-glass > .tk-cols .tk-card, .tk-glass > .tk-cols .tk-pay { box-shadow: none; animation: none; background: color-mix(in srgb, var(--ink) 2.5%, var(--card)); }
  .tk-glass > .tk-cols .tk-order { padding: 14px; }
  .tk-glass > .tk-cols .tk-order .tk-items { grid-template-columns: minmax(0, 1fr); }
  .tk-glass > .tk-cols .tk-order .tk-items .tk-item:nth-child(2) { border-top: 1px solid color-mix(in srgb, var(--card-b) 80%, transparent); }
  .tk-glass > .tk-cols .tk-item { grid-template-columns: 56px minmax(0, 1fr); } .tk-glass > .tk-cols .tk-img { width: 56px; height: 56px; border-radius: 12px; }
  .tk-glass > .tk-cols .tk-acts button { padding: 10px 8px; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-glass { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 18%, transparent) transparent; }
  .tk-glass > .tk-cols .tk-feed { display: none; }
  .tk-glass > .tk-cols .tk-row span { flex: 0 1 auto; min-width: 0; } .tk-glass > .tk-cols .tk-row b { flex: none; }
  /* the panel scrolls under the "other order" bar, not behind its buttons */
  .tk-hero:not(.no-map):not(.tk-full) { background: var(--card); }
  .tk-hero:not(.no-map):not(.tk-full) .tk-glass { align-self: stretch; margin-top: 62px; height: calc(100% - 62px); padding-top: 8px; border-top: 1px solid var(--card-b); }
}

/* tablets (768–1099px): the same side panel and map as on computers, a narrower panel */
@media (min-width: 768px) and (max-width: 1099px) {
  .tk-hero:not(.no-map):not(.tk-full) { display: grid; grid-template-columns: minmax(300px, 40%) minmax(0, 1fr); gap: 0; padding: 0; height: calc(100svh - var(--tk-top, 160px)); min-height: 520px; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-map { position: relative !important; inset: auto; grid-column: 2; grid-row: 1; height: 100% !important; min-height: 0; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-glass { position: relative; grid-column: 1; grid-row: 1; left: auto; bottom: auto; width: auto; border-radius: 0; border: 0; border-right: 1px solid var(--card-b);
    box-shadow: none; background: var(--card); align-content: start; overflow: auto; overscroll-behavior: contain; padding: 8px 16px 16px; gap: 12px; animation: none; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-glass::before { display: none; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-hero-t h1 { font-size: 22px; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-back, .tk-hero:not(.no-map):not(.tk-full) .tk-live { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, var(--card)); box-shadow: none; }
  .tk-hero:not(.no-map):not(.tk-full) .tk-feed { order: 9; padding-top: 10px; border-top: 1px dashed var(--card-b); }
  .tk-hero:not(.no-map):not(.tk-full) .tk-stages { margin-top: 2px; }
  .tk-hud { left: auto; right: 72px; top: 70px; justify-content: flex-end; max-width: 50%; } .tk-banner { top: 70px; }
  .tk-map-ctl { top: 70px; bottom: auto; right: 14px; grid-auto-flow: row; }
  /* the actions are in the panel: no bar at the bottom */
  html.tk-has .tk-bar { display: none !important; } html.tk-has body { padding-bottom: 0 !important; }
  .tk-glass > .tk-cols .tk-side .tk-acts { display: grid !important; }
  .tk-glass > .tk-cols .tk-acts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tk-glass > .tk-cols .tk-a-again { grid-column: 1 / -1; }
  .tk-glass > .tk-cols .tk-acts button { font-size: 13px; padding: 10px 6px; white-space: nowrap; }
  .tk-glass > .tk-cols .tk-acts button svg { flex: none; }
  /* the phone order of the cards does not apply in the panel: bill, order, then address and actions */
  .tk-glass > .tk-cols .tk-main { order: 1; } .tk-glass > .tk-cols .tk-side { order: 2; }
  .tk-glass > .tk-cols .tk-main > *, .tk-glass > .tk-cols .tk-side > * { order: 0 !important; }
}