/* Shipping app: tracking timeline, zone-mapping rows, courier test result. Tokens from admin.css only; kit classes (bk-*, ord-chan*) are in orders.css. */
tr.shp-failed > td { background: var(--danger-soft); }
.shp-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.shp-ev { position: relative; display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; padding-bottom: 16px; }
.shp-ev::before { content: ""; position: absolute; inset-block: 14px 0; inset-inline-start: 6px; width: 2px; background: var(--line); }
.shp-ev:last-child::before { display: none; }
.shp-dot { width: 14px; height: 14px; margin-top: 4px; border-radius: 50%; background: var(--info); border: 3px solid var(--panel); box-shadow: 0 0 0 1px var(--line); z-index: 1; }
.shp-ev.st-delivered .shp-dot { background: var(--ok); }
.shp-ev.st-returned .shp-dot, .shp-ev.st-failed .shp-dot { background: var(--danger); }
.shp-ev.st-cancelled .shp-dot { background: var(--muted); }
.shp-ev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shp-ev-note { margin: 4px 0 0; overflow-wrap: anywhere; color: var(--muted); font-size: 13px; }

.shp-test { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.shp-zone-body { display: grid; gap: 12px; padding-block: 12px; container: zones / inline-size; }
.shp-zones { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.shp-zone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) auto; gap: 10px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.shp-zone input, .shp-zone select { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel); }
.shp-zone .icon-btn { width: 44px; height: 44px; }
.shp-area { display: grid; gap: 6px; min-width: 0; }
.shp-zone-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
:root:root .shp-zone-tools .btn { min-height: 44px; }
@container zones (max-width: 640px) {
  .shp-zone { grid-template-columns: minmax(0, 1fr) auto; }
  .shp-zone .field { grid-column: 1; }
  .shp-zone .icon-btn { grid-column: 2; grid-row: 1; align-self: start; }
}