/* fx-product — polish pass 2026-10-07 (interactive showcases).
   Every selector starts with .px (lib/showcase.mjs) or a product-page hook, so nothing leaks. */

/* ---------- shared ---------- */
.px { position: relative; display: flex; flex-direction: column; gap: 12px; width: 100%; min-width: 0; }
.px [data-px-off] { display: none !important; }
.px button { font-family: inherit; cursor: pointer; }
.px .px-cap { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px/1.2 var(--font); color: var(--muted); letter-spacing: .01em; }
.px .px-chip { appearance: none; border: 0; padding: 7px 11px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui); font: 600 12px/1.15 var(--font); color: var(--ink); text-align: left; transition: background .2s, color .2s, box-shadow .2s; }
.px .px-chip:hover { box-shadow: inset 0 0 0 1px #c9c2f5; }
.px .px-chip[data-st="now"], .px .px-chip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.px button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.px-bar { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 2px; font: 500 12.5px/1.3 var(--font); color: var(--muted); }
.px.is-live .px-bar { display: flex; }
.px-live { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.px-live > i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgb(34 197 94 / .18); animation: px-pulse 1.8s ease-in-out infinite; }
.px.is-driven .px-live > i { background: var(--accent); box-shadow: 0 0 0 3px rgb(124 92 255 / .18); animation: none; }
.px-btn { flex: none; appearance: none; border: 0; padding: 7px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--border-ui), var(--shadow-control); font: 600 12px/1 var(--font) !important; color: var(--ink) !important; }
.px-btn:hover { box-shadow: inset 0 0 0 1px #c9c2f5, var(--shadow-control); }
@keyframes px-pulse { 50% { box-shadow: 0 0 0 6px rgb(34 197 94 / .05); } }
@keyframes px-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Jobs: drop a waiting job on a driver ---------- */
.px-jobs-board { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.px-jobs .bl { transition: box-shadow .2s, background .2s; }
.px-jobs .bl.is-over { background: #f5f2ff; box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-card); }
.px-jobs-card { touch-action: none; cursor: grab; border-radius: 12px; position: relative; z-index: 2; transition: transform .25s; }
.px-jobs.is-dragging .px-jobs-card { transition: none; cursor: grabbing; box-shadow: 0 18px 36px -16px rgb(24 18 60 / .45); }
.px-jobs-empty { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 18px 10px; border-radius: 12px; border: 1.5px dashed var(--border-ui); font: 600 12px/1 var(--font); color: var(--muted); }
.px-jobs-new { animation: px-in .45s ease both; }
.px-jobs-new .bc { box-shadow: inset 0 0 0 1.5px #c9c2f5, 0 8px 20px -12px rgb(124 92 255 / .55); }
.px-drop { appearance: none; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px 10px; border-radius: 10px; border: 1.5px dashed #d6d0f7; background: transparent; font: 600 12px/1 var(--font) !important; color: var(--violet-text, #5b3fd9) !important; }
.px-drop:hover { background: #f7f5ff; }
.px-jobs[data-s="1"] [data-drop="1"] .px-drop, .px-jobs[data-s="2"] [data-drop="2"] .px-drop { display: none; }
.px-toast { align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12.5px/1.2 var(--font); box-shadow: var(--shadow-float); animation: px-in .4s ease both; }
@media (max-width: 760px) {
  .px-jobs-board { grid-template-columns: 1fr; }
  .px-jobs-lane .bl-cards > .bc:nth-child(1) { display: none; }
}

/* ---------- Driver: tap through a stop ---------- */
.px-drv { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px 26px; align-items: center; }
.px-drv .px-bar { grid-column: 1 / -1; }
.px-drv-phone { display: flex; justify-content: center; }
.px-drv-phone .phone { --pz: .94; }
.px-drv .phone .d-foot { margin-top: auto; }
.px .px-drv-go { appearance: none; border: 0; width: 100%; height: 40px !important; font-size: 13px !important; color: #fff; transition: transform .12s, background .2s; }
.px-drv-go:active { transform: scale(.97); }
.px-drv[data-s="6"] .px-drv-go { background: #16a34a; }
.px-drv.is-live:not([data-s="6"]) .px-drv-go { animation: px-tap 2.2s ease-in-out infinite; }
@keyframes px-tap { 0%, 100% { box-shadow: 0 0 0 0 rgb(24 24 28 / .22); } 50% { box-shadow: 0 0 0 7px rgb(24 24 28 / 0); } }
.px-drv-steps { list-style: none; margin: 10px 12px 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.px-drv-steps li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 7px; font: 500 11px/1.2 var(--font); color: var(--muted); }
.px-drv-steps li i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #d4d5de; color: transparent; }
.px-drv-steps li em { font-style: normal; font-variant-numeric: tabular-nums; opacity: 0; }
.px-drv-steps li[data-st="done"] { color: var(--ink); }
.px-drv-steps li[data-st="done"] i { background: #16a34a; box-shadow: none; color: #fff; }
.px-drv-steps li[data-st="done"] em { opacity: 1; }
.px-drv-steps li[data-st="now"] b { color: var(--ink); font-weight: 700; }
.px-drv-steps li[data-st="now"] i { box-shadow: inset 0 0 0 2px var(--ink); }
.px-drv-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; border-radius: 16px; align-self: center; }
.px-drv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 15px; }
.px-drv-row .chip { animation: px-in .35s ease both; }
.px-drv-sub { font-size: 12.5px; color: var(--muted); }
.px-drv-tl { list-style: none; margin: 6px 0 0; padding: 10px 0 0; border-top: 1px solid var(--divider); display: flex; flex-direction: column; gap: 8px; }
.px-drv-tl li { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 8px; font-size: 13px; animation: px-in .35s ease both; }
.px-drv-tl em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.px-drv-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0 6px; border-bottom: 1px solid var(--divider); }
.px-drv-big { font: 700 24px/1.15 var(--font); letter-spacing: -.025em; color: var(--ink); margin-top: 6px; animation: px-in .35s ease both; }
.px-drv-prog { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-top: 14px; }
.px-drv-prog span { display: flex; flex-direction: column; gap: 6px; }
.px-drv-prog span::before { content: ""; height: 5px; border-radius: 999px; background: #eceef4; }
.px-drv-prog i { display: block; height: 5px; margin-top: -11px; border-radius: 999px; background: var(--grad-brand); }
.px-drv-prog small { font: 600 10.5px/1.1 var(--font); color: var(--muted); }
@media (max-width: 1080px) { .px-drv { grid-template-columns: auto minmax(0, 1fr); } .px-drv-phone { grid-row: 1 / span 2; } }
@media (max-width: 620px) { .px-drv { grid-template-columns: 1fr; } .px-drv-phone { grid-row: auto; order: -1; } }

/* ---------- Operator: pick a question ---------- */
.px-op-card { padding-bottom: 14px; }
.px-op-thread { min-height: 128px; padding: 4px 16px 0; }
.px-op-a { display: flex; flex-direction: column; gap: 8px; animation: px-in .35s ease both; }
.px-op-a .op-q { align-self: flex-end; }
.px-op-a .op-tool { animation: px-in .35s .25s ease both; }
.px-op-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; border-top: 1px solid var(--divider); margin-top: 12px; }

/* ---------- Customer portal: request a pickup ---------- */
.px-portal { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.px-portal .px-bar { grid-column: 1 / -1; }
.px-po { gap: 10px; }
.px-po .po-btns button { appearance: none; border: 0; }
.px-po .po-btns .abtn-pickup { box-shadow: 0 0 0 0 rgb(220 38 38 / .3); }
.px-portal.is-live:not(.is-driven)[data-s="0"] .abtn-pickup { animation: px-tap 2s ease-in-out infinite; }
.px-po-sheet { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; background: #f6f5fb; animation: px-in .35s ease both; font-size: 13px; }
.px-po-sheet small { color: var(--muted); font-size: 11.5px; }
.px-po-when { display: flex; flex-wrap: wrap; gap: 6px; }
.px-po-new { animation: px-in .4s ease both; box-shadow: inset 0 0 0 1.5px #fde3b0; border-radius: 12px; }
.px-po-office { gap: 10px; padding: 14px; animation: px-in .45s .3s ease both; }
.px-po-lead { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; }
.px-po-lead > div span { display: block; color: var(--muted); font-size: 12px; }
@media (max-width: 760px) { .px-portal { grid-template-columns: 1fr; } }

/* ---------- Inventory: one can through its states ---------- */
.px-can-track { display: flex; align-items: center; gap: 0; padding: 4px 2px; }
.px-can-line { flex: 1; min-width: 8px; height: 2px; background: #d9dbe6; }
.px-can-node { appearance: none; border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; width: 74px; font: 600 11.5px/1.15 var(--font) !important; color: var(--muted) !important; text-align: center; }
.px-can-node i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px #d9dbe6; color: var(--muted); transition: background .25s, color .25s, box-shadow .25s; }
.px-can-node[data-st="done"] i { box-shadow: inset 0 0 0 1.5px #c9c2f5; color: var(--accent); }
.px-can-node[data-st="now"] { color: var(--ink) !important; }
.px-can-node[data-st="now"] i { background: var(--ink); color: #fff; box-shadow: 0 6px 14px -6px rgb(24 24 28 / .5); }
.px-can-card { gap: 12px; }
.px-can-body { min-height: 96px; display: flex; flex-direction: column; justify-content: center; }
.px-can-clock, .px-can-info > div { animation: px-in .35s ease both; }
.px-can-info > div { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.px-can-info span { color: var(--body); }
.px-can-foot { display: flex; align-items: center; gap: 6px; font: 500 12.5px/1.3 var(--font); color: var(--muted); padding-top: 10px; border-top: 1px solid var(--divider); }
.px-can-foot svg { flex: none; }
.px-count { font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .px-can-node { width: 52px; font-size: 10.5px !important; } .px-can-node i { width: 30px; height: 30px; } }

/* ---------- Scale tickets: type the tons ---------- */
.px-tk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; }
.px-tk-in { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 20px; }
.px-tk-in .px-cap { grid-column: 1 / -1; }
.px-tk-in .px-tk-field { grid-row: span 2; }
@media (max-width: 620px) { .px-tk-in { grid-template-columns: 1fr; } .px-tk-in .px-tk-field { grid-row: auto; } }
.px-tk-in { gap: 12px; padding: 16px; }
.px-tk-field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #f6f5fb; box-shadow: inset 0 0 0 1px var(--border-ui); font: 600 13px/1 var(--font); color: var(--muted); }
.px-tk-field input { width: 110px; border: 0; background: transparent; text-align: right; font: 700 26px/1 var(--font); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.px-tk-field input::-webkit-inner-spin-button, .px-tk-field input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.px-tk-field input:focus { outline: none; }
.px-tk-field:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.px-tk-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--accent) var(--fill, 53%), #e3e4ec var(--fill, 53%)); margin: 6px 0; }
.px-tk-range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--border-ui), 0 3px 8px rgb(20 20 40 / .25); cursor: grab; }
.px-tk-range::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--border-ui), 0 3px 8px rgb(20 20 40 / .25); }
.px-tk-pre { display: flex; gap: 6px; flex-wrap: wrap; }
.px-tk-out { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.px-tk-out .ui-card { padding: 16px; gap: 10px; justify-content: space-between; min-height: 150px; }
.px-tk-out .ui-card > span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.px-tk-big { font: 700 clamp(20px, 2vw, 26px)/1.05 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--ink); }
.px-tk-inv { background: var(--ink) !important; color: #fff; }
.px-tk-inv .px-tk-big { color: #fff; }
.px-tk-inv .px-cap, .px-tk-inv > span { color: rgb(255 255 255 / .65) !important; }
@media (max-width: 900px) { .px-tk { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .px-tk-out { grid-template-columns: 1fr; } .px-tk-out .ui-card { flex-direction: row; align-items: baseline; flex-wrap: wrap; } }

/* ---------- Billing: approve or waive ---------- */
.px-bl { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.px-bl .px-bar { grid-column: 1 / -1; }
.px-bl-r { grid-template-columns: auto minmax(0, 1fr) auto !important; }
.px-bl-acts { display: flex; gap: 6px; }
.px-bl-acts button { appearance: none; border: 0; min-width: 0; padding: 0 11px; height: 30px; font-size: 12px !important; }
.px-bl-ok { background: #fff !important; color: #15803d !important; box-shadow: inset 0 0 0 1px #bfe8cf !important; }
.px-bl-r[data-st="ok"] .px-bl-ok { background: #16a34a !important; color: #fff !important; box-shadow: none !important; }
.px-bl-r[data-st="no"] .px-bl-no { background: var(--ink) !important; color: #fff !important; box-shadow: none !important; }
.px-bl-r[data-st="no"] > div b { text-decoration: line-through; color: var(--muted); }
.px-bl-inv { padding: 16px; gap: 0; }
.px-bl-h { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--divider); }
.px-bl-h b { font-size: 15px; } .px-bl-h span { font-size: 12px; color: var(--muted); }
.px-bl-l { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--divider); font-size: 13px; transition: opacity .25s; }
.px-bl-l b { font-variant-numeric: tabular-nums; }
.px-bl-l[data-st="pend"] { opacity: .45; }
.px-bl-l[data-st="pend"] b::before { content: "waiting · "; font-weight: 500; color: var(--muted); }
.px-bl-l[data-st="no"] b { text-decoration: line-through; color: var(--muted); }
.px-bl-t { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 14px; font-size: 13px; }
.px-bl-t b { font: 700 24px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.px-bl-send { appearance: none; border: 0; width: 100%; justify-content: center; gap: 6px; }
.px-bl-send:disabled { cursor: default; opacity: 1; }
.px-bl:not(.is-sent) .px-bl-send:disabled { background: #e9eaf0 !important; color: var(--muted) !important; box-shadow: none !important; }
@media (max-width: 760px) { .px-bl { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .px-bl-r { grid-template-columns: auto minmax(0, 1fr) !important; } .px-bl-acts { grid-column: 1 / -1; } .px-bl-acts button { flex: 1; } }

/* ---------- Fleet: pre-trip ---------- */
.px-pt { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.px-pt .px-bar { grid-column: 1 / -1; }
.px-pt-card { padding-bottom: 14px; gap: 4px; }
.px-pt-list { list-style: none; margin: 0; padding: 0 14px; }
.px-pt-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--divider); font: 500 13px/1.25 var(--font); }
.px-pt-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: #f1f2f6; }
.px-pt-seg button { appearance: none; border: 0; background: none; padding: 5px 10px; border-radius: 7px; font: 600 11.5px/1 var(--font) !important; color: var(--muted) !important; transition: background .2s, color .2s; }
.px-pt-list li[data-st="ok"] [data-act="ok"] { background: #fff; color: #15803d !important; box-shadow: 0 1px 2px rgb(20 20 40 / .12); }
.px-pt-list li[data-st="bad"] [data-act="bad"] { background: #dc2626; color: #fff !important; }
.px-pt-note { grid-column: 1 / -1; font: 500 11.5px/1.2 var(--font); font-style: normal; color: #b42318; }
.px-pt-list li:not([data-st="bad"]) .px-pt-note { display: none; }
.px-pt-sign { display: flex; align-items: center; gap: 6px; padding: 10px 14px 0; font: 600 12px/1 var(--font); color: var(--muted); opacity: .35; transition: opacity .3s; }
.px-pt.is-signed .px-pt-sign, .px-pt:not(.is-live) .px-pt-sign { opacity: 1; color: #15803d; }
.px-pt-out .ui-card { padding: 16px; gap: 10px; animation: px-in .4s ease both; }
.px-pt-out p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--body); }
.px-pt-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding-top: 8px; border-top: 1px solid var(--divider); }
.px-pt-kv span { color: var(--muted); }
.px-pt-hold { box-shadow: inset 0 0 0 1.5px #f7c6c0, var(--shadow-card); }
@media (max-width: 760px) { .px-pt { grid-template-columns: 1fr; } }

/* ---------- Reports: group by ---------- */
.px-rep-card { padding: 16px; gap: 10px; }
.px-rep-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.px-rep-h > b { font-size: 14.5px; }
.px-rep-by { display: inline-flex; padding: 3px; border-radius: 10px; background: #f1f2f6; }
.px-rep-by button { appearance: none; border: 0; background: none; padding: 7px 11px; border-radius: 8px; font: 600 12px/1 var(--font) !important; color: var(--muted) !important; white-space: nowrap; }
.px-rep-by button[data-st="now"] { background: #fff; color: var(--ink) !important; box-shadow: 0 1px 3px rgb(20 20 40 / .14); }
.px-rep-t { min-height: 176px; animation: px-in .3s ease both; }
.px-rep-r { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr) minmax(0, 1fr) minmax(48px, 1fr); gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--divider); font-size: 13px; font-variant-numeric: tabular-nums; }
.px-rep-r em { font-style: normal; color: #15803d; font-size: 12px; }
.px-rep-hd { padding-top: 2px; font: 600 11px/1 var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.px-rep-bar { height: 8px; border-radius: 999px; background: #eef0f5; overflow: hidden; }
.px-rep-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); transform-origin: left; animation: px-grow .6s ease both; }
@keyframes px-grow { from { transform: scaleX(0); } }
.px-rep-f { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding-top: 4px; font-size: 12.5px; color: var(--muted); }
.px-rep-f b { color: var(--ink); font-size: 14px; }
.px-rep-f span:first-child { margin-right: auto; }
@media (max-width: 520px) { .px-rep-r { grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, 1fr); } .px-rep-bar, .px-rep-hd span:last-child { display: none; } }

/* ---------- Communications: one feed ---------- */
.px-cm-card { padding: 14px 0 6px; gap: 8px; }
.px-cm-h { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; border-bottom: 1px solid var(--divider); }
.px-cm-h::-webkit-scrollbar { display: none; }
.px-cm-h .px-chip { flex: none; }
.px-cm-list { min-height: 300px; }
.px-cm-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--divider); font-size: 13px; animation: px-in .3s ease both; }
.px-cm-r:last-child { border-bottom: 0; }
.px-cm-r > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.px-cm-r > div span { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-cm-m { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.px-cm-m em { font-style: normal; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.px-cm-m small { font: 600 10.5px/1 var(--font); padding: 4px 7px; border-radius: 6px; background: #f1f2f6; color: var(--body); white-space: nowrap; }
@media (max-width: 520px) { .px-cm-m small { display: none; } }

/* ---------- Brokering: pick a hauler ---------- */
.px-bk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.px-bk .px-bar { grid-column: 1 / -1; }
.px-bk-pick, .px-bk-flow { padding: 16px; gap: 10px; }
.px-bk-job { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding-bottom: 10px; border-bottom: 1px solid var(--divider); font-size: 13.5px; }
.px-bk-job > span:last-child { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
.px-bk-h { appearance: none; border: 0; width: 100%; text-align: left; background: #fff; }
.px-bk-h[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--accent), 0 8px 20px -14px rgb(124 92 255 / .7); }
.px-bk-off { opacity: .55; }
.px-bk-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.px-bk-steps li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 7px 0; font-size: 13px; transition: opacity .25s; }
.px-bk-steps li > i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #d4d5de; color: transparent; transition: background .25s; }
.px-bk-steps li div { display: flex; flex-direction: column; gap: 2px; }
.px-bk-steps li span { color: var(--muted); font-size: 12.5px; }
.px-bk-steps li[data-st="todo"] { opacity: .4; }
.px-bk-steps li[data-st="done"] > i { background: #16a34a; box-shadow: none; color: #fff; }
.px-bk-steps li[data-st="now"] > i { box-shadow: inset 0 0 0 2px var(--accent); }
.px-bk-money { margin-top: auto; display: flex; flex-direction: column; gap: 0; border-radius: 12px; background: #f6f5fb; padding: 4px 14px; }
.px-bk-money > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 13px; border-bottom: 1px solid #ebe8f7; }
.px-bk-money > div:last-child { border-bottom: 0; }
.px-bk-money b { font-variant-numeric: tabular-nums; }
.px-bk-money .pk-margin b { color: #15803d; font-size: 16px; }
.px-bk-money small { font-weight: 500; color: var(--muted); font-size: 11.5px; }
@media (max-width: 760px) { .px-bk { grid-template-columns: 1fr; } }

/* ---------- reduced motion: finished state, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .px *, .px *::before { animation: none !important; transition: none !important; }
}
.px-jobs-wait { align-self: stretch; }
.px-jobs-wait .bl-cards { flex: 1; }
.px-jobs-empty { flex: 1; }
@media (max-width: 760px) { .px-jobs-empty { flex: none; } }

.px-can-big { font: 700 34px/1 var(--font); letter-spacing: -.03em; color: var(--ink); }
.px-can-big b { font-weight: 700; font-variant-numeric: tabular-nums; }
.px-can-big small { font-size: 15px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.px-can-bar { display: flex; gap: 3px; height: 8px; margin: 12px 0 8px; }
.px-can-bar i { flex: 14; border-radius: 999px 0 0 999px; background: var(--grad-brand); }
.px-can-bar s { flex: 8; border-radius: 0 999px 999px 0; background: #ef4444; }
.px-can-leg { display: flex; justify-content: space-between; gap: 8px; font: 500 11.5px/1.2 var(--font); color: var(--muted); }
.px-can-leg .bad { color: #b42318; font-weight: 700; }
.px .px-ttl { display: flex; flex-direction: column; gap: 2px; } .px .px-ttl b { font-size: 13.5px; } .px .px-ttl small { font-size: 11.5px; color: var(--muted); }
.px > *, .px-bl > *, .px-pt > *, .px-bk > *, .px-portal > *, .px-drv > * { min-width: 0; }
.px-bl-r > div { min-width: 0; }
.px-bl-r > div span { white-space: normal; }

/* ---------- Customer tracking page (lib/driver.mjs custTracking): status + timeline, no map, no ETA ---------- */
.c-trk { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 4px 12px 10px; min-height: 0; overflow: hidden; }
.c-trk-sms { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 9px 10px; border-radius: 14px; background: rgb(255 255 255 / .92); box-shadow: 0 6px 18px -10px rgb(20 20 40 / .35), inset 0 0 0 1px rgb(0 0 0 / .04); font-size: 10.5px; line-height: 1.35; }
.c-trk-sms > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 6px; }
.c-trk-sms b { font-size: 11px; } .c-trk-sms em { font-style: normal; color: var(--muted); font-size: 10px; }
.c-trk-sms > div > span { grid-column: 1 / -1; color: var(--body); }
.c-trk-brand { display: flex; align-items: center; gap: 9px; padding: 4px 2px 0; }
.c-trk-brand > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-trk-brand b { font: 700 13px/1.2 var(--font); } .c-trk-brand span { font-size: 10.5px; color: var(--muted); }
.c-trk-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 13px; background: #fff; box-shadow: var(--shadow-panel), inset 0 0 0 1px rgb(0 0 0 / .04); }
.c-trk-card > small { font: 700 9.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #9a9ea8; }
.c-trk-card > small.c-trk-st-l { color: #ea580c; }
.c-trk-st { font: 750 17px/1.15 var(--font); letter-spacing: -.02em; }
.c-trk-bar { height: 6px; border-radius: 999px; background: #eceef3; overflow: hidden; }
.c-trk-bar i { display: block; height: 100%; border-radius: inherit; background: #f97316; }
.c-trk-lbl { display: flex; justify-content: space-between; font: 700 7.5px/1 var(--font); letter-spacing: .04em; text-transform: uppercase; color: #9a9ea8; }
.c-trk-lbl em { font-style: normal; }
.c-trk-det > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.c-trk-det span { color: var(--muted); }
.c-trk-det b { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.c-trk-det .atag { height: 17px; padding: 0 5px; font-size: 10px; }
.c-trk-tl > div { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 11.5px; color: #9a9ea8; }
.c-trk-tl > div > i { width: 14px; height: 14px; border-radius: 50%; display: grid; place-items: center; background: #e5e7eb; color: transparent; }
.c-trk-tl em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.c-trk-tl .is-done { color: var(--ink); }
.c-trk-tl .is-done > i { background: #f97316; color: #fff; }