/* ============================================================
   Where is my order?

   The page has one job and one animation: the line between the
   steps draws from the step behind to the step reached, and each
   dot lands as the line arrives at it. Everything ahead stays
   unlit, so a glance tells you how far along the order is without
   reading a word.
   ============================================================ */

.tk{--tk-ink:#0F3325;--tk-lit:#7DB83E;--tk-dim:rgba(15,51,37,.14)}

/* ---------- The ask ---------- */
.tk-top{
  position:relative;overflow:hidden;padding-top:30px;
  background:linear-gradient(168deg,#0F3325 0%,#14402E 46%,#17503A 100%);
  color:#EAF3E4
}
.tk-top .pr-crumbs,.tk-top .pr-crumbs a{color:rgba(234,243,228,.68)}
.tk-top .pr-crumbs a:hover{color:#fff}

/* three slow lights behind it, so the panel breathes */
.tk-sky{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tk-sky i{
  position:absolute;border-radius:50%;filter:blur(46px);opacity:.5;
  background:radial-gradient(circle,rgba(143,210,106,.75),rgba(143,210,106,0) 70%);
  animation:tk-drift 17s ease-in-out infinite
}
.tk-sky i:nth-child(1){width:340px;height:340px;left:-70px;top:-110px}
.tk-sky i:nth-child(2){width:280px;height:280px;right:-60px;top:30%;animation-delay:-6s;opacity:.35}
.tk-sky i:nth-child(3){width:400px;height:400px;left:40%;bottom:-220px;animation-delay:-11s;opacity:.28}
@keyframes tk-drift{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(22px,-18px,0) scale(1.12)}
}

.tk-head{position:relative;z-index:1;max-width:44ch;margin-top:16px}
.tk-h1{color:#fff;margin:0}
.tk-lead{margin-top:12px;color:rgba(234,243,228,.82)}

.tk-form{
  position:relative;z-index:1;display:grid;grid-template-columns:1fr;gap:12px;
  margin-top:26px;padding:16px;border-radius:18px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.tk-fld{display:block}
.tk-fld>span{
  display:block;margin-bottom:6px;
  font:600 11.6px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:rgba(234,243,228,.62)
}
html[lang="bn"] .tk-fld>span{letter-spacing:0;text-transform:none;font-size:12.6px}
.tk-fld input{
  width:100%;height:52px;padding:0 15px;border-radius:12px;
  border:1.5px solid rgba(255,255,255,.18);background:rgba(8,30,22,.4);
  color:#fff;font:600 16px/1 var(--sans);
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease
}
.tk-fld input::placeholder{color:rgba(234,243,228,.35);font-weight:500}
.tk-fld input:focus{
  outline:none;border-color:var(--tk-lit);background:rgba(8,30,22,.6);
  box-shadow:0 0 0 3px rgba(125,184,62,.22)
}
.tk-go{width:100%;height:52px;background:var(--tk-lit);color:#0B2318;border:0}
.tk-go:hover{background:#8FD26A}

.tk-miss{
  position:relative;z-index:1;display:flex;align-items:center;gap:9px;
  margin:14px 0 0;padding:12px 15px;border-radius:12px;
  background:rgba(255,120,90,.16);border:1px solid rgba(255,120,90,.4);
  color:#FFD9CE;font-size:14px;
  animation:tk-shake .5s cubic-bezier(.36,.07,.19,.97)
}
.tk-miss svg{width:16px;height:16px;stroke:currentColor;fill:none;flex:none}
@keyframes tk-shake{
  10%,90%{transform:translateX(-1px)}
  20%,80%{transform:translateX(2px)}
  30%,50%,70%{transform:translateX(-4px)}
  40%,60%{transform:translateX(4px)}
}

.tk-help{position:relative;z-index:1;margin:16px 0 0;font-size:13.4px;color:rgba(234,243,228,.6)}
.tk-help a{color:#C9EDA4;text-decoration:none;border-bottom:1px solid rgba(201,237,164,.35)}
.tk-help a:hover{border-bottom-color:#C9EDA4}

/* ---------- The answer ---------- */
.tk-body{padding-top:26px;background:linear-gradient(180deg,#F7FAF4,#fff 40%)}
.tk-card{
  padding:20px 18px;border-radius:18px;background:#fff;
  border:1px solid var(--line);box-shadow:0 2px 14px rgba(15,51,37,.05);
  margin-bottom:14px;
  opacity:0;transform:translateY(14px);
  animation:tk-rise .6s cubic-bezier(.19,.86,.24,1) forwards
}
.tk-card:nth-child(2){animation-delay:.08s}
.tk-card:nth-child(3){animation-delay:.16s}
.tk-card:nth-child(4){animation-delay:.24s}
@keyframes tk-rise{to{opacity:1;transform:none}}

.tk-sum{display:grid;grid-template-columns:1fr;gap:14px}
.tk-no{
  display:inline-block;padding:4px 10px;border-radius:999px;
  background:var(--mist);color:var(--forest);
  font:700 12.4px/1.5 var(--sans);letter-spacing:.04em
}
.tk-what{margin:10px 0 0;font:700 21px/1.25 var(--disp);color:var(--ink)}
.tk-when{margin:5px 0 0;font-size:13px;color:var(--muted)}
.tk-sum-r{display:flex;flex-direction:column;gap:6px;align-items:flex-start}

.tk-state{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 15px;border-radius:999px;
  background:var(--mist);color:var(--forest);
  font:700 14px/1 var(--sans)
}
.tk-state.is-live{background:rgba(125,184,62,.16);color:#3F6B1E}
.tk-state.is-done{background:rgba(79,138,38,.14);color:#3F6B1E}
.tk-state.is-dead{background:rgba(216,89,63,.12);color:#B4452F}
.tk-beat{
  width:9px;height:9px;border-radius:50%;background:#4F8A26;flex:none;
  box-shadow:0 0 0 0 rgba(79,138,38,.55);animation:tk-beat 1.8s ease-out infinite
}
@keyframes tk-beat{
  0%{box-shadow:0 0 0 0 rgba(79,138,38,.5)}
  70%,100%{box-shadow:0 0 0 11px rgba(79,138,38,0)}
}
.tk-fresh{font-size:12px;color:var(--muted)}

/* ---------- The rail ----------
   Each step owns the line that arrives at it, so the connector and
   the dot animate as one movement rather than two. */
.tk-rail{list-style:none;margin:0;padding:6px 0 0;display:grid;gap:0}
.tk-step{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);gap:13px;padding-bottom:26px}
.tk-step:last-child{padding-bottom:0}

.tk-line{position:absolute;left:16px;top:30px;bottom:-4px;width:2px;background:var(--tk-dim);overflow:hidden}
.tk-step:last-child .tk-line{display:none}
.tk-line i{
  position:absolute;inset:0;background:var(--tk-lit);
  transform:scaleY(0);transform-origin:top;
  transition:transform .75s cubic-bezier(.65,0,.35,1)
}
.tk-step.is-done .tk-line i{transform:scaleY(1);transition-delay:calc(var(--i) * .22s)}

.tk-dot{
  position:relative;z-index:1;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff;border:2px solid var(--tk-dim);color:transparent;
  transition:border-color .3s ease,background-color .3s ease,color .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)
}
.tk-tick{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .4s ease}
.tk-step.is-done .tk-dot{
  background:var(--tk-lit);border-color:var(--tk-lit);color:#0B2318;
  transition-delay:calc(var(--i) * .22s + .3s)
}
.tk-step.is-done .tk-tick{stroke-dashoffset:0;transition-delay:calc(var(--i) * .22s + .42s)}

/* Where it is right now: ticked like the ones behind it, but ringed, so
   "collected" and "on the way" do not read as the same thing. */
.tk-step.is-here .tk-dot{
  box-shadow:0 0 0 0 rgba(79,138,38,.55);
  animation:tk-wait 2.1s ease-out infinite;
  animation-delay:calc(var(--i) * .22s + .7s)
}
/* Nothing reached yet: the first step is pending rather than done. */
.tk-step.is-now .tk-dot{
  border-color:var(--tk-lit);
  box-shadow:0 0 0 0 rgba(125,184,62,.5);
  animation:tk-wait 2s ease-out infinite;
  animation-delay:calc(var(--i) * .22s + .5s)
}
.tk-step.is-now .tk-dot::after{
  content:"";width:11px;height:11px;border-radius:50%;background:var(--tk-lit)
}
@keyframes tk-wait{
  0%{box-shadow:0 0 0 0 rgba(125,184,62,.45)}
  70%,100%{box-shadow:0 0 0 12px rgba(125,184,62,0)}
}

.tk-name{
  align-self:center;font:600 15px/1.3 var(--sans);color:var(--muted);
  transition:color .3s ease
}
.tk-step.is-done .tk-name,.tk-step.is-now .tk-name{color:var(--ink)}
.tk-step.is-now .tk-name,.tk-step.is-here .tk-name{color:#3F6B1E;font-weight:700}

.tk-note{
  margin:18px 0 0;padding:13px 15px;border-radius:12px;
  font-size:13.8px;line-height:1.6;
  background:var(--mist);color:var(--ink)
}
.tk-note.tk-live{background:rgba(125,184,62,.12);color:#2F5B19}
.tk-note.tk-done{background:rgba(79,138,38,.12);color:#2F5B19}
.tk-note.tk-wait{background:rgba(242,160,61,.12);color:#8A5A12}
.tk-note.tk-bad{background:rgba(216,89,63,.1);color:#B4452F}

/* ---------- The run ---------- */
.tk-grid{display:grid;grid-template-columns:1fr;gap:14px}
.tk-grid .tk-card{margin-bottom:0}
.tk-run-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:22px}
.tk-run-h b{font:700 15.5px/1.2 var(--disp);color:var(--ink)}
.tk-run-h span{font:600 13.4px/1 var(--sans);color:#3F6B1E}

.tk-road{position:relative;height:4px;border-radius:2px;background:var(--tk-dim);margin:30px 0 12px}
.tk-road-done{
  position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--tk-lit);
  width:0;animation:tk-road 1.1s cubic-bezier(.65,0,.35,1) .35s forwards
}
@keyframes tk-road{to{width:var(--p)}}
.tk-van{
  position:absolute;top:50%;left:0;translate:-50% -50%;z-index:2;
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:#fff;border:2px solid var(--tk-lit);color:var(--forest);
  box-shadow:0 6px 16px -8px rgba(15,51,37,.6);
  animation:tk-van 1.1s cubic-bezier(.65,0,.35,1) .35s forwards
}
@keyframes tk-van{to{left:var(--p)}}
.tk-van svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8}
.tk-pin{
  position:absolute;top:50%;translate:-50% -50%;
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:var(--mist);color:var(--forest);border:1px solid var(--line)
}
.tk-pin svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8}
.tk-pin-a{left:0}
.tk-pin-b{left:100%}
.tk-road-x{display:flex;justify-content:space-between;gap:14px;font-size:12.4px;color:var(--muted)}

.tk-driver{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:18px;padding:13px 14px;border-radius:13px;
  background:var(--mist);border:1px solid var(--line)
}
.tk-driver.is-empty{background:none;border-style:dashed}
.tk-face{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);color:var(--forest)
}
.tk-face svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.tk-who{flex:1;min-width:0}
.tk-who b{display:block;font:600 14.4px/1.3 var(--sans);color:var(--ink)}
.tk-who small{display:block;margin-top:2px;font-size:12.4px;color:var(--muted)}
.tk-ring{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:10px;
  background:var(--forest);color:#fff;text-decoration:none;
  font:600 13.4px/1 var(--sans)
}
.tk-ring svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9}

/* ---------- The bill ---------- */
.tk-bill-h{display:block;margin-bottom:14px;font:700 15.5px/1.2 var(--disp);color:var(--ink)}
.tk-line-item{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;font-size:13.8px;color:var(--muted);
  border-bottom:1px dashed var(--line)
}
.tk-line-item b{color:var(--ink);font-variant-numeric:tabular-nums}
.tk-line-item.is-total{border-bottom:0;padding-top:13px;font-weight:600;color:var(--ink)}
.tk-line-item.is-total b{font:800 20px/1 var(--disp)}

.tk-owed{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:12px;padding:14px 16px;border-radius:13px;
  background:linear-gradient(135deg,rgba(125,184,62,.18),rgba(125,184,62,.07));
  border:1px solid rgba(125,184,62,.3)
}
.tk-owed.is-clear{background:var(--mist);border-color:var(--line)}
.tk-owed small{font-size:12.4px;color:#3F6B1E;font-weight:600}
.tk-owed b{font:800 22px/1 var(--disp);color:var(--forest);font-variant-numeric:tabular-nums}

.tk-code{
  margin-top:12px;padding:14px 16px;border-radius:13px;
  border:1px dashed var(--line);background:#FDFCFA;text-align:center
}
.tk-code small{display:block;font-size:11.6px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
html[lang="bn"] .tk-code small{letter-spacing:0;text-transform:none;font-size:12.6px}
.tk-code b{display:block;margin:5px 0 0;font:800 30px/1 var(--disp);color:var(--forest);letter-spacing:.14em}
.tk-code p{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}

.tk-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.tk-acts .btn{flex:1;min-width:130px;height:46px}

/* ---------- The diary ---------- */
.tk-log ol{list-style:none;margin:0;padding:0}
.tk-log li{
  position:relative;display:grid;grid-template-columns:16px minmax(0,1fr);gap:12px;
  padding:0 0 18px 0;
  opacity:0;transform:translateY(8px);
  animation:tk-rise .5s ease forwards;animation-delay:calc(.3s + var(--i) * .07s)
}
.tk-log li:last-child{padding-bottom:0}
.tk-log li::before{
  content:"";position:absolute;left:7px;top:14px;bottom:-4px;width:1.5px;background:var(--line)
}
.tk-log li:last-child::before{display:none}
.tk-log-dot{
  width:9px;height:9px;margin-top:6px;border-radius:50%;
  background:var(--tk-lit);box-shadow:0 0 0 3px rgba(125,184,62,.18)
}
.tk-log li:not(:first-child) .tk-log-dot{background:var(--line);box-shadow:none}
.tk-log b{display:block;font:600 14.4px/1.35 var(--sans);color:var(--ink)}
.tk-log p{margin:4px 0 0;font-size:13.2px;line-height:1.55;color:var(--muted)}
.tk-log time{display:block;margin-top:4px;font-size:11.8px;color:var(--muted);opacity:.8}

.tk-dead{text-align:center}

/* ---------- Wider ---------- */
@media (min-width:700px){
  .tk-form{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) auto;align-items:end;padding:18px}
  .tk-go{width:auto;padding:0 28px}
  .tk-sum{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .tk-sum-r{align-items:flex-end}
  .tk-card{padding:24px 26px}

  /* The rail lies down when there is room for it: one step per column,
     and the line runs left to right between the dots. */
  .tk-rail{grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0;padding-top:12px}
  .tk-step{grid-template-columns:1fr;gap:12px;padding:0 6px;text-align:center;justify-items:center}
  .tk-line{left:50%;right:-50%;top:16px;bottom:auto;width:auto;height:2px}
  .tk-line i{transform:scaleX(0);transform-origin:left}
  .tk-step.is-done .tk-line i{transform:scaleX(1)}
  .tk-name{font-size:13.6px}
}
@media (min-width:1000px){
  .tk-top{padding-top:40px}
  .tk-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .tk-head{max-width:52ch}
}

@media (prefers-reduced-motion:reduce){
  .tk-sky i,.tk-beat,.tk-step.is-now .tk-dot,.tk-step.is-here .tk-dot{animation:none}
  .tk-card,.tk-log li{opacity:1;transform:none;animation:none}
  .tk-line i,.tk-dot,.tk-tick{transition:none}
  .tk-road-done{width:var(--p);animation:none}
  .tk-van{left:var(--p);animation:none}
  .tk-miss{animation:none}
}