.shipment-workspace {
  --shipment-gold: var(--gold);
  --shipment-soft: color-mix(in srgb, var(--gold) 12%, transparent);
  --shipment-line: color-mix(in srgb, var(--gold) 24%, var(--border));
}

.shipment-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin: -4px 0 22px;
  padding: 26px;
  border: 1px solid var(--shipment-line);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--gold) 14%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 95%, var(--gold)), var(--bg-card));
}

.shipment-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.shipment-hero h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 9px;
  color: var(--bright);
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -.035em;
}

.shipment-hero p {
  max-width: 720px;
  margin: 0;
  color: var(--mid);
  font-size: 14px;
  line-height: 1.7;
}

.shipment-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.shipment-metrics article {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg-card) 88%, transparent);
}

.shipment-metrics span,
.shipment-metrics small {
  display: block;
  color: var(--dim);
  font-size: 11px;
}

.shipment-metrics strong {
  display: block;
  margin: 3px 0 1px;
  color: var(--bright);
  font-size: 25px;
  line-height: 1;
}

.tracking-connector {
  margin-bottom: 12px;
  overflow: clip;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
}

.tracking-connector summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 15px 17px;
  cursor: pointer;
  list-style: none;
}

.tracking-connector summary::-webkit-details-marker { display: none; }
.tracking-connector summary:hover { background: color-mix(in srgb, var(--bright) 3%, transparent); }
.tracking-connector summary strong { display: block; color: var(--bright); font-size: 14px; }
.tracking-connector summary small { display: block; margin-top: 2px; color: var(--dim); font-size: 11px; }
.tracking-connector__mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: var(--shipment-soft); color: var(--gold); font-size: 18px; }
.tracking-connector__action { color: var(--gold); font-size: 12px; font-weight: 750; }
.tracking-connector__action::before { content: "Set up"; }
.tracking-connector[open] .tracking-connector__action::before { content: "Close"; color: var(--dim); font-weight: 600; }

.tracking-connector__body {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  gap: 24px;
  padding: 20px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-dark) 32%, transparent);
}

.tracking-connector__intro h3 { margin: 0 0 7px; color: var(--bright); font-size: 15px; }
.tracking-connector__intro > p { margin: 0 0 14px; color: var(--mid); font-size: 12px; line-height: 1.65; }
.tracking-plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.tracking-plan-grid a { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); color: inherit; text-decoration: none; transition: border-color .18s ease, transform .18s ease; }
.tracking-plan-grid a:hover { transform: translateY(-1px); border-color: var(--shipment-line); }
.tracking-plan-grid strong { display: block; margin-bottom: 4px; color: var(--gold); font-size: 12px; }
.tracking-plan-grid span { display: block; color: var(--dim); font-size: 10px; line-height: 1.5; }
.tracking-review-date { display: block; margin-top: 9px; color: var(--dim); font-size: 9px; }

.tracking-key-form { padding: 15px; border: 1px solid var(--shipment-line); border-radius: var(--radius); background: var(--shipment-soft); }
.tracking-key-form label { display: block; margin: 0 0 5px; color: var(--mid); font-size: 11px; font-weight: 700; }
.tracking-key-form select { width: 100%; margin-bottom: 12px; }
.tracking-key-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.tracking-key-form p { margin: 9px 0 0; color: var(--dim); font-size: 10px; line-height: 1.45; }
.tracking-forget-key { margin: 8px 0 0; padding: 0; border: 0; background: transparent; color: var(--gold); cursor: pointer; font: inherit; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }

.shipment-boundary {
  margin-bottom: 18px;
  padding: 11px 14px;
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--gold) 7%, transparent);
  color: var(--dim);
  font-size: 11px;
  line-height: 1.55;
}
.shipment-boundary strong { color: var(--mid); }

.shipment-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.shipment-filters { display: flex; flex: 1; align-items: center; gap: 9px; }
.shipment-filters select { width: auto; min-width: 128px; }
.shipment-filters .search-input { flex: 1; min-width: 180px; }
.shipment-view-toggle { display: inline-flex; overflow: hidden; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius); }
.shipment-view-toggle button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--dim); cursor: pointer; font: inherit; font-size: 12px; }
.shipment-view-toggle button:first-child { border-left: 0; }
.shipment-view-toggle button.is-active { background: color-mix(in srgb, var(--bright) 8%, transparent); color: var(--bright); }

.shipment-card { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-card); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.shipment-card:hover { transform: translateY(-1px); border-color: var(--shipment-line); box-shadow: 0 14px 34px color-mix(in srgb, var(--bg-dark) 45%, transparent); }
.shipment-card__main { padding: 19px; }
.shipment-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.shipment-card__identity { display: flex; min-width: 0; align-items: flex-start; gap: 12px; }
.shipment-card__icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid var(--shipment-line); border-radius: var(--radius); background: var(--shipment-soft); color: var(--gold); font-size: 11px; font-weight: 850; }
.shipment-card__identity h3 { margin: 0; color: var(--bright); font-size: 15px; line-height: 1.35; }
.shipment-card__identity p { margin: 4px 0 0; color: var(--dim); font-size: 11px; }
.shipment-status { flex: 0 0 auto; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; color: var(--mid); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.shipment-status[data-state="in_transit"] { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: var(--shipment-soft); color: var(--gold); }
.shipment-status[data-state="customs"], .shipment-status[data-state="cancelled"] { border-color: color-mix(in srgb, var(--red) 35%, transparent); color: var(--red); }
.shipment-status[data-state="received"], .shipment-status[data-state="delivered"] { border-color: color-mix(in srgb, var(--green) 35%, transparent); color: var(--green); }

.shipment-progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin: 18px 0 15px; }
.shipment-progress span { position: relative; padding-top: 15px; color: var(--dim); font-size: 9px; text-align: center; }
.shipment-progress span::before { content: ""; position: absolute; z-index: 2; top: 0; left: 50%; width: 8px; height: 8px; transform: translateX(-50%); border: 2px solid var(--border); border-radius: 50%; background: var(--bg-card); }
.shipment-progress span::after { content: ""; position: absolute; top: 4px; right: 50%; width: 100%; height: 1px; background: var(--border); }
.shipment-progress span:first-child::after { display: none; }
.shipment-progress span.is-complete::before { border-color: var(--gold); background: var(--gold); }
.shipment-progress span.is-complete::after { background: var(--gold); }
.shipment-progress span.is-current { color: var(--bright); font-weight: 700; }

.shipment-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.shipment-facts div { min-width: 0; padding: 9px 10px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--bg-dark) 48%, transparent); }
.shipment-facts span { display: block; color: var(--dim); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.shipment-facts strong { display: block; overflow: hidden; margin-top: 3px; color: var(--mid); font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.shipment-card__notes { margin: 0 0 12px; color: var(--dim); font-size: 11px; line-height: 1.55; }
.shipment-card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.shipment-card__actions .is-destructive { margin-left: auto; color: var(--red); }

.shipment-live { padding: 17px 19px; border-top: 1px solid var(--shipment-line); background: color-mix(in srgb, var(--gold) 5%, var(--bg-dark)); }
.shipment-live__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.shipment-live__head span { display: block; color: var(--dim); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.shipment-live__head strong { display: block; margin-top: 3px; color: var(--bright); font-size: 14px; }
.shipment-live__head time { color: var(--dim); font-size: 9px; }
.shipment-live__message { margin: 0; color: var(--mid); font-size: 11px; line-height: 1.55; }
.shipment-live__events { display: grid; gap: 9px; margin-top: 12px; }
.shipment-live__event { position: relative; padding-left: 16px; color: var(--mid); font-size: 11px; line-height: 1.45; }
.shipment-live__event::before { content: ""; position: absolute; top: 5px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.shipment-live__event small { display: block; color: var(--dim); font-size: 9px; }

#sampleTrackerMap[hidden] { display: none; }
#shipment-worldmap { width: 100%; height: 520px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.shipment-map-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 13px; color: var(--dim); font-size: 10px; }
.shipment-map-legend span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--gold); }
.shipment-map-legend .is-air::before { background: var(--slate); }
.shipment-map-legend .is-done::before { background: var(--green); }
.shipment-map-legend .is-customs::before { background: var(--amber); }
.shipment-map-legend em { margin-left: auto; font-style: normal; }

.tracker-form-modal h3 { margin: 0 34px 6px 0; color: var(--bright); font-size: 21px; }
.tracker-form-modal__intro { margin: 0 34px 20px 0; color: var(--dim); font-size: 11px; line-height: 1.55; }
.tracker-form-modal__close { position: absolute; top: 16px; right: 16px; padding: 4px; border: 0; background: transparent; color: var(--dim); cursor: pointer; font: inherit; font-size: 18px; line-height: 1; }
.tracker-form-modal__close:hover { color: var(--bright); }
.tracker-form-modal__boundary { padding: 10px 12px; border: 1px solid var(--shipment-line); border-radius: var(--r-sm); background: var(--shipment-soft); color: var(--dim); font-size: 10px; line-height: 1.45; }

@media (max-width: 860px) {
  .shipment-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tracking-connector__body { grid-template-columns: 1fr; }
  .shipment-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .shipment-hero { display: grid; padding: 19px; }
  .shipment-hero .btn { width: 100%; }
  .shipment-toolbar { align-items: stretch; flex-direction: column; }
  .shipment-filters { display: grid; grid-template-columns: 1fr 1fr; }
  .shipment-filters .search-input { grid-column: 1 / -1; width: 100%; }
  .shipment-view-toggle { align-self: flex-end; }
  .tracking-plan-grid { grid-template-columns: 1fr; }
  .tracking-key-row { grid-template-columns: 1fr; }
  .tracker-form-modal [style*="grid-template-columns:1fr 1fr"],
  .tracker-form-modal [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  .shipment-card__head { align-items: stretch; flex-direction: column; }
  .shipment-status { align-self: flex-start; }
  .shipment-progress span { font-size: 8px; }
  .shipment-card__actions .is-destructive { margin-left: 0; }
  #shipment-worldmap { height: 430px; }
}