/* ==== the order tracker (plan.md, product UI spec) ====================================================
   One component for the real status page, the hero window and the phone. The host is a size container;
   the layout follows the component's own width: two columns ≥ 861px, a stacked pane below, a phone
   layout ≤ 560px. Glyphs are CSS. Highlights are square bands with a 2px rail. */
.tk-host { container: tk / inline-size; }
.tk { --tk-x: 32px; padding: 28px var(--tk-x) 40px; color: var(--t3); font: 400 14px/1.5 var(--font); letter-spacing: -.006em; text-align: left; font-variant-numeric: tabular-nums; }
.tk-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 32px; padding-bottom: 24px; }
.tk-id { min-width: 0; }
.tk-lab { display: flex; align-items: baseline; gap: 10px; font: 400 12px/17px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t4); }
.tk-tok { text-transform: none; letter-spacing: 0; }
.tk-title { margin-top: 8px; font: 600 30px/35px var(--serif); letter-spacing: -.015em; color: var(--t1); text-wrap: balance; }
.tk-meta { margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--t3); }
.tk-meta i { margin: 0 8px; font-style: normal; color: var(--t4); }
.tk-state { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; padding-top: 2px; }
.tk-chip { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 9px; border-radius: 9999px; background: var(--sheet); box-shadow: inset 0 0 0 1px var(--line);
  font: 510 13px/1 var(--font); color: var(--t1); white-space: nowrap; }
.tk-chip > span { display: inline-flex; align-items: center; gap: 8px; }
.tk-of { margin-left: 2px; padding-left: 9px; border-left: 1px solid var(--line); font: 400 12px/1 var(--mono); color: var(--t4); }
.tk-of b { font-weight: 400; }
.tk-upd-row { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; }
.tk-upd { font: 400 12px/16px var(--mono); color: var(--t4); white-space: nowrap; }
.tk-btn { height: 28px; padding: 0 12px; font-size: 13px; }
.tk-btn.is-paused { background: var(--deep); }
/* narrow: the time takes its own line, the buttons share the next, nothing wraps inside a button */
@container tk (max-width: 380px) { .tk-upd { flex-basis: 100%; } }

/* body: the timeline column and the side */
.tk-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
.tk-rows { border-top: 1px solid var(--line); }
.tk-row { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 14px; padding: 14px 16px 14px 14px; border-bottom: 1px solid var(--line);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease); }
.tk-row .tk-g { margin-top: 2px; }
/* the connector: glyph to glyph, ink once the step is done */
.tk-row::before { content: ""; position: absolute; left: 21.5px; top: 36px; bottom: -12px; width: 1px; background: var(--line-2); z-index: 1; transition: background-color .5s var(--ease); }
.tk-row:last-child::before { display: none; }
.tk-row[data-state="done"]::before { background: var(--t3); }
.tk-row[data-state="current"] { background: rgba(var(--accent-rgb), .055); box-shadow: inset 2px 0 0 var(--accent); }
.tk-row[data-state="stopped"] { background: rgba(36,29,16,.04); box-shadow: inset 2px 0 0 var(--t1); }
.tk-main { min-width: 0; }
.tk-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tk-l { font: 590 14px/20px var(--font); color: var(--t1); letter-spacing: -.008em; }
.tk-r { flex: none; }
.tk-time { font: 400 12px/20px var(--mono); color: var(--t4); white-space: nowrap; }
.tk-now { font: 500 12px/20px var(--mono); color: var(--accent); }
.tk-d { display: block; margin-top: 2px; font-size: 13.5px; line-height: 20px; color: var(--t3); text-wrap: pretty; }
.tk-row[data-state="pending"] .tk-l { color: var(--t3); font-weight: 510; }
.tk-row[data-state="pending"] .tk-d { color: var(--t4); }
.tk-row[data-state="skipped"] .tk-l { color: var(--t4); font-weight: 510; text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* glyphs: pending (dotted ring), current (ring + half), done (ink disc + check), stopped (ring + cross) */
.tk-g { position: relative; display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 50%; }
.tk-g::before, .tk-g::after { content: ""; position: absolute; }
.tk-g.pend { border: 1.5px dotted var(--line-strong); }
.tk-g.cur { box-shadow: inset 0 0 0 1.5px var(--accent); }
.tk-g.cur::after { inset: 4px; border-radius: 50%; background: conic-gradient(var(--accent) 0 50%, transparent 0); }
.tk-g.done { background: var(--t1); }
.tk-g.done::after { left: 5.6px; top: 3.4px; width: 3.8px; height: 7px; border-right: 1.6px solid var(--bg); border-bottom: 1.6px solid var(--bg); transform: rotate(42deg); }
.tk-g.stop { box-shadow: inset 0 0 0 1.5px var(--t1); }
.tk-g.stop::before, .tk-g.stop::after { left: 4.5px; right: 4.5px; top: 7.25px; height: 1.5px; border-radius: 1px; background: var(--t1); transform: rotate(45deg); }
.tk-g.stop::after { transform: rotate(-45deg); }

/* the description, kept under the timeline */
.tk-desc { margin-top: 28px; padding: 16px 18px 18px; background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; }
.tk-desc h3 { margin-bottom: 6px; font: 510 12px/1.4 var(--font); color: var(--t4); }
.tk-desc p { max-width: 72ch; font-size: 14px; line-height: 1.6; color: var(--t2); }

/* the side: the receipt sheet, then one pane of hairline blocks */
.tk-side { display: grid; gap: 12px; align-content: start; }
/* the receipt: a sheet with the mark's struck corner. The 1px outline is drawn, not bordered: the outer fill is the
   line colour, the inner fill sits 1px in, and both are clipped by the same corner (the inner cut is 22 - 2 + root 2, so
   the diagonal stays exactly 1px). Every corner renders the same at any scale; the empty state is a lighter outline. */
.tk-rc { position: relative; isolation: isolate; padding: 16px 18px 18px; border-radius: 10px; background: var(--line-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.tk-rc::before { content: ""; position: absolute; inset: 1px; z-index: -1; border-radius: 9px; background: var(--sheet);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 21.414px), calc(100% - 21.414px) 100%, 0 100%); }
.tk-rc.empty { background: var(--line); }
.tk-rc.empty::before { background: var(--bg); }
.tk-rc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 590 13px/18px var(--font); color: var(--t1); }
.tk-rc-o { font: 400 12px/18px var(--mono); letter-spacing: .06em; color: var(--t4); }
.tk-rc .tk-kv { margin-top: 10px; }
.tk-rc-e { margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--t4); }
.tk-rc-dl { display: flex; width: 100%; height: 30px; margin-top: 14px; font-size: 13px; }
.tk-pane { background: var(--sheet); border: 1px solid var(--line); border-radius: 10px; }
.tk-blk { padding: 14px 18px 16px; }
.tk-blk + .tk-blk { border-top: 1px solid var(--line); }
.tk-blk h3 { margin-bottom: 6px; font: 510 12px/17px var(--font); color: var(--t4); }
.tk-kv > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; font-size: 13px; line-height: 19px; }
.tk-kv dt { min-width: 0; color: var(--t3); }
.tk-kv dd { margin: 0; flex: none; color: var(--t1); text-align: right; white-space: nowrap; }
.tk-kv .tk-tot { margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--l1); }
.tk-kv .tk-tot dt, .tk-kv .tk-tot dd { font-weight: 590; color: var(--t1); }
.tk-sub { color: var(--t4); font-weight: 400; }
.tk-mute { color: var(--t4); font-weight: 400; }
.tk-g-line { margin-top: 10px; font-size: 13px; line-height: 20px; }
.tk-pr { font-size: 13px; line-height: 20px; }
.tk-pr b { display: block; font-weight: 590; font-size: 14px; color: var(--t1); }
.tk-pr span { display: block; color: var(--t3); }

/* the banner: stops and send-backs, a square-railed sheet */
.tk-ban { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 12px; margin: 0 0 24px; padding: 14px 18px; background: rgba(var(--accent-rgb), .045); border: 1px solid rgba(var(--accent-rgb), .26); border-radius: 10px; }
.tk-ban > .tk-g { grid-row: span 3; margin-top: 2px; }
.tk-ban > :not(.tk-g) { grid-column: 2; }
.tk-ban.stop { background: rgba(36,29,16,.035); border-color: var(--line-2); }
/* the real order page while patent.click is in preview: one quiet note, never a banner status.js swaps */
.tk-note { margin: 0 0 24px; padding: 12px 18px; background: rgba(36,29,16,.035); border: 1px solid var(--line-2); border-radius: 10px; font-size: 14px; line-height: 22px; color: var(--t2); text-wrap: pretty; }
.tk-ban-t { font: 590 14px/20px var(--font); color: var(--t1); }
.tk-why { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--l1); }
.tk-why-h { font: 510 12px/17px var(--font); color: var(--t4); }
.tk-why-q { margin: 6px 0 0; max-width: 72ch; font-size: 14px; line-height: 22px; color: var(--t2); }
.tk-why-by { margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--t4); }
.tk-ban-d { margin-top: 3px; max-width: 80ch; font-size: 14px; line-height: 22px; color: var(--t3); }

/* ---- narrower: the side drops under the timeline, receipt beside the pane ---- */
@container tk (max-width: 860px) {
  .tk-body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tk-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .tk-desc { margin-top: 24px; }
}
/* ---- the phone layout ---- */
@container tk (max-width: 560px) {
  .tk { --tk-x: 16px; padding: 20px 16px 28px; }
  .tk-head { flex-direction: column; padding-bottom: 18px; }
  .tk-title { font-size: 22px; line-height: 27px; }
  .tk-meta { font-size: 13px; line-height: 20px; }
  .tk-state { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
  .tk-upd-row { justify-content: flex-start; }
  .tk-side { grid-template-columns: minmax(0, 1fr); }
  .tk-row { padding: 12px 12px 12px 10px; column-gap: 12px; }
  .tk-row::before { left: 17.5px; top: 34px; bottom: -10px; }
  .tk-main { display: flex; flex-direction: column; }
  .tk-top { display: contents; }
  .tk-l { order: 1; }
  .tk-d { order: 2; font-size: 13px; }
  .tk-r { order: 3; margin-top: 2px; }
  .tk-ban { padding: 12px 14px; }
}
@container tk (max-width: 340px) { .tk-of { display: none; } }

/* ---- the real page: page scale inside the site's column ---- */
.tk-page { --tk-x: 0px; padding: 0; }
.tk-page .tk-head { padding-bottom: 32px; }
.tk-page .tk-title { margin-top: 12px; font-size: 44px; line-height: 48px; letter-spacing: -.02em; }
.tk-page .tk-meta { margin-top: 10px; font-size: 16px; line-height: 26px; }
.tk-page .tk-body { grid-template-columns: minmax(0, 1fr) 352px; gap: 40px; }
.tk-page .tk-l { font-size: 15px; }
.tk-page .tk-d { font-size: 14.5px; line-height: 22px; }
.tk-page .tk-row { padding: 16px 18px 16px 14px; }
.tk-page .tk-row::before { top: 38px; bottom: -14px; }
@container tk (max-width: 860px) { .tk-page .tk-body { grid-template-columns: minmax(0, 1fr); } }
@container tk (max-width: 560px) { .tk-page .tk-title { font-size: 30px; line-height: 34px; } .tk-page .tk-meta { font-size: 14px; line-height: 21px; } .tk-page .tk-row { padding: 12px 12px 12px 10px; } .tk-page .tk-row::before { top: 34px; bottom: -10px; } .tk-page .tk-d { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .tk-row, .tk-row::before { transition: none; } }