/**
 * Kosmos Design System tokens — Kmart brand, Light mode
 * Source: https://www.figma.com/design/1SQO5rx2EcbPSj18MfO9GG/Kosmos-Design-System
 * Values resolved from Colour Mode (Light) + Brand (Kmart) variable collections.
 */
:root {
  /* Surface */
  --km-surface-text-primary: #131416;
  --km-surface-text-secondary: #5e656f;
  --km-surface-container: #ffffff;
  --km-surface-background: #f4f5f6;
  --km-surface-outline: #757e8a;
  --km-surface-outline-variant: #cdd1d5;
  --km-surface-on-variant: #5e656f;

  /* Primary — kmart-blue */
  --km-primary: #1768b0;
  --km-primary-hover: #12538c;
  --km-primary-active: #092b48;
  --km-primary-on: #ffffff;
  --km-primary-bg: #e4f0fb;
  --km-primary-300: #58a5e9;

  /* Secondary — cool-grey */
  --km-secondary: #1a374a;
  --km-secondary-bg: #edf3f6;
  --km-secondary-on: #ffffff;

  /* Status */
  --km-error: #dd182c;
  --km-error-bg: #fde8ea;
  --km-positive: #00752a;
  --km-positive-bg: #e6f4ea;
  --km-info: #006dbb;
  --km-info-bg: #ccf2fc;
  --km-warning: #ca3c11;
  --km-warning-container: #ee610f;
  --km-warning-bg: #fff1cc;

  /* Shape (Styles collection) */
  --km-radius-xs: 2px;
  --km-radius-sm: 4px;
  --km-radius-md: 8px;
  --km-radius-lg: 12px;
  --km-radius-xl: 16px;
  --km-radius-xxl: 24px;
  --km-radius-card: 8px;
  --km-radius-button: 200px; /* Kmart pill buttons often full-round via brand shape */

  /* Space */
  --km-space-xs: 2px;
  --km-space-sm: 4px;
  --km-space-md: 8px;
  --km-space-lg: 12px;
  --km-space-xl: 16px;
  --km-space-xxl: 24px;
  --km-space-xxxl: 32px;

  /* Type — AnkoModerat in Kosmos; Inter as web-safe stand-in */
  --km-font: "AnkoModerat", "Inter", "Segoe UI", system-ui, sans-serif;
  --km-fs-label: 12px;
  --km-fs-body-sm: 12px;
  --km-fs-body: 14px;
  --km-fs-body-lg: 16px;
  --km-fs-title: 18px;
  --km-fs-headline: 22px;
  --km-fs-display: 28px;

  /* App aliases */
  --bg: var(--km-surface-background);
  --surface: var(--km-surface-container);
  --text: var(--km-surface-text-primary);
  --text-secondary: var(--km-surface-text-secondary);
  --muted: var(--km-surface-on-variant);
  --border: var(--km-surface-outline-variant);
  --border-strong: var(--km-surface-outline);
  --radius: var(--km-radius-card);
  --radius-sm: var(--km-radius-md);
  --font: var(--km-font);
  --shadow: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: var(--km-fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

.app {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--km-space-xl) var(--km-space-xxl) 80px;
}

.app-main-search {
  max-width: 800px;
  margin: 0 auto;
}

.app-main-history {
  max-width: 1100px;
  margin: 0 auto;
}

.app-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--km-space-lg);
  margin-bottom: var(--km-space-md);
  padding-bottom: var(--km-space-md);
  border-bottom: 1px solid var(--border);
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-brand-logo {
  width: auto;
  height: 26px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.app-brand-name {
  font-size: var(--km-fs-body);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**
 * Order search — one card, two alternative paths joined by OR.
 * Tip is temporary onboarding; permanent copy stays short.
 */
.search-page {
  margin-top: var(--km-space-sm);
}

.search-page-head {
  margin-bottom: var(--km-space-lg);
}

.search-page-head h1 {
  margin: 0;
  font-size: var(--km-fs-headline);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.search-page-lead {
  margin: 4px 0 0;
  font-size: var(--km-fs-body);
  color: var(--text-secondary);
  line-height: 1.4;
}

.search-nz-escape {
  margin: 12px 2px 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.search-nz-escape a,
.search-nz-link {
  color: var(--km-primary);
  font-weight: 600;
  text-decoration: none;
}

.search-nz-escape a:hover,
.search-nz-link:hover {
  text-decoration: underline;
}

.search-nz-error {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--km-radius-md);
  background: var(--km-info-bg);
  border: 1px solid transparent;
}

.search-nz-error strong {
  display: block;
  font-size: var(--km-fs-body);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.search-nz-error p {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--text-secondary);
}

.search-nz-error .search-nz-link {
  font-size: var(--km-fs-body-sm);
}

.search-tip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--km-space-md);
  padding: 10px 12px;
  border-radius: var(--km-radius-md);
  background: var(--km-info-bg);
  color: var(--km-info);
}

.search-tip-icon {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 1px;
}

.search-tip-body {
  flex: 1;
  min-width: 0;
}

.search-tip-body strong {
  display: block;
  font-size: var(--km-fs-body);
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}

.search-tip-body p {
  margin: 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.35;
}

.search-tip-dismiss {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 2px;
  cursor: pointer;
  border-radius: var(--km-radius-sm);
  display: inline-flex;
  flex-shrink: 0;
}

.search-tip-dismiss:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

.search-tip-dismiss:focus-visible {
  outline: 2px solid var(--km-primary);
  outline-offset: 1px;
}

.search-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 16px 18px !important;
}

.brand-scope {
  margin: 0 0 14px;
  padding-bottom: 0;
  border-bottom: none;
}

.brand-scope.is-sole {
  margin: 0 0 14px;
}

.brand-scope-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.brand-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 112px;
  min-height: 42px;
  padding: 10px 14px;
  border: 2px solid var(--border);
  border-radius: var(--km-radius-md);
  background: var(--surface);
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

button.brand-tile:hover:not(.is-selected) {
  border-color: var(--border-strong);
}

.brand-tile.is-selected {
  border-color: var(--km-primary);
  background: var(--km-primary-bg);
}

/** Sole brand: selected look, but not a control until a second tile exists. */
.brand-tile.is-sole {
  cursor: default;
}

.brand-tile.is-sole:hover {
  border-color: var(--km-primary);
  background: var(--km-primary-bg);
}

.brand-tile:focus-visible {
  outline: 2px solid var(--km-primary);
  outline-offset: 2px;
}

.brand-tile-logo {
  width: auto;
  height: 18px;
  object-fit: contain;
  display: block;
}

.brand-tile-region {
  flex-shrink: 0;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  line-height: 1;
}

.search-section-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.search-path {
  margin: 0;
  padding: 0;
}

.text-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  min-height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--km-radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--km-fs-body);
}

.text-input::placeholder {
  color: var(--muted);
}

.text-input:focus {
  outline: 2px solid var(--km-primary);
  outline-offset: 1px;
  border-color: var(--km-primary);
}

.search-action-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.search-action-row .text-input {
  flex: 1;
  min-width: 0;
}

.search-action-row .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.search-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
}

.search-or-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.search-or-label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.search-field {
  margin: 0;
}

.search-date-block {
  margin-top: 12px;
}

.search-date-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.search-chip {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--km-radius-xxl);
  padding: 7px 14px;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  cursor: pointer;
  line-height: 1.2;
}

.search-chip:hover {
  border-color: var(--km-primary);
  background: var(--km-primary-bg);
  color: var(--km-primary);
}

.search-chip.is-selected {
  border-color: var(--km-primary);
  background: var(--km-primary);
  color: var(--km-primary-on);
}

.search-chip:focus-visible {
  outline: 2px solid var(--km-primary);
  outline-offset: 2px;
}

.search-custom-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.search-custom-dates .search-field label {
  display: block;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 560px) {
  .search-action-row {
    flex-direction: column;
  }

  .search-action-row .btn {
    width: 100%;
  }

  .search-custom-dates {
    grid-template-columns: 1fr;
  }
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: var(--km-space-xl);
  align-items: start;
}

.workspace-main-only {
  grid-template-columns: minmax(0, 1fr);
}

.workspace-main {
  min-width: 0;
}

.rail-fulfilment-block + .rail-fulfilment-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/** Labels carry hierarchy — destinations stay normal body weight. */
.rail-fulfilment-method {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 4px;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.rail-fulfilment-method-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-secondary);
}

.rail-fulfilment-method-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.rail-fulfilment-dest {
  margin: 0;
  font-size: var(--km-fs-body-sm);
  font-weight: 400;
  color: var(--text);
  line-height: 1.4;
}

.rail-fulfilment-dest-meta {
  font-weight: 400;
  color: var(--text-secondary);
}

.rail-fulfilment-addr {
  margin: 2px 0 0;
  font-size: var(--km-fs-body-sm);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.4;
}

.rail-fulfilment-dest.rail-copy-row,
.rail-fulfilment-addr.rail-copy-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.rail-fulfilment-dest.rail-copy-row > p,
.rail-fulfilment-addr.rail-copy-row > p {
  margin: 0;
  min-width: 0;
  flex: 1 1 auto;
}

/** Secondary attributes under Deliver to. */
.rail-delivery-meta {
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail-delivery-meta-line {
  margin: 0;
  font-size: var(--km-fs-body-sm);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.35;
}

.rail-delivery-service-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.rail-fulfilment-region {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.rail-fulfilment-service {
  color: var(--text-secondary);
  font-size: var(--km-fs-body-sm);
  font-weight: 400;
}

.rail-delivery-meta-sep {
  color: var(--muted);
  font-size: 12px;
}

.rail-delivery-meta-note {
  margin: 0;
  font-size: var(--km-fs-body-sm);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.35;
}

.totals-row.refund-destination {
  margin-top: 4px;
  font-size: var(--km-fs-body-sm);
  font-weight: 400;
  color: var(--text-secondary);
}

.totals-row.review-case-destination {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  align-items: flex-start;
  font-size: var(--km-fs-body-sm);
  font-weight: 400;
  color: var(--text-secondary);
}

.review-case-destination-value {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  text-align: right;
  color: var(--text);
  font-weight: 600;
}

.review-case-destination-primary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.review-case-destination-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--muted);
}

.review-case-destination-icon svg {
  display: block;
  width: 13px;
  height: 13px;
}

.review-case-destination-label {
  color: var(--text);
  font-weight: 600;
}

button.review-case-destination-ref {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}

button.review-case-destination-ref:hover,
button.review-case-destination-ref:focus-visible {
  text-decoration-color: currentColor;
}

.review-case-destination-sep {
  color: var(--muted);
  font-weight: 400;
}

.review-case-destination-action {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--km-primary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.review-case-destination-action:hover,
.review-case-destination-action:focus-visible {
  color: var(--text);
}

.refund-confirm-actions {
  justify-content: flex-end;
}

/* —— Cancel workflow —— */
.cancel-intent h2,
.cancel-panel h2 {
  margin: 0 0 8px;
  font-size: var(--km-fs-body);
  font-weight: 700;
}

.cancel-intent-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cancel-intent-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--km-radius-md, 8px);
  background: var(--surface);
  cursor: pointer;
}

.cancel-intent-option.is-selected {
  border-color: color-mix(in srgb, var(--km-primary) 45%, var(--border));
  background: color-mix(in srgb, var(--km-primary) 6%, var(--surface));
}

.cancel-intent-option.is-unavailable {
  opacity: 0.55;
  cursor: not-allowed;
}

.cancel-intent-option input {
  margin-top: 2px;
  flex-shrink: 0;
}

.cancel-intent-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cancel-intent-title {
  font-size: var(--km-fs-body-sm);
  font-weight: 700;
  color: var(--text);
}

.cancel-intent-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.cancel-panel-lead {
  margin: 0 0 12px;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.cancel-summary-seller {
  margin: 0 0 14px;
}

.cancel-summary-seller:last-child {
  margin-bottom: 0;
}

.cancel-summary-seller-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin: 0 0 8px;
  font-size: var(--km-fs-body-sm);
}

.cancel-summary-seller-head strong {
  font-weight: 700;
  color: var(--text);
}

.cancel-summary-seller-head span {
  color: var(--text-secondary);
  font-weight: 500;
}

.cancel-summary-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cancel-summary-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.cancel-line-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.cancel-line-item:last-child {
  border-bottom: none;
}

.cancel-line-item.is-unavailable {
  opacity: 0.92;
}

.cancel-line-item.is-unavailable .item-name {
  color: var(--text-secondary);
}

.cancel-line-item.is-selected {
  background: color-mix(in srgb, var(--km-primary) 4%, transparent);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 6px;
}

.cancel-action-item.is-selected {
  background: color-mix(in srgb, var(--km-primary) 4%, transparent);
}

.cancel-ship-elig,
.cancel-line-elig {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.35;
}

.cancel-line-elig {
  margin-top: 3px;
  font-weight: 500;
}

.shipment-block-cancel.is-disabled-ship .refund-ship-title-row h3 {
  color: var(--text);
}

/**
 * Cancel selector — no shipment cards. Selectable lines are white rows;
 * ineligible lines sit on the grey seller body. Grouping is divider + space.
 */
.shipment-block-cancel.is-disabled-ship,
.shipment-block-cancel.is-select-ship {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

.seller-card-cancel .seller-body:has(> .shipment-block-cancel.is-disabled-ship),
.seller-card-cancel .seller-body:has(> .shipment-block-cancel.is-select-ship) {
  gap: 0;
}

.seller-card-cancel .seller-body > .shipment-block-cancel.is-disabled-ship + .shipment-block-cancel,
.seller-card-cancel .seller-body > .shipment-block-cancel.is-select-ship + .shipment-block-cancel {
  margin-top: 18px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.shipment-block-cancel.is-disabled-ship .refund-ship-body,
.shipment-block-cancel.is-select-ship .refund-ship-body {
  margin-top: 4px;
}

.shipment-block-cancel.is-select-ship .cancel-select-items {
  display: flex;
  flex-direction: column;
  background: transparent;
}

.shipment-block-cancel.is-select-ship .cancel-action-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin-top: 8px;
  color: var(--text);
}

.shipment-block-cancel.is-select-ship .refund-handoff-item {
  padding-left: 0;
  padding-right: 0;
}

.cancel-elig {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
}

.cancel-elig.is-eligible {
  color: var(--km-positive);
}

.cancel-elig.is-full-only {
  color: var(--km-warning, #b35c00);
}

.cancel-elig.is-blocked,
.cancel-elig.is-mirakl {
  color: var(--muted);
}

.cancel-elig-detail {
  margin: 1px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.35;
}

.cancel-reason-notes {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cancel-reason-field label,
.cancel-notes-field label {
  display: block;
  margin: 0 0 4px;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
}

.cancel-notes-input {
  margin: 0;
}

.cancel-review-notes {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.cancel-review-notes-label {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.cancel-review-notes p {
  margin: 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text);
  line-height: 1.4;
  white-space: pre-wrap;
}

.cancel-entry-banner h2 {
  margin: 0 0 4px;
}

.cancel-entry-banner .help {
  margin: 0;
}

.cancel-select-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-together-note {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.cancel-review-lead {
  margin: 0 0 10px;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  color: var(--text);
}

.cancel-review-excluded {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.cancel-review-excluded-label {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.cancel-review-excluded ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.45;
}

.context-rail {
  position: sticky;
  top: var(--km-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--km-space-md);
}

.rail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--km-radius-card);
  padding: var(--km-space-lg) var(--km-space-xl);
}

.rail-card h2,
.rail-section-title {
  margin: 0 0 var(--km-space-md);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.rail-section-title-with-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/**
 * Customer card — identity + verification tightly grouped; contact and history
 * sit in clearer bands below.
 */
.rail-customer-identity {
  margin: 0;
}

.rail-customer-contact {
  margin-top: 8px;
}

.rail-customer-contact .rail-contact {
  margin-top: 0;
}

.rail-customer-contact .rail-contact + .rail-contact {
  margin-top: 4px;
}

.rail-customer-context {
  margin-top: 12px;
}

.rail-customer-context .rail-context-links {
  margin-top: 0;
}

.rail-customer-context .rail-profile-note {
  margin-top: 0;
  margin-bottom: 6px;
}

.rail-card-compact .rail-subhead {
  margin-top: var(--km-space-lg);
}

.rail-card-compact .rail-subhead-first {
  margin-top: 0;
}

.rail-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--km-fs-body);
  font-weight: 700;
  color: var(--text);
}

.rail-onepass {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.rail-onepass-logo {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 4px;
}

.rail-contact {
  margin: 4px 0 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text);
  font-weight: 500;
}

.rail-contact a,
.rail-contact-action {
  color: var(--km-primary);
  text-decoration: none;
  font-weight: 600;
}

.rail-contact a:hover,
.rail-contact-action:hover {
  text-decoration: underline;
}

.rail-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rail-list > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--km-space-md);
  align-items: baseline;
}

.rail-list dt {
  margin: 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.rail-list dd {
  margin: 0;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  text-align: right;
  color: var(--text);
}

.rail-list a {
  color: var(--km-primary);
  text-decoration: none;
  font-weight: 600;
}

.rail-list a:hover {
  text-decoration: underline;
}

.rail-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--km-space-lg) 0;
}

.rail-subhead {
  margin: 0 0 var(--km-space-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.rail-address {
  margin: 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text);
  line-height: 1.5;
  font-weight: 500;
}

.rail-address > p {
  margin: 0;
}

.rail-context-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 10px 0 0;
}

.rail-context-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--km-primary);
  font: inherit;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.rail-context-link:hover {
  text-decoration: underline;
}

/** Primary case action — Create / Update. */
.rail-context-link.is-primary {
  color: var(--km-primary);
  font-weight: 600;
}

/** Secondary case action — Link existing / Switch. */
.rail-context-link.is-secondary {
  color: var(--text-secondary);
  font-weight: 500;
}

.rail-context-link.is-secondary:hover,
.rail-context-link.is-secondary:focus-visible {
  color: var(--text);
}

/** History navigation — quieter than actionable contact / case CTAs. */
.rail-context-link.is-nav {
  color: var(--text-secondary);
  font-weight: 500;
}

.rail-context-link.is-nav:hover,
.rail-context-link.is-nav:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

.rail-context-sep {
  color: var(--muted);
  font-size: var(--km-fs-body-sm);
}

.rail-profile-note {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

/**
 * Servicing case — where Guide records this interaction.
 * Same card chrome as Customer / Order information; content carries the weight.
 * Case number is the View navigation; bottom row is association management only.
 */
.rail-case-icon {
  display: inline-flex;
  color: var(--km-primary);
  flex-shrink: 0;
  vertical-align: -2px;
}

.rail-case-icon svg {
  display: block;
}

.rail-case-card .rail-case-id,
.rail-case-card .rail-case-status {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: var(--km-fs-body);
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.rail-case-id .copy-field {
  width: 20px;
  height: 20px;
}

.workflow-case-cue .copy-field {
  width: 18px;
  height: 18px;
  color: var(--muted);
}

.workflow-case-cue .copy-field .copy,
.rail-case-id .copy-field .copy {
  width: 12px;
  height: 12px;
}

.rail-case-id-link {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--km-primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
}

.rail-case-id-link:hover,
.rail-case-id-link:focus-visible {
  text-decoration: underline;
}

.rail-case-card .rail-case-meta,
.rail-case-card .rail-case-note {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.rail-case-evidence-ref {
  margin: 6px 0 0;
  font-size: var(--km-fs-body-sm);
  line-height: 1.35;
  color: var(--text-secondary);
}

.rail-case-evidence-meta {
  color: var(--text-secondary);
  font-weight: 500;
}

.rail-case-evidence-block {
  margin-top: 6px;
}

.rail-case-evidence-block .rail-case-evidence-ref {
  margin: 0;
}

.rail-case-evidence-meta-line {
  margin: 3px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--text-secondary);
  font-weight: 500;
}

/**
 * Case recommenders — same white card as Fulfilment.
 * Noticeability comes from bold status copy + blue links, not a coloured alert state.
 */
.rail-case-card.is-evidence-order .rail-case-status,
.rail-case-card.is-evidence-recent .rail-case-status {
  font-weight: 700;
  color: var(--text);
}

.rail-case-linked-tag {
  font-weight: 650;
  color: var(--text-secondary);
}

.rail-case-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
}

.rail-case-review-btn.btn.btn-outline {
  min-height: 34px;
  padding: 7px 12px;
  font-size: var(--km-fs-body-sm);
  font-weight: 650;
}

.rail-case-cta .rail-context-link {
  margin: 0;
  padding: 0;
}

.create-case-dup-card .create-case-dup-case {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--km-primary-bg);
  border: 1px solid color-mix(in srgb, var(--km-primary) 22%, var(--border));
}

.create-case-dup-id {
  margin: 0;
  font-size: var(--km-fs-body);
  font-weight: 700;
  color: var(--text);
}

.create-case-dup-meta,
.create-case-dup-when {
  margin: 4px 0 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.create-case-dup-actions {
  flex-direction: column;
  align-items: stretch;
}

.create-case-dup-actions .btn {
  width: 100%;
}

.customer-case-card.is-order-match {
  border-color: color-mix(in srgb, var(--km-primary) 35%, var(--border));
  background: color-mix(in srgb, var(--km-primary-bg) 70%, var(--km-surface-container));
}

.customer-case-order-badge {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--km-primary);
}

.customer-case-order.is-this-order {
  font-weight: 650;
  color: var(--km-primary);
}

.rail-case-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 8px 0 0;
}

.rail-case-actions .rail-context-link.is-quiet {
  color: var(--text-secondary);
  font-weight: 500;
}

.rail-case-actions .rail-context-link.is-quiet:hover,
.rail-case-actions .rail-context-link.is-quiet:focus-visible {
  color: var(--text);
}

/**
 * Customer-context drawer — right panel keeps Order Detail visible underneath.
 * Gateway for recent orders / cases; not a permanent CRM strip on the page.
 */
.customer-drawer-root {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.customer-drawer-backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: color-mix(in srgb, var(--km-secondary, #1a1a1a) 28%, transparent);
  cursor: pointer;
  pointer-events: auto;
}

.customer-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(400px, 100vw);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px color-mix(in srgb, var(--km-secondary, #1a1a1a) 12%, transparent);
  pointer-events: auto;
}

.customer-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.customer-drawer-head h2 {
  margin: 0;
  font-size: var(--km-fs-body-lg);
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}

/** Lookup identity — email is the search key; name above is recognition only. */
.customer-drawer-identity {
  margin: 4px 0 0;
  font-size: var(--km-fs-body-sm);
  font-weight: 500;
  color: var(--text-secondary);
  word-break: break-all;
}

.customer-drawer-empty {
  padding: 8px 0 4px;
}

.customer-drawer-empty strong {
  display: block;
  margin-bottom: 6px;
  font-size: var(--km-fs-body);
  color: var(--text);
}

.customer-drawer-empty p {
  margin: 0;
  font-size: var(--km-fs-body-sm);
  line-height: 1.4;
  color: var(--text-secondary);
}

.customer-drawer-close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: -4px -6px 0 0;
  padding: 0;
  border: none;
  border-radius: var(--km-radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.customer-drawer-close:hover,
.customer-drawer-close:focus-visible {
  color: var(--text);
  background: var(--km-surface-background);
  outline: none;
}

.customer-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 14px 20px 20px;
}

.customer-drawer-foot {
  padding: 12px 20px 18px;
  border-top: 1px solid var(--border);
}

.customer-drawer-count {
  margin: 0 0 12px;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.customer-drawer-help {
  margin: -6px 0 14px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.customer-drawer-caution {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: var(--km-radius-sm);
  background: color-mix(in srgb, var(--km-warning-bg) 55%, var(--surface));
  font-size: 12px;
  line-height: 1.4;
  color: var(--text);
}

.customer-order-list,
.customer-case-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.customer-order-card,
.customer-case-card {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--km-radius-md);
  background: var(--surface);
  text-align: left;
  color: inherit;
  font: inherit;
}

.customer-order-card.is-nav,
.customer-case-card:is(button) {
  cursor: pointer;
}

.customer-order-card.is-nav:hover,
.customer-case-card:is(button):hover {
  border-color: var(--border-strong);
  background: color-mix(in srgb, var(--km-surface-background) 55%, var(--surface));
}

.customer-order-card.is-nav:hover .customer-order-chevron {
  opacity: 1;
  color: var(--km-primary);
}

/** Current order — recognition only; never a navigation target. */
.customer-order-card.is-current {
  cursor: default;
  border-color: color-mix(in srgb, var(--km-primary) 35%, var(--border));
  background: color-mix(in srgb, var(--km-primary-bg) 42%, var(--surface));
}

.customer-order-date,
.customer-case-when {
  font-size: 12px;
  color: var(--text-secondary);
}

.customer-order-id,
.customer-case-id {
  margin-top: 2px;
  font-size: var(--km-fs-body);
  font-weight: 700;
  color: var(--text);
}

.customer-order-soldby,
.customer-case-order {
  margin-top: 2px;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.customer-order-fulfilment-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin-top: 3px;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.35;
}

.customer-order-fulfilment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.customer-order-fulfilment-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: inherit;
  opacity: 0.85;
}

.customer-order-fulfilment-icon svg {
  display: block;
  width: 13px;
  height: 13px;
}

.customer-order-fulfilment-sep {
  color: var(--muted);
  padding: 0 2px;
}

.customer-order-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.customer-order-status {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.customer-order-end {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.customer-order-total {
  font-weight: 700;
  font-size: var(--km-fs-body);
  color: var(--text);
}

.customer-order-chevron {
  display: inline-flex;
  color: var(--muted);
  opacity: 0.55;
  transition: opacity 120ms ease, color 120ms ease;
}

.customer-order-chevron svg {
  display: block;
}

.customer-order-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--km-primary);
}

.customer-case-state {
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  color: var(--text);
}

.customer-case-card.is-open .customer-case-state {
  color: var(--km-warning);
}

.customer-case-view {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  color: var(--km-primary);
}

.customer-case-group {
  margin-top: 14px;
}

.customer-case-group:first-child {
  margin-top: 0;
}

.customer-case-group-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.customer-case-card.is-linked {
  cursor: default;
  border-color: color-mix(in srgb, var(--km-primary) 35%, var(--border));
  background: color-mix(in srgb, var(--km-primary-bg) 42%, var(--surface));
}

.customer-case-card.is-linked:hover {
  border-color: color-mix(in srgb, var(--km-primary) 35%, var(--border));
  background: color-mix(in srgb, var(--km-primary-bg) 42%, var(--surface));
}

.customer-case-card.is-closed {
  cursor: default;
  opacity: 0.85;
}

.customer-case-link-btn {
  margin-top: 10px;
}

.customer-case-assoc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--km-primary) 18%, var(--border));
}

.customer-case-assoc-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--km-primary);
  line-height: 1.3;
}

.customer-case-assoc-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: inherit;
}

.customer-case-assoc-icon svg {
  display: block;
  width: 13px;
  height: 13px;
}

.customer-case-unlink {
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}

.customer-case-unlink:hover,
.customer-case-unlink:focus-visible {
  color: var(--text);
  text-decoration: underline;
}

.customer-case-closed-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Prototype banner removed — product hierarchy stands on its own. */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--km-space-lg);
  margin-bottom: var(--km-space-md);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--km-space-sm);
  font-size: var(--km-fs-body-sm);
  color: var(--km-primary);
  font-weight: 500;
}

.crumbs span {
  color: var(--muted);
  font-weight: 400;
}

.crumbs .here {
  color: var(--text-secondary);
  font-weight: 600;
}

.agent {
  display: flex;
  align-items: center;
  gap: var(--km-space-md);
  color: var(--text-secondary);
  font-size: var(--km-fs-body-sm);
  font-weight: 500;
}

/**
 * Sticky workspace switcher — stays available on long Detail/Track pages.
 * Copy affordances live on fields themselves (order no., email, phone, address, tracking).
 */
.workspace-chrome {
  position: sticky;
  top: 0;
  z-index: 20;
  margin: 0 0 var(--km-space-md);
  padding: var(--km-space-md) 0 0;
  background: var(--bg);
}

/**
 * Inline copy — subtle persistent icon on high-frequency clipboard values.
 * Discoverability over hover-only purity for Care throughput.
 */
.copy-field {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--km-radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  vertical-align: middle;
}

.copy-field:hover,
.copy-field:focus-visible {
  color: var(--km-primary);
  background: var(--km-primary-bg);
  outline: none;
}

.copy-field .copy {
  display: block;
}

.rail-copy-row {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.rail-copy-row > :first-child {
  flex: 1;
  min-width: 0;
}

.rail-copy-row .copy-field {
  margin-top: 1px;
}

.hero-title-heading {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}

.hero-title-heading h1 {
  margin: 0;
}

.hero-title-heading .copy-field {
  margin-top: 2px;
}

/** Order-level status — attached to the order entity, not the actions menu. */
.hero-title-heading .badge-status-lg {
  margin-top: 1px;
}

/**
 * Workspace tabs — denser Care version of the customer Online orders / Store receipts pattern.
 * Full-width rail; active tab reinforced with icon + semibold + blue underline + subtle surface.
 */
.views {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin: 0;
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}

.views-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 180px;
  max-width: 240px;
  flex: 0 1 220px;
  min-height: 50px;
  padding: 14px 20px;
  margin-bottom: -1px;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: var(--km-fs-body);
  line-height: 1.2;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  box-sizing: border-box;
}

.views-tab-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: inherit;
}

.views-tab-icon svg {
  display: block;
}

.views-tab-label {
  min-width: 0;
}

.views-tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--km-surface-background) 80%, transparent);
}

.views-tab[aria-selected="true"] {
  color: var(--km-primary);
  border-bottom-color: var(--km-primary);
  background: color-mix(in srgb, var(--km-primary-bg) 55%, transparent);
}

.views-tab[aria-selected="true"]:hover {
  color: var(--km-primary);
  background: var(--km-primary-bg);
}

.views-tab:focus-visible {
  outline: 2px solid var(--km-primary);
  outline-offset: -2px;
  z-index: 1;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--km-radius-card);
  margin-bottom: var(--km-space-lg);
}

.card-pad {
  padding: var(--km-space-xl);
}

.card-accent {
  border-top: 3px solid var(--km-primary);
}

.hero-card {
  padding-top: var(--km-space-lg);
  padding-bottom: var(--km-space-lg);
}

.hero {
  display: block;
}

.hero-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--km-space-md) var(--km-space-lg);
}

.hero-title-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/**
 * Servicing context — quiet linked-case cue beside Actions.
 * Absent when unlinked; case management stays in Case card / Actions.
 */
.hero-case-linked {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: var(--km-positive);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  cursor: help;
}

.hero-case-linked-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: inherit;
}

.hero-case-linked-icon svg {
  display: block;
  width: 13px;
  height: 13px;
}

.hero-main h1 {
  margin: 0;
  font-size: var(--km-fs-headline);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.hero-main .sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: var(--km-fs-body-sm);
  font-weight: 400;
  line-height: 1.35;
}

.hero-sub-sep {
  color: var(--text-secondary);
  padding: 0 2px;
}

.hero-fulfilment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  font-weight: inherit;
  white-space: nowrap;
}

.hero-fulfilment-icon {
  display: inline-flex;
  color: inherit;
  opacity: 0.85;
  flex-shrink: 0;
}

.hero-fulfilment-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.hero-fulfilment-plus {
  color: inherit;
  padding: 0 2px;
  font-weight: inherit;
}

/**
 * 3-step verification — ✓ cue is persistent; green outline is temporary attention.
 * Outline holds ~5s on handoff, then fades to the standard card border.
 */
.rail-verify-quiet {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0;
  color: var(--km-positive);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  cursor: help;
}

.rail-verify-quiet-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: inherit;
}

.rail-verify-quiet-icon svg {
  display: block;
  width: 12px;
  height: 12px;
}

.rail-customer-card {
  transition: border-color 1.6s ease-out, box-shadow 1.6s ease-out;
}

.rail-customer-card.is-verify-highlight {
  border-color: color-mix(in srgb, var(--km-positive) 48%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--km-positive) 14%, transparent),
    0 0 14px color-mix(in srgb, var(--km-positive) 12%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .rail-customer-card {
    transition: none;
  }
}

/**
 * Order stage — hero + content.
 */
.order-stage {
  position: relative;
}

/** Supporting roll-up — quieter than the order status badge answer above. */
.progress-line {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--muted);
}

/* Kosmos badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--km-radius-sm);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

.badge-amber,
.badge-warning {
  background: var(--km-warning-bg);
  color: var(--km-warning);
  border: 1px solid transparent;
}

.badge-neutral {
  background: var(--km-surface-background);
  color: var(--km-surface-text-secondary);
  border: 1px solid var(--border);
}

.badge-primary,
.badge-teal {
  background: var(--km-primary-bg);
  color: var(--km-primary);
  border: 1px solid transparent;
}

.badge-positive {
  background: var(--km-positive-bg);
  color: var(--km-positive);
  border: 1px solid transparent;
}

.badge-filled {
  background: var(--km-primary);
  color: var(--km-primary-on);
}

/** Order-level status — one step larger than shipment badges. */
.badge-status-lg {
  font-size: 13px;
  line-height: 18px;
  padding: 5px 12px;
  letter-spacing: 0.01em;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--km-space-md) var(--km-space-xl);
  margin-top: var(--km-space-xl);
  padding-top: var(--km-space-xl);
  border-top: 1px solid var(--border);
}

.facts-group {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--km-space-md) var(--km-space-xxl);
}

.facts-composition {
  flex: 1 1 auto;
  min-width: 160px;
  max-width: none;
}

.facts-financial {
  flex: 0 0 auto;
  gap: var(--km-space-md) var(--km-space-xxl);
  margin-left: auto;
}

.fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 72px;
}

.fact .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.fact .value {
  font-size: var(--km-fs-body-lg);
  font-weight: 650;
  color: var(--text);
}

/** Payment is financial context, but supporting — quieter than Total / Refunded. */
.fact-payment .value,
.fact .value.value-secondary {
  font-size: var(--km-fs-body);
  font-weight: 500;
  color: var(--text-secondary);
}

.fact .value-row {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.fact-refunded .value {
  color: var(--text);
}

.fact-jump {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--km-primary);
  font: inherit;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

.fact-jump:hover,
.fact-jump:focus-visible {
  text-decoration: underline;
  outline: none;
}

/** Channel/brand identities — first in the facts narrative. */
.fact-sold-by {
  min-width: 0;
  width: 100%;
}

.sold-by-labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  min-height: 24px;
}

.sold-by-label {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--km-radius-sm);
  font-size: 12px;
  font-weight: 650;
  line-height: 18px;
  white-space: nowrap;
}

.sold-by-kmart {
  background: var(--km-primary-bg);
  color: var(--km-primary);
}

.sold-by-target {
  background: #fce4ec;
  color: #c2185b;
}

.sold-by-marketplace {
  background: var(--km-surface-background);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.fact-split {
  width: 1px;
  align-self: stretch;
  min-height: 36px;
  background: var(--border);
  flex-shrink: 0;
}

.hero-card .facts {
  margin-top: var(--km-space-lg);
  padding-top: var(--km-space-lg);
}

/** Compact Actions ▾ in order header — shortcut for experienced agents. */
.order-actions-menu {
  position: relative;
}

.order-actions-trigger {
  min-width: 0;
}

.order-actions-chevron {
  transition: transform 0.15s ease;
}

.order-actions-menu.is-open .order-actions-chevron {
  transform: rotate(180deg);
}

.order-actions-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  min-width: 220px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--km-radius-md);
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(19, 20, 22, 0.12);
}

.order-actions-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: var(--km-radius-sm);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.order-actions-menu-item:hover {
  background: var(--km-primary-bg);
  color: var(--km-primary);
}

.order-actions-menu-item .btn-icon {
  display: inline-flex;
  color: inherit;
}

.order-actions-menu-item .btn-icon svg {
  display: block;
}

/** Navigation item — same menu, distinct from mutating workflows below. */
.order-actions-menu-item.is-nav {
  color: var(--km-primary);
}

.order-actions-menu-item.is-case {
  color: var(--text);
}

.order-actions-menu-sep {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}

/** Utilitarian end-of-page actions — order workflows + case action. */
.order-actions-card {
  margin-top: var(--km-space-lg);
}

.order-actions-card h2 {
  margin: 0;
  font-size: var(--km-fs-body-lg);
  font-weight: 700;
}

.order-actions-btns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: var(--km-space-md);
}

.order-actions-btns-sep {
  width: 1px;
  align-self: stretch;
  min-height: 24px;
  margin: 0 2px 0 4px;
  background: var(--border);
}

.order-actions-case .btn-icon {
  color: inherit;
}

/** Recommended case path when Guide found a match — first, slightly stronger outline. */
.order-actions-case.is-emphasized.btn.btn-outline {
  border-color: var(--km-primary);
  color: var(--km-primary);
  font-weight: 700;
}

.order-actions-case.is-emphasized.btn.btn-outline:hover {
  background: var(--km-primary-bg);
  border-color: var(--km-primary-hover);
  color: var(--km-primary-hover);
}

.order-actions-menu-item.is-case.is-emphasized {
  color: var(--km-primary);
  font-weight: 700;
}

/** View shortcut — text link, not a primary outlined button. */
.order-actions-track {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 6px 4px;
  border: none;
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  white-space: nowrap;
}

.order-actions-track:hover,
.order-actions-track:focus-visible {
  color: var(--km-primary);
  text-decoration: underline;
}

.order-actions-track-icon {
  display: inline-flex;
  color: inherit;
  opacity: 0.85;
}

.order-actions-track-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.order-actions-btns .btn.btn-md {
  min-height: 36px;
  padding: 7px 14px;
}

.section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--km-space-lg);
  margin: var(--km-space-xxl) 0 var(--km-space-md);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.seller-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--km-space-lg);
  padding: var(--km-space-lg) var(--km-space-xl);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  border-radius: var(--km-radius-card) var(--km-radius-card) 0 0;
}

button.seller-toggle,
.seller-head.seller-toggle {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--border);
  margin: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background-color 120ms ease;
}

button.seller-toggle:hover,
.seller-head.seller-toggle:hover {
  background: var(--km-primary-bg);
}

button.seller-toggle:hover .seller-chevron,
.seller-head.seller-toggle:hover .seller-chevron {
  color: var(--km-primary);
}

button.seller-toggle:focus-visible,
.seller-head.seller-toggle:focus-visible {
  outline: 2px solid var(--km-primary);
  outline-offset: -2px;
  background: var(--km-primary-bg);
}

.seller-card.is-collapsed .seller-head,
.seller-card.is-collapsed button.seller-toggle {
  border-bottom: none;
  border-radius: var(--km-radius-card);
}

.seller-head-main {
  min-width: 0;
  flex: 1;
}

.seller-title {
  font-weight: 600;
  font-size: var(--km-fs-title, 18px);
  color: var(--text);
}

.seller-meta {
  margin-top: var(--km-space-sm);
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.seller-eta {
  margin: 4px 0 0;
  font-size: var(--km-fs-body-sm);
  font-weight: 500;
  line-height: 1.35;
}

.seller-eta-label {
  color: var(--muted);
  font-weight: 500;
}

.seller-eta-value {
  color: var(--text-secondary);
  font-weight: 550;
}

.seller-chevron {
  flex-shrink: 0;
  align-self: center;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  width: 1.25em;
  text-align: center;
  transition: color 120ms ease;
}

/* Order Detail — aggregated item list (not shipment/package hierarchy) */
.agg-items {
  display: flex;
  flex-direction: column;
}

.agg-items-head {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 72px minmax(0, 1.4fr) 96px;
  gap: var(--km-space-md) var(--km-space-lg);
  padding: 10px var(--km-space-xl);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--km-surface-background);
}

.agg-item {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 72px minmax(0, 1.4fr) 96px;
  gap: var(--km-space-md) var(--km-space-lg);
  align-items: start;
  padding: 14px var(--km-space-xl);
  border-bottom: 1px solid var(--border);
}

.agg-item:last-child {
  border-bottom: none;
}

.agg-item-product {
  display: flex;
  align-items: flex-start;
  gap: var(--km-space-md);
  min-width: 0;
}

.agg-item-body {
  min-width: 0;
}

.agg-item-qty,
.agg-item-status,
.agg-item-total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.agg-item-total {
  text-align: right;
  align-items: flex-end;
}

.agg-item-qty .agg-col-value {
  font-weight: 700;
  font-size: var(--km-fs-body-lg);
  color: var(--text);
}

.status-alloc-list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 0;
  font-size: var(--km-fs-body-sm);
  line-height: 1.4;
}

.status-alloc {
  display: inline;
  white-space: nowrap;
}

.status-alloc-qty {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.status-alloc-label {
  font-weight: 500;
  color: var(--text-secondary);
}

.status-alloc-sep {
  margin: 0 0.45em;
  color: var(--muted);
  font-weight: 400;
}

.status-alloc-danger .status-alloc-qty,
.status-alloc-danger .status-alloc-label {
  color: var(--km-error);
}

.status-alloc-danger .status-alloc-qty {
  font-weight: 700;
}

.status-alloc-warn .status-alloc-qty,
.status-alloc-warn .status-alloc-label {
  color: var(--km-warning);
}

.status-alloc-warn .status-alloc-qty {
  font-weight: 700;
}

.agg-item-total .agg-col-value {
  font-weight: 700;
  font-size: var(--km-fs-body);
  white-space: nowrap;
}

.agg-item .agg-col-label {
  display: none;
}

.agg-items-head .agg-item-total {
  text-align: right;
}

@media (max-width: 720px) {
  .agg-items-head {
    display: none;
  }

  .agg-item {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "product total"
      "qty qty"
      "status status";
    gap: 6px 12px;
  }

  .agg-item-product {
    grid-area: product;
  }

  .agg-item-qty {
    grid-area: qty;
  }

  .agg-item-status {
    grid-area: status;
  }

  .agg-item-total {
    grid-area: total;
  }

  .agg-item .agg-col-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

.addr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--km-space-xl);
  padding: var(--km-space-xl);
  border-bottom: 1px solid var(--border);
}

.addr-grid .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--km-space-sm);
}

.addr-grid .value {
  font-weight: 600;
}

.addr-grid .detail {
  color: var(--text-secondary);
  font-size: var(--km-fs-body-sm);
  margin-top: 2px;
}

.addr-grid a {
  color: var(--km-primary);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--km-fs-body-sm);
}

.addr-grid a:hover {
  text-decoration: underline;
}

.ship-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--km-space-lg) var(--km-space-xl) 0;
  background: var(--surface);
  position: relative;
}

.ship-head > .ship-check {
  position: absolute;
  left: var(--km-space-xl);
  top: calc(var(--km-space-lg) + 4px);
}

.ship-head:has(> .ship-check) {
  padding-left: calc(var(--km-space-xl) + 28px);
}

.ship-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--km-space-md) var(--km-space-lg);
}

/** Multi-package identity cue — left of shipment title row, not a control. */
.ship-pkg-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--km-fs-body-sm);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.3;
  white-space: nowrap;
}

.ship-pkg-count-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: inherit;
}

.ship-pkg-count-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.ship-head h3 {
  margin: 0;
  font-size: var(--km-fs-body-lg);
  font-weight: 600;
}

.ship-store {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: none;
}

a.ship-store {
  color: var(--km-primary);
}

a.ship-store:hover {
  text-decoration: underline;
}

.ship-store svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.ship-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 2px;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.ship-meta > span,
.ship-meta > a {
  margin-right: 2px;
}

.meta-sep {
  margin: 0 6px;
  color: var(--muted);
}

.package-stack,
.pkg-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px var(--km-space-xl) var(--km-space-xl);
}

.ship-expanded-body .package-stack,
.ship-expanded-body .pkg-stack {
  padding-left: 0;
  padding-right: 0;
}

.untracked {
  display: flex;
  align-items: center;
  gap: var(--km-space-md);
  margin: var(--km-space-lg) var(--km-space-xl) 0;
  padding: var(--km-space-md) var(--km-space-lg);
  border-radius: var(--km-radius-md);
  background: var(--km-primary-bg);
  color: var(--km-primary);
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
}

.stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--km-space-xs);
  padding: var(--km-space-xxl) var(--km-space-xxl) var(--km-space-md);
  position: relative;
}

.step {
  flex: 1;
  text-align: center;
  position: relative;
  z-index: 1;
}

.step-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin: 0 auto var(--km-space-md);
  border: 2px solid var(--border-strong);
  background: var(--surface);
}

.step.done .step-dot {
  background: var(--km-primary);
  border-color: var(--km-primary);
}

.step.current .step-dot {
  border-color: var(--km-primary);
  box-shadow: 0 0 0 4px var(--km-primary-bg);
  background: var(--surface);
}

.step.current .step-dot::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  margin: 2px auto;
  border-radius: 50%;
  background: var(--km-primary);
}

.step-label {
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  color: var(--muted);
}

.step.done .step-label,
.step.current .step-label {
  color: var(--km-primary);
}

.stepper-line {
  position: absolute;
  top: 30px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--border);
  z-index: 0;
}

.stepper-line-fill {
  height: 100%;
  width: 25%;
  background: var(--km-primary);
}

.table-wrap {
  padding: 0 var(--km-space-md) var(--km-space-md);
  overflow-x: auto;
}

table.items {
  width: 100%;
  border-collapse: collapse;
}

table.items th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px;
  border-bottom: 1px solid var(--border);
}

table.items td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}

table.items tr:last-child td {
  border-bottom: none;
}

.item-cell {
  display: flex;
  gap: var(--km-space-md);
  align-items: flex-start;
}

.thumb {
  width: 40px;
  height: 40px;
  border-radius: var(--km-radius-md);
  background: var(--km-surface-background);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
  object-fit: cover;
}

img.thumb {
  padding: 0;
  display: block;
}

.item-name {
  font-weight: 600;
  font-size: var(--km-fs-body);
}

.item-sku {
  font-size: var(--km-fs-body-sm);
  color: var(--muted);
  margin-top: 2px;
}

.num {
  text-align: right;
  font-weight: 600;
}

th.num {
  text-align: right;
}

.muted-dash {
  color: var(--muted);
}

.ship-total {
  display: flex;
  justify-content: flex-end;
  gap: var(--km-space-xl);
  padding: var(--km-space-lg) var(--km-space-xl) var(--km-space-xl);
  font-size: var(--km-fs-body-sm);
}

.ship-total .label {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

.ship-total .amount {
  font-weight: 700;
  font-size: var(--km-fs-body-lg);
  color: var(--text);
}

.totals {
  padding: var(--km-space-xl);
}

.totals-heading {
  margin: 0 0 var(--km-space-md);
  font-size: var(--km-fs-body-lg);
  font-weight: 700;
}

.totals-row {
  display: flex;
  justify-content: space-between;
  gap: var(--km-space-lg);
  padding: 6px 0;
  font-size: var(--km-fs-body);
}

.totals-row.credit {
  color: var(--km-positive);
  font-weight: 600;
}

/** Accounting adjustment — neutral, not success green. */
.totals-row.totals-refunded {
  color: var(--text);
}

.totals-row.totals-refunded span:last-child {
  font-weight: 600;
}

.totals-row.totals-original {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  color: var(--text);
}

.totals-row.grand {
  margin-top: var(--km-space-md);
  padding-top: var(--km-space-lg);
  border-top: 1px solid var(--border);
  font-size: var(--km-fs-body-lg);
  font-weight: 700;
  color: var(--text);
}

.refund-approval-cue {
  margin: 10px 0 4px;
  padding: 8px 12px;
  border-radius: var(--km-radius-md);
  border: 1px solid color-mix(in srgb, var(--km-warning) 35%, var(--border));
  background: var(--km-warning-bg);
  font-size: 12px;
  line-height: 1.35;
}

.refund-approval-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.refund-approval-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-width: 0;
  font-size: inherit;
  font-weight: 700;
  color: var(--km-warning);
}

.refund-approval-icon {
  display: inline-flex;
  color: var(--km-warning);
  flex-shrink: 0;
}

.refund-approval-icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

.refund-approval-detail {
  margin: 3px 0 0;
  font-size: inherit;
  font-weight: 500;
  color: var(--text-secondary);
}

.refund-approval-form-wrap {
  margin: 0 0 var(--km-space-lg);
}

.refund-approval-form-link {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--km-primary);
  font-size: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.refund-approval-form-link:hover,
.refund-approval-form-link:focus-visible {
  text-decoration: underline;
}

.refund-history {
  margin-top: var(--km-space-lg);
  padding: var(--km-space-lg) var(--km-space-xl);
  scroll-margin-top: 16px;
  outline: none;
  transition: box-shadow 180ms ease, background-color 180ms ease;
}

.refund-history.is-flash {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--km-primary) 35%, transparent);
  background: color-mix(in srgb, var(--km-primary-bg) 45%, var(--surface));
}

.manhattan-notes {
  margin-top: var(--km-space-lg);
  padding: 0;
}

.manhattan-notes-band {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 12px var(--km-space-xl);
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.manhattan-notes-band:hover {
  background: var(--km-primary-bg);
}

.manhattan-notes-band:focus-visible {
  outline: 2px solid var(--km-primary);
  outline-offset: -2px;
}

.manhattan-notes-band h2 {
  margin: 0;
  font-size: var(--km-fs-body-lg);
  font-weight: 700;
}

.manhattan-notes-count {
  font-size: var(--km-fs-body-sm);
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.manhattan-notes-count::before {
  content: "·";
  margin-right: 6px;
  color: var(--muted);
}

.manhattan-notes-chevron {
  margin-left: auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
}

.manhattan-notes-band:hover .manhattan-notes-chevron {
  color: var(--km-primary);
}

.manhattan-notes.is-open .manhattan-notes-band {
  border-bottom: 1px solid var(--border);
}

.manhattan-notes-list {
  list-style: none;
  margin: 0;
  padding: 4px var(--km-space-xl) 2px;
}

.manhattan-note {
  padding: 10px 0;
  border-top: 1px solid var(--border);
}

.manhattan-note:first-child {
  padding-top: 10px;
  border-top: none;
}

.manhattan-note-meta {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.35;
}

.manhattan-note-body {
  margin: 3px 0 0;
  font-size: var(--km-fs-body-sm);
  font-weight: 400;
  color: var(--text);
  line-height: 1.4;
}

.manhattan-notes-footer {
  margin: 0;
  padding: 12px var(--km-space-xl) 14px;
  border-top: 1px solid var(--border);
}

.manhattan-notes-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  font-size: var(--km-fs-body-sm);
}

.refund-history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--km-space-lg);
  margin-bottom: var(--km-space-md);
}

.refund-history-head h2 {
  margin: 0;
  font-size: var(--km-fs-body-lg);
  font-weight: 700;
}

.refund-history-total {
  font-size: var(--km-fs-body-sm);
  font-weight: 650;
  color: var(--text);
  white-space: nowrap;
}

.refund-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--km-fs-body-sm);
}

.refund-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--border);
}

.refund-table td {
  padding: 12px 12px 12px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
}

.refund-table tr:last-child td {
  border-bottom: none;
}

.refund-when {
  white-space: nowrap;
  color: var(--text);
  width: 28%;
}

.refund-amount {
  font-weight: 700;
  white-space: nowrap;
  width: 18%;
}

.refund-type-reason {
  font-weight: 650;
  color: var(--text);
}

.refund-item {
  margin-top: 3px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Info alert — Kosmos Info */
.banner {
  display: flex;
  gap: var(--km-space-lg);
  align-items: flex-start;
  padding: var(--km-space-lg) var(--km-space-xl);
  border-radius: var(--km-radius-md);
  border: 1px solid transparent;
  background: var(--km-info-bg);
  color: var(--km-info);
  margin-bottom: var(--km-space-lg);
  font-size: var(--km-fs-body-sm);
}

.banner strong {
  display: block;
  color: var(--text);
  margin-bottom: 2px;
}

.field-block {
  margin-bottom: var(--km-space-xl);
}

.field-block label {
  display: block;
  font-weight: 600;
  font-size: var(--km-fs-body-sm);
  margin-bottom: var(--km-space-sm);
}

.select {
  width: 100%;
  max-width: 420px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--km-radius-md);
  background: var(--surface);
  color: var(--text);
}

.select:focus {
  outline: 2px solid var(--km-primary);
  outline-offset: 1px;
  border-color: var(--km-primary);
}

.help {
  margin: var(--km-space-sm) 0 0;
  font-size: var(--km-fs-body-sm);
  color: var(--muted);
}

.select-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--km-space-lg);
  margin-bottom: var(--km-space-md);
}

.select-head h2 {
  margin: 0;
  font-size: var(--km-fs-title);
}

.pill-count {
  border: 1px solid var(--km-primary);
  color: var(--km-primary);
  background: var(--surface);
  padding: 8px 14px;
  border-radius: var(--km-radius-xxl);
  font-weight: 700;
  font-size: var(--km-fs-body-sm);
  white-space: nowrap;
}

.blocked {
  color: var(--km-error);
  font-size: var(--km-fs-body-sm);
  font-style: italic;
  margin-top: var(--km-space-sm);
}

.row-blocked {
  opacity: 0.72;
  background: var(--km-surface-background);
}

.fee-row td {
  background: var(--km-secondary-bg);
}

.fee-cell {
  display: flex;
  gap: var(--km-space-md);
  padding-left: var(--km-space-xl);
}

.fee-indent {
  color: var(--muted);
  flex-shrink: 0;
}

.fee-name {
  font-weight: 600;
  font-size: var(--km-fs-body-sm);
  display: flex;
  align-items: center;
  gap: var(--km-space-sm);
  flex-wrap: wrap;
}

.fee-meta {
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
  margin-top: 2px;
}

.checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--km-primary);
  cursor: pointer;
}

.fee-select {
  padding-left: 28px !important;
}

/**
 * Refund hierarchy containment:
 * Seller = outer card
 * Shipment = 1px bordered scope (selection boundary)
 * Package = nested scope only when 2+ packages
 * Item / shipping fee = rows, not cards
 */
.seller-card-refund .seller-body {
  background: var(--km-surface-background);
  padding: var(--km-space-lg) var(--km-space-xl) var(--km-space-xl);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.shipment-block-refund {
  padding: 14px 16px 16px;
  border: 1px solid var(--border);
  border-radius: var(--km-radius-md);
  background: var(--surface);
  box-sizing: border-box;
}

.seller-kind-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--km-radius-sm);
  background: var(--km-surface-background);
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.refund-handoff-items {
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}

.refund-handoff-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--km-space-lg);
  padding: 10px 0;
}

.refund-handoff-item + .refund-handoff-item {
  border-top: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

/**
 * Target / Marketplace — header stays active (Mirakl action);
 * body is a muted, borderless reference region.
 */
.seller-card-handoff .seller-body {
  background: var(--km-surface-background);
  padding: 14px var(--km-space-xl) var(--km-space-xl);
  border-top: 1px solid var(--border);
}

.refund-handoff-note {
  margin: 0 0 12px;
  padding: 0;
  border: none;
  background: transparent;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.4;
}

.refund-handoff-item .item-name {
  color: color-mix(in srgb, var(--text) 62%, var(--muted));
  font-weight: 550;
}

.refund-handoff-item .item-meta-line,
.refund-handoff-item .item-qty-inline,
.refund-handoff-item .refund-item-amount {
  color: var(--muted);
}

.refund-handoff-item .refund-item-amount {
  font-weight: 550;
}

.refund-handoff-thumb,
.refund-handoff-item .thumb {
  opacity: 0.82;
  filter: saturate(0.88);
}

/**
 * Task workflow (Refund etc.) — tabs stay available but neither is selected.
 * Workflow heading is the active page indicator.
 */
.views.is-workflow .views-tab[aria-selected="false"] {
  color: var(--text-secondary);
}

.workflow-head {
  margin: 0 0 var(--km-space-lg);
}

.workflow-back {
  display: inline-flex;
  align-items: center;
  margin: 0 0 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--km-primary);
  font: inherit;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  cursor: pointer;
}

.workflow-back:hover {
  text-decoration: underline;
}

.workflow-title {
  margin: 0;
  font-size: var(--km-fs-headline);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.workflow-case-cue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin: 8px 0 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.35;
}

.workflow-case-cue.is-linked {
  color: var(--km-primary);
}

.workflow-case-cue-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--km-primary);
}

.workflow-case-cue-icon svg {
  display: block;
  width: 13px;
  height: 13px;
}

.workflow-case-cue-ref {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: help;
}

button.workflow-case-cue-ref {
  color: var(--km-primary);
  cursor: pointer;
}

button.workflow-case-cue-ref:hover,
button.workflow-case-cue-ref:focus-visible {
  text-decoration: underline;
}

.workflow-case-cue-sep {
  color: var(--muted);
  padding: 0 2px;
}

.workflow-case-cue-note {
  color: var(--text-secondary);
  font-weight: 400;
}

.workflow-case-cue-action {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--km-primary);
  font: inherit;
  font-size: inherit;
  font-weight: 600;
  cursor: pointer;
}

.workflow-case-cue-action:hover {
  text-decoration: underline;
}

.workflow-lead {
  margin: 4px 0 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.leave-confirm {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--km-secondary) 45%, transparent);
}

.leave-confirm-card {
  width: min(420px, 100%);
  padding: var(--km-space-xl);
  border-radius: var(--km-radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--km-secondary) 18%, transparent);
}

.leave-confirm-card h2 {
  margin: 0 0 8px;
  font-size: var(--km-fs-title);
}

.leave-confirm-card p {
  margin: 0 0 var(--km-space-lg);
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.leave-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.case-note-card {
  width: min(480px, 100%);
}

.case-note-label {
  display: block;
  margin: 0 0 6px;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  color: var(--text);
}

.case-note-input {
  display: block;
  width: 100%;
  margin: 0 0 var(--km-space-lg);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--km-radius-md, 8px);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--km-fs-body-sm);
  line-height: 1.4;
  resize: vertical;
  box-sizing: border-box;
}

.case-note-input:focus-visible {
  outline: 2px solid var(--km-primary);
  outline-offset: 2px;
}

.workflow-case-consequence {
  margin: 4px 0 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  line-height: 1.35;
}

/** Create case — focused task layout (no cockpit rail). */
.create-case-shell {
  width: min(1080px, 100%);
}

.create-case-customer {
  margin: -4px 0 var(--km-space-lg);
}

.create-case-customer-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin: 0;
  font-size: var(--km-fs-body);
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
}

.create-case-customer-name {
  font-weight: 700;
}

.create-case-customer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin: 4px 0 0;
  font-size: var(--km-fs-body-sm);
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.35;
}

.create-case-customer-sep {
  color: var(--muted);
  font-weight: 400;
}

.create-case-page {
  width: 100%;
}

.create-case-details {
  padding: 12px var(--km-space-xl) 14px;
  margin-bottom: var(--km-space-md);
}

.create-case-field {
  margin: 0 0 10px;
}

.create-case-field:last-child {
  margin-bottom: 0;
}

.create-case-field > label,
.create-case-field-label {
  display: block;
  margin: 0 0 4px;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  color: var(--text);
}

.create-case-field-hint {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.create-case-field-summary .create-case-input-summary {
  padding: 8px 10px;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.create-case-field-summary .create-case-input-summary:focus {
  color: var(--text);
}

.create-case-details .select-reason-default {
  max-width: none;
  width: 100%;
}

.create-case-input,
.create-case-textarea {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--km-radius-md, 8px);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--km-fs-body);
  line-height: 1.4;
  box-sizing: border-box;
}

.create-case-textarea {
  font-size: var(--km-fs-body-sm);
  resize: none;
  min-height: 52px;
  max-height: 160px;
  overflow-y: auto;
}

.create-case-input:focus-visible,
.create-case-textarea:focus-visible {
  outline: 2px solid var(--km-primary);
  outline-offset: 2px;
}

.create-case-order {
  padding: 0;
  margin-bottom: var(--km-space-lg);
  overflow: hidden;
}

.create-case-scope-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  padding: 12px var(--km-space-xl) 8px;
}

.create-case-scope-head h2 {
  margin: 0;
  font-size: var(--km-fs-title);
  font-weight: 700;
  color: var(--text);
}

.create-case-scope-required {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.create-case-scope-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px var(--km-space-xl) 14px;
}

.create-case-scope-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--km-radius-md, 8px);
  background: var(--surface);
  cursor: pointer;
}

.create-case-scope-option.is-selected {
  border-color: color-mix(in srgb, var(--km-primary) 45%, var(--border));
  background: color-mix(in srgb, var(--km-primary) 6%, var(--surface));
}

.create-case-scope-option input {
  margin-top: 2px;
  flex-shrink: 0;
}

.create-case-scope-option-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.create-case-scope-option-title {
  font-size: var(--km-fs-body-sm);
  font-weight: 700;
  color: var(--text);
}

.create-case-scope-option-meta {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.create-case-scope-tree {
  border-top: 1px solid var(--border);
}

.create-case-scope-tree-help {
  margin: 0;
  padding: 10px var(--km-space-xl) 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.create-case-outcome {
  margin-bottom: var(--km-space-lg);
}

.create-case-done {
  width: min(560px, 100%);
}

.create-case-confirm {
  margin-top: 4px;
}

.create-case-confirm-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: var(--km-fs-body-lg);
  font-weight: 700;
  color: var(--text);
}

.create-case-confirm-check {
  display: inline-flex;
  color: var(--km-positive);
}

.create-case-confirm-check svg {
  display: block;
}

.create-case-confirm-ref {
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--km-radius-md, 8px);
  background: color-mix(in srgb, var(--surface) 88%, var(--border));
}

.create-case-confirm-ref-label {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.create-case-confirm-ref-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.create-case-confirm-ref-id {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.2;
}

.create-case-confirm-ref .copy-field {
  width: 28px;
  height: 28px;
  color: var(--text-secondary);
}

.create-case-confirm-ref .copy-field:hover {
  color: var(--text);
}

.create-case-confirm-ref .copy-field .copy {
  width: 14px;
  height: 14px;
}

.create-case-confirm-outcome {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.create-case-confirm-meta {
  margin: 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.4;
}

.create-case-confirm-body {
  margin: 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text);
  line-height: 1.45;
}

.create-case-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--km-space-md);
  margin-top: var(--km-space-lg);
}

.rail-latest-case {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.rail-latest-case-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.rail-latest-case-id {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  margin: 4px 0 0;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  color: var(--text);
}

.rail-latest-case-state {
  font-weight: 500;
  color: var(--text-secondary);
}

.rail-latest-case-note {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.create-case-seller {
  padding: 14px var(--km-space-xl) 16px;
  border-bottom: 1px solid var(--border);
}

.create-case-seller:last-child {
  border-bottom: none;
}

.create-case-seller-head h3 {
  margin: 0;
  font-size: var(--km-fs-body);
  font-weight: 700;
  color: var(--text);
}

.create-case-seller-head .seller-title-row-inline {
  margin-bottom: 2px;
}

.create-case-seller-head p {
  margin: 2px 0 12px;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.create-case-seller-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.shipment-block-create-case {
  border: 1px solid var(--border);
  border-radius: var(--km-radius-md, 8px);
  overflow: hidden;
  background: var(--surface);
}

.shipment-block-create-case.is-selected {
  border-color: color-mix(in srgb, var(--km-primary) 45%, var(--border));
}

.create-case-ship-head {
  padding: 10px 12px 0;
}

.create-case-ship-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.create-case-ship-title-row h3 {
  margin: 0;
  font-size: var(--km-fs-body);
  font-weight: 700;
  color: var(--text);
}

.create-case-ship-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  padding: 4px 12px 10px 38px;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.create-case-ship-body {
  border-top: 1px solid var(--border);
}

.create-case-pkg.is-headerless .create-case-pkg-items {
  border-top: none;
}

.create-case-pkg-head {
  min-height: 36px;
  padding: 8px 12px 8px 38px;
}

.create-case-pkg-items .create-case-item {
  padding: 10px 12px 10px 12px;
}

.create-case-pkg-items .create-case-item + .create-case-item {
  border-top: 1px solid var(--border);
}

.create-case-item-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.create-case-item-main .item-cell {
  flex: 1;
  min-width: 0;
}

.create-case-item.is-selected {
  background: color-mix(in srgb, var(--km-primary) 6%, var(--surface));
}

.create-case-page-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--km-space-md);
  padding-bottom: 8px;
}

.refund-build {
  margin-bottom: var(--km-space-lg);
}

.refund-default-reason {
  margin-top: 14px;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.refund-default-reason label {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  font-weight: 600;
  font-size: var(--km-fs-body-sm);
  margin-bottom: 6px;
  color: var(--text);
}

.optional-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.refund-default-reason .select-reason-default {
  max-width: 320px;
}

.refund-default-reason .help {
  margin: 6px 0 0;
}

.select-reason-default {
  max-width: 360px;
}

.select-head-inline {
  margin-bottom: 0;
}

.select-head-inline h2 {
  margin: 0;
  font-size: var(--km-fs-title);
  font-weight: 700;
}

.refund-ship-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}

.refund-ship-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
}

.refund-ship-title-row h3 {
  margin: 0;
  font-size: var(--km-fs-body);
  font-weight: 700;
}

.refund-ship-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin: 4px 0 0 28px; /* align under title, past shipment checkbox */
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.shipment-block-refund.is-inert .refund-ship-meta {
  margin-left: 0;
}

.refund-ship-body,
.refund-pkg-stack,
.package-stack.refund-pkg-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
  padding: 0;
}

/**
 * Shared package anatomy (Track + Refund).
 * Container always; Package X of Y header only when shipment has 2+ packages.
 */
.package-group,
.pkg-group {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--km-radius-md);
  background: var(--surface);
  overflow: hidden;
}

/** Refund packages nest inside the shipment scope — quieter than the shipment card. */
.shipment-block-refund .package-group.refund-pkg {
  border-radius: 6px;
  background: var(--surface);
}

.shipment-block-refund .refund-pkg-head {
  min-height: 40px;
  padding: 8px 12px;
  background: var(--km-surface-background);
  border-bottom: 1px solid var(--border);
}

.shipment-block-refund .refund-pkg-items {
  background: var(--surface);
}

/** Headerless single-package — same content chrome, no Package 1 of 1 label. */
.package-group.is-headerless .package-label,
.package-group.is-headerless .refund-pkg-head {
  display: none;
}

.package-label,
.pkg-label,
.refund-pkg-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-height: 44px;
  padding: 10px 16px;
  background: var(--km-surface-background);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}

.package-title,
.pkg-title,
.refund-pkg-title {
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.package-items,
.pkg-items,
.refund-pkg-items {
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.refund-pkg.is-inert {
  opacity: 0.88;
}

.refund-pkg-items .refund-item {
  padding: 10px 12px;
}

.refund-pkg-items .refund-item + .refund-item,
.refund-pkg-items .refund-handoff-item + .refund-handoff-item,
.refund-pkg-items .refund-item + .refund-handoff-item,
.refund-pkg-items .refund-handoff-item + .refund-item {
  border-top: 1px solid var(--border);
}

.refund-item.is-blocked > .refund-item-main {
  opacity: 0.72;
}

.refund-check-spacer {
  display: inline-block;
  width: 18px;
  flex-shrink: 0;
}

.refund-not-refundable {
  margin-top: 4px;
  font-size: var(--km-fs-body-sm);
  color: var(--muted);
  font-weight: 500;
}

.refund-item-main,
.refund-fee-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.refund-item-main .item-cell {
  flex: 1;
  min-width: 0;
}

.refund-item-amount {
  flex-shrink: 0;
  font-weight: 600;
  white-space: nowrap;
  padding-top: 2px;
  text-align: right;
}

/**
 * Qty | Reason grid — same columns on every selected merchandise row
 * so multi-line packages read as one vertical rhythm.
 */
.refund-item-config {
  display: grid;
  grid-template-columns: 80px minmax(220px, 300px);
  align-items: end;
  column-gap: 16px;
  row-gap: 8px;
  margin-top: 6px;
  max-width: 396px;
}

.refund-item .item-meta-line {
  margin-top: 2px;
}

.refund-config-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.refund-config-qty {
  width: 80px;
}

.refund-config-reason {
  min-width: 0;
}

.select-compact {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  font-size: var(--km-fs-body-sm);
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

.select-qty {
  width: 80px;
  min-width: 80px;
}

/** Single eligible unit — same footprint as the qty select, no dropdown cue. */
.select-qty.is-fixed {
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;
  cursor: default;
  background: color-mix(in srgb, var(--km-surface-background) 55%, var(--surface));
  background-image: none;
  color: var(--text);
  opacity: 1;
  text-align: center;
}

.select-reason {
  width: 100%;
  min-width: 0;
}

.shipment-block-refund.is-inert .refund-ship-title-row h3 {
  color: var(--text-secondary);
}

/**
 * Associated refundable charge — same financial weight as merchandise.
 * Modest indent shows parentage; position, not shrunk type, creates hierarchy.
 */
.refund-fee.is-nested {
  margin: 10px 0 2px 32px;
  padding: 0;
  border: none;
  background: transparent;
}

.refund-fee.is-nested .refund-fee-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 46px;
  padding: 8px 0;
  box-sizing: border-box;
}

.refund-fee-body {
  flex: 1;
  min-width: 0;
  padding-top: 1px;
}

.refund-fee-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--km-fs-body);
  line-height: 1.3;
  color: var(--text);
}

.refund-fee-icon {
  display: inline-flex;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.refund-fee.is-nested .refund-item-amount {
  font-size: var(--km-fs-body);
  font-weight: 600;
  padding-top: 1px;
}

.refund-fee-meta {
  margin-top: 3px;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.refund-amount-suffix {
  font-weight: 500;
  color: var(--text-secondary);
  font-size: var(--km-fs-body-sm);
}

/**
 * Shipping mirrors merchandise Qty | Reason:
 * REFUND AMOUNT (fixed $ + editable) | REASON (same ~300px).
 */
.refund-item-config.refund-ship-config {
  grid-template-columns: 132px minmax(220px, 300px);
  max-width: 448px;
  margin-top: 8px;
  align-items: start;
}

.refund-config-amount > span:first-child {
  white-space: nowrap;
}

.refund-config-amount {
  width: 132px;
}

.refund-amount-input-wrap {
  display: flex;
  align-items: stretch;
  width: 132px;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--km-radius-md);
  background: var(--surface);
}

.refund-amount-input-wrap.is-invalid {
  border-color: var(--km-error);
}

.refund-amount-prefix {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--km-surface-background) 55%, var(--surface));
  color: var(--text-secondary);
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  line-height: 1;
}

.refund-amount-input {
  flex: 1;
  min-width: 0;
  width: auto;
  margin: 0;
  border: none;
  border-radius: 0;
  padding: 6px 8px;
  background: transparent;
  color: var(--text);
  font-size: var(--km-fs-body-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
  box-sizing: border-box;
}

.refund-amount-input:focus {
  outline: none;
}

.refund-amount-input-wrap:focus-within {
  outline: 2px solid var(--km-primary);
  outline-offset: 1px;
  border-color: var(--km-primary);
}

.refund-field-error {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  color: var(--km-error);
}

.refund-review-list {
  list-style: none;
  margin: 0 0 var(--km-space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.refund-review-list li {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.refund-review-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.refund-review-main {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  font-size: var(--km-fs-body-sm);
}

.refund-review-reason {
  margin-top: 2px;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.refund-review.is-empty .help {
  margin: 0;
}

.seller-card {
  margin-top: 0;
}

.seller-card + .seller-card {
  margin-top: var(--km-space-lg);
}

/* Track seller body: white list — separation via dividers, not tile fills */
.seller-card-track .seller-body {
  background: var(--surface);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.shipment-block {
  background: transparent;
  margin: 0;
  padding: 0;
  border: none;
}

.seller-card-track .shipment-block {
  /* Reserve rail width so open/closed stay aligned */
  border-left: 3px solid transparent;
}

.seller-card-track .shipment-block + .shipment-block {
  border-top: 1px solid var(--border);
}

/**
 * Shipment state grammar (Track):
 * - No rail = closed
 * - Blue left rail = open/active (full expanded height)
 * - Warning icon + reason copy = attention required (not a coloured rail)
 * - Amber/green assessment = explanation/action once opened
 */
.seller-card-track .shipment-block.is-expanded {
  border-left-color: var(--km-primary);
}

.seller-card-track .shipment-block.is-expanded > .ship-header-band {
  background: color-mix(in srgb, var(--km-primary-bg) 42%, var(--surface));
}

/* Compact summary row — title/meta + product strip */
.ship-header-band {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 16px;
  border: none;
  border-radius: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  box-sizing: border-box;
}

.ship-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--km-space-md);
  width: 100%;
}

/* Unique SKU thumbs — summary, not gallery; units sit with thumbs */
.ship-prod-strip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: 38px;
}

.ship-prod-thumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ship-prod-thumbs .ship-prod-units {
  margin-left: 4px;
}

.ship-prod-thumb {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 6px;
  overflow: visible;
}

.ship-prod-img,
.ship-prod-thumb .ship-prod-img {
  width: 38px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--km-surface-background);
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.ship-prod-thumb .is-placeholder,
span.ship-prod-img.is-placeholder {
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  pointer-events: none;
}

.ship-prod-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px dashed var(--border);
  background: var(--km-surface-background);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ship-prod-units {
  flex-shrink: 0;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Desktop Care: identify product without expanding */
.ship-prod-thumb[data-tip]::after {
  content: attr(data-tip) "\A" attr(data-qty);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  z-index: 5;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--text);
  color: var(--surface);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  white-space: pre;
  text-align: center;
  max-width: 220px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
}

.ship-prod-thumb:hover::after,
.ship-prod-thumb:focus-visible::after {
  opacity: 1;
  visibility: visible;
}

button.ship-header-band {
  cursor: pointer;
  transition: background-color 120ms ease;
}

button.ship-header-band:hover {
  background: var(--km-surface-background);
}

.seller-card-track .shipment-block.is-expanded > button.ship-header-band:hover {
  background: color-mix(in srgb, var(--km-primary-bg) 58%, var(--surface));
}

button.ship-header-band:focus-visible {
  outline: 2px solid var(--km-primary);
  outline-offset: -2px;
}

.ship-header-band.is-static {
  cursor: default;
}

.shipment-block.is-expanded .ship-header-band {
  border-radius: 0;
}

.ship-header-band h3 {
  margin: 0;
  font-size: var(--km-fs-body-lg);
  font-weight: 600;
}

.ship-header-main {
  min-width: 0;
  flex: 1;
}

.ship-header-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 1 auto;
  flex-shrink: 1;
  min-width: 0;
  max-width: min(46%, 280px);
  padding-top: 1px;
  min-height: 22px;
}

.ship-header-controls .ship-carrier-identity {
  margin-left: 0;
}

/** Icon + Care assessment — one component; carrier status stays on the left badge. */
.ship-attention-assessment {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  color: var(--km-warning);
}

.ship-attention {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: inherit;
  flex-shrink: 0;
}

.ship-attention svg {
  display: block;
  width: 16px;
  height: 16px;
}

.ship-attention-label {
  min-width: 0;
  font-size: var(--km-fs-body-sm);
  font-weight: 650;
  line-height: 1.25;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ship-chevron {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1;
  width: 1.1em;
  text-align: center;
}

button.ship-header-band:hover .ship-chevron {
  color: var(--km-primary);
}

.ship-header-band.is-static .ship-header-controls:empty {
  display: none;
}

.ship-header-band .ship-meta {
  margin-top: 4px;
}

/* Expanded = same compact header + detailed content (contrast from volume, not fill) */
.ship-expanded-body {
  background: var(--surface);
  border: none;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 16px 16px;
}

.ship-expanded-body .ship-track-enhance {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.ship-expanded-body .ship-track-standard.ship-track-enhance {
  margin-top: 0;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

.ship-expanded-body .package-stack,
.ship-expanded-body .pkg-stack {
  margin-top: var(--km-space-lg);
  padding-top: var(--km-space-lg);
  border-top: 1px solid var(--border);
}

.seller-title-row-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  width: 100%;
}

.seller-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  min-width: 0;
}

.seller-identity-sep {
  color: var(--muted);
  font-weight: 400;
}

.contact-seller-link {
  margin-left: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--km-primary);
  font: inherit;
  font-weight: 600;
  font-size: var(--km-fs-body-sm);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.contact-seller-link:hover,
.contact-seller-link:focus-visible {
  text-decoration: underline;
}

.seller-attention {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--km-radius-sm);
  font-size: 11px;
  font-weight: 700;
  color: var(--km-warning);
  background: var(--km-warning-bg);
}

/* Package grouping — shared with .package-* above; legacy aliases kept for Track. */
.pkg-label .muted {
  color: var(--muted);
  font-weight: 500;
}

.pkg-track-link {
  margin-left: auto;
  color: var(--km-primary);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--km-fs-body-sm);
}

.pkg-track-link:hover {
  text-decoration: underline;
}

.pkg-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--km-space-lg);
  padding: 10px var(--km-space-lg);
  border-bottom: 1px solid var(--border);
}

.pkg-item:last-child {
  border-bottom: none;
}

.pkg-item-body {
  min-width: 0;
}

.pkg-item-sub {
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  padding-top: 2px;
}

.item-qty-inline {
  color: var(--text-secondary);
  font-weight: 400;
}

.item-meta-line {
  margin-top: 3px;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.item-status-inline {
  margin-top: 6px;
}

.actions {
  display: flex;
  gap: var(--km-space-md);
  margin-top: var(--km-space-xl);
}

/**
 * Shipment action hierarchy (same Kosmos medium primary button; context = meaning):
 * 1. Component primary CTA → primary button (Create case, Refund shipping, View POD)
 * 2. Carrier tracking → tracking number link (AU99340122 ↗)
 * 3. Optional deeper detail → text link (View in Shippit ↗, Show earlier updates)
 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--km-radius-xxl);
  padding: 10px 20px;
  font-weight: 650;
  font-size: var(--km-fs-body);
  cursor: pointer;
  box-sizing: border-box;
}

.btn:focus-visible {
  outline: 2px solid var(--km-primary);
  outline-offset: 2px;
}

/** Shared shipment-level CTA size — hierarchy via style, not arbitrary dimensions. */
.btn-md {
  min-height: 36px;
  padding: 8px 16px;
  font-size: var(--km-fs-body-sm);
  line-height: 1.2;
  white-space: nowrap;
}

.btn-primary {
  background: var(--km-primary);
  color: var(--km-primary-on);
}

.btn-primary:hover {
  background: var(--km-primary-hover);
}

.btn-primary:active {
  background: var(--km-primary-active);
}

.btn-primary:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--km-secondary-bg);
  color: var(--km-secondary);
  border: 1px solid var(--border-strong);
}

.btn-secondary:hover {
  background: var(--km-secondary);
  color: var(--km-secondary-on);
  border-color: var(--km-secondary);
}

.btn-secondary:active {
  background: color-mix(in srgb, var(--km-secondary) 88%, #000);
  color: var(--km-secondary-on);
  border-color: color-mix(in srgb, var(--km-secondary) 88%, #000);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--km-secondary);
  outline-offset: 2px;
  border-color: var(--km-secondary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--km-secondary) 18%, transparent);
}

/**
 * Outlined / secondary available actions — must follow `.btn { border: none }`
 * so the boundary is not stripped. Operational radius (not pills).
 */
.btn.btn-outline {
  min-height: 40px;
  padding: 10px 16px;
  gap: 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--km-radius-md);
  background: var(--surface);
  color: var(--text);
  font-size: var(--km-fs-body);
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
}

.btn.btn-outline:hover {
  border-color: var(--km-primary);
  background: var(--km-primary-bg);
  color: var(--km-primary);
}

.btn.btn-outline:active {
  border-color: var(--km-primary-hover);
  background: color-mix(in srgb, var(--km-primary-bg) 70%, var(--km-primary) 8%);
  color: var(--km-primary-hover);
}

.btn.btn-outline:focus-visible {
  outline: 2px solid var(--km-primary);
  outline-offset: 2px;
  border-color: var(--km-primary);
}

.btn.btn-outline .btn-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: inherit;
}

.btn.btn-outline .btn-icon svg {
  display: block;
}

a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.ship-track-enhance {
  margin-top: var(--km-space-lg);
  padding-top: var(--km-space-lg);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--km-space-md);
}

.ship-carrier {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/**
 * Track type scale (prefer weight/colour over extra sizes):
 * Seller 18/600 · Shipment 16/600 · Status 18/600 · Product/alert 14/600
 * Secondary copy 12–13 regular · event time 13/600 · tracking ref 12 regular
 */
.ship-status-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
}

.ship-status-copy {
  min-width: 0;
  flex: 1 1 12rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ship-status-title {
  font-size: var(--km-fs-title);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.ship-carrier-identity {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: var(--km-fs-body-sm);
  font-weight: 500;
  flex-shrink: 0;
}

.ship-carrier-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
  text-align: right;
}

.ship-tracking-link {
  color: var(--km-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.ship-tracking-link:hover {
  color: var(--km-primary-hover);
}

.ship-tracking-ref {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  white-space: nowrap;
}

.ship-carrier-logo {
  width: 24px;
  height: 24px;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

.ship-carrier-name {
  white-space: nowrap;
}

.ship-status-explain {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-secondary);
  max-width: 52ch;
}

/* Unlabeled journey cue — relative progress; colour reinforces SLA, not status copy */
.journey {
  margin: 10px 0 4px;
  max-width: 28rem;
}

.journey-rail {
  position: relative;
  height: 2px;
  border-radius: 1px;
  background: var(--border);
}

.journey-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 1px;
  background: var(--journey-tone, var(--km-primary));
  opacity: 0.55;
}

.journey-marker {
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--journey-tone, var(--km-primary));
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--journey-tone, var(--km-primary)) 35%, transparent);
  transform: translate(-50%, -50%);
  box-sizing: border-box;
}

.journey.is-on-track {
  --journey-tone: var(--km-primary);
}

/** Outside expected window / significantly delayed — supporting cue only. */
.journey.is-delayed {
  --journey-tone: var(--km-warning-container);
}

.journey.is-delayed .journey-fill {
  opacity: 0.75;
}

/** Terminal success — Kosmos positive, one step quieter than the status badge. */
.journey.is-delivered {
  --journey-tone: var(--km-positive);
}

.journey.is-delivered .journey-fill {
  opacity: 0.7;
}

.journey.is-neutral .journey-rail {
  opacity: 0.85;
}

.ship-carrier-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 6px;
}

.ship-track-enhance .ship-carrier-actions {
  justify-content: flex-start;
  margin-top: 4px;
}

/* Standard carrier tracking — compact utility with full subtle border */
.ship-track-standard.ship-track-enhance {
  margin-top: 0;
  margin-bottom: 0;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  gap: 0;
}

.ship-track-standard {
  border-radius: var(--km-radius-sm, 6px);
  background: color-mix(in srgb, var(--km-surface-background) 55%, var(--surface));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.ship-track-standard .std-track-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 6px 12px;
  min-height: 0;
}

/** Click & Collect — collection status/context instead of parcel tracking. */
.ship-track-collection.ship-track-enhance {
  margin-top: 0;
  margin-bottom: 0;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--km-radius-sm, 6px);
  background: color-mix(in srgb, var(--km-surface-background) 55%, var(--surface));
  box-sizing: border-box;
}

.collection-context-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.collection-context-icon {
  display: inline-flex;
  color: var(--text-secondary);
  flex-shrink: 0;
  margin-top: 2px;
}

.collection-context-title {
  font-weight: 600;
  font-size: var(--km-fs-body);
  color: var(--text);
  line-height: 1.3;
}

.collection-context-meta {
  margin-top: 3px;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.35;
}

.collection-context-meta strong {
  font-weight: 600;
  color: var(--text);
}

.collection-context-window {
  margin-top: 6px;
  font-size: var(--km-fs-body-sm);
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}

.collection-context-window.is-ok {
  color: var(--text);
  font-weight: 400;
}

.collection-context-window.is-approaching,
.collection-context-window.is-urgent {
  color: var(--km-warning);
  font-weight: 600;
}

.collection-context-window.is-ended {
  color: var(--km-error);
  font-weight: 600;
}

.ship-track-collection.is-approaching,
.ship-track-collection.is-urgent {
  border-color: color-mix(in srgb, var(--km-warning) 35%, var(--border));
  background: color-mix(in srgb, var(--km-warning-bg) 45%, var(--surface));
}

.ship-track-collection.is-ended {
  border-color: color-mix(in srgb, var(--km-error) 30%, var(--border));
  background: color-mix(in srgb, var(--km-error-bg) 40%, var(--surface));
}

.btn-track-parcel {
  flex-shrink: 0;
  align-self: center;
}

.ship-track-standard .ship-carrier-identity {
  gap: 6px;
  align-items: center;
}

.ship-track-standard .ship-carrier-side {
  align-items: flex-start;
  text-align: left;
}

.ship-track-standard .ship-carrier-logo {
  width: 20px;
  height: 20px;
}

.ship-track-standard .ship-carrier-name {
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  color: var(--text);
}

.std-track-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-top: 8px;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.25;
}

.std-track-ref .copy-field {
  margin-top: 0;
}

.std-track-number {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.std-track-age {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.std-track-age-sep,
.std-track-age-date {
  font-weight: 400;
  color: var(--text-secondary);
}

.ship-expanded-body .ship-track-standard + .package-stack,
.ship-expanded-body .ship-track-standard + .pkg-stack,
.ship-expanded-body .ship-track-collection + .package-stack,
.ship-expanded-body .ship-track-collection + .pkg-stack {
  margin-top: 10px;
  padding-top: 10px;
}

/* External system handoff — Guide can't complete; navigate elsewhere (Shippit, Mirakl). */
.external-system-link {
  margin-left: auto;
  padding: 0;
  border: none;
  background: none;
  color: var(--km-primary);
  font: inherit;
  font-weight: 600;
  font-size: var(--km-fs-body-sm);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.ship-shippit-link {
  padding: 0;
  border: none;
  background: none;
  color: var(--km-primary);
  font: inherit;
  font-weight: 600;
  font-size: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.external-system-link:hover,
.ship-shippit-link:hover {
  text-decoration: underline;
}

.linkish {
  border: none;
  background: none;
  padding: 0;
  color: var(--km-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.track-callout {
  padding: 10px 12px;
  border-radius: var(--km-radius-md);
  background: var(--km-surface-background);
  border: 1px solid var(--border);
}

/* Operational recommendation — compact, action on the right (desktop) */
.track-callout-decision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}

.track-callout-body {
  min-width: 0;
  flex: 1 1 16rem;
}

.track-callout strong {
  display: block;
  margin-bottom: 2px;
  font-size: var(--km-fs-body);
  font-weight: 600;
}

.track-callout p {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
}

.track-callout-facts {
  margin: 0 0 2px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
}

.track-callout-ok .track-callout-facts {
  color: inherit !important;
  opacity: 0.92;
}

.track-callout-note {
  margin-top: 4px !important;
  font-size: 12px !important;
}

.track-callout-ok {
  background: var(--km-positive-bg);
  border-color: transparent;
  color: var(--km-positive);
}

.track-callout-ok p {
  color: var(--km-positive);
}

.track-callout-warn {
  background: var(--km-warning-bg);
  border-color: transparent;
}

.track-callout-warn strong {
  color: var(--km-warning);
}

/**
 * SLA delay assessment — quieter than full warn / investigate.
 * Orange progress already cues “running late”; this holds the facts + action.
 */
.track-callout-sla {
  background: color-mix(in srgb, var(--km-warning-bg) 48%, var(--surface));
  border-color: color-mix(in srgb, var(--km-warning-container) 16%, var(--border));
}

.track-callout-sla strong {
  color: var(--text);
}

.track-callout-sla .track-callout-facts {
  color: var(--text-secondary) !important;
  font-weight: 400 !important;
}

/* Pathway prompt — actionable, not an alert */
.track-callout-pathway {
  background: var(--km-primary-bg);
  border-color: transparent;
}

.track-callout-pathway strong {
  color: var(--text);
}

.track-callout-pathway .ship-shippit-link {
  margin-left: 0;
}

.track-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--km-space-md);
  margin-top: 0;
  flex-shrink: 0;
}

.track-callout-decision .track-actions .btn {
  white-space: nowrap;
}

.delivery-progress-toggle {
  border: none;
  background: none;
  padding: 0;
  color: var(--km-primary);
  font: inherit;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  cursor: pointer;
}

.delivery-progress-toggle:hover {
  text-decoration: underline;
}

.track-event-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.track-event {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: var(--km-space-md);
  position: relative;
  padding-bottom: var(--km-space-md);
}

.track-event:last-child {
  padding-bottom: 0;
}

.track-event:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 14px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.track-event-dot {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  background: var(--surface);
}

/** Latest carrier event — always primary; not tied to journey SLA tone. */
.track-event.is-latest .track-event-dot {
  border-color: var(--km-primary);
  background: var(--km-primary);
}

.track-event-when {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.track-event-detail {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
}

.track-event-source {
  margin: 3px 0 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.35;
}

.track-event-source .meta-sep {
  margin: 0 4px;
}

/** Copy sits beside the tracking number — never stretched to the row edge. */
.track-event-tracking {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  margin-top: 2px;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
  font-weight: 400;
}

.track-event-tracking .copy-field {
  margin-top: 0;
}

.track-event-label {
  font-weight: 600;
  font-size: 13px;
}

.track-event-meta {
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
  font-weight: 400;
  margin-top: 2px;
}

.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--km-secondary);
  color: var(--km-secondary-on);
  padding: 8px 14px;
  border-radius: var(--km-radius-md);
  font-size: var(--km-fs-body-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 50;
}

.toast.show {
  opacity: 1;
}

/**
 * Order History — Care result list after contact search.
 * Whole row is the affordance; highlight only on hover/focus.
 */
.history-page {
  margin-top: var(--km-space-sm);
}

.history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--km-space-lg);
}

.history-head-main {
  min-width: 0;
}

.history-head h1 {
  margin: 0;
  font-size: var(--km-fs-headline);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.history-results-for {
  margin: 4px 0 0;
  font-size: var(--km-fs-body);
  color: var(--text-secondary);
}

.history-results-for strong {
  color: var(--text);
  font-weight: 600;
}

.history-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.history-meta-sep {
  color: var(--muted);
}

/** Compact selected brand-scope chip — same language as Search, sized for page meta. */
.brand-tile.is-compact {
  min-width: 0;
  min-height: 28px;
  padding: 4px 8px;
  gap: 8px;
  cursor: default;
  vertical-align: middle;
}

.brand-tile.is-compact .brand-tile-logo {
  height: 14px;
}

.brand-tile.is-compact .brand-tile-region {
  font-size: 11px;
}

.history-change {
  flex-shrink: 0;
  margin-top: 4px;
  font-size: var(--km-fs-body-sm);
}

.history-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.history-count {
  margin: 0;
  font-size: var(--km-fs-body-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.history-filter {
  position: relative;
  display: block;
  width: min(100%, 260px);
}

.history-filter-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  display: inline-flex;
  pointer-events: none;
}

.history-filter-input {
  padding-left: 34px;
  min-height: 36px;
}

.history-table-wrap {
  overflow: hidden;
  padding: 0;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--km-fs-body-sm);
}

.history-table th {
  text-align: left;
  height: 40px;
  padding: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--km-surface-background);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  box-sizing: border-box;
}

.history-table td {
  height: 62px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  color: var(--text);
  box-sizing: border-box;
}

.history-table tbody tr:last-child td {
  border-bottom: none;
}

.history-row {
  cursor: pointer;
}

.history-row:hover {
  background: var(--km-primary-bg);
}

.history-row:focus-visible {
  outline: 2px solid var(--km-primary);
  outline-offset: -2px;
  background: var(--km-primary-bg);
}

.history-order-id {
  font-weight: 600;
  color: var(--km-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.history-items-cell {
  width: 1%;
  min-width: 88px;
  padding-left: 12px !important;
  padding-right: 12px !important;
  white-space: nowrap;
}

.history-placed,
.history-status-cell,
.history-status-cell .badge {
  white-space: nowrap;
}

.history-customer-cell {
  width: 22%;
  min-width: 200px;
  max-width: 280px;
}

.history-fulfilment-cell {
  white-space: normal;
}

.history-items {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
}

.history-items.is-empty {
  color: var(--muted);
}

.history-item-stack {
  display: flex;
  align-items: center;
  padding-right: 8px; /* room for last overlap */
}

.history-item-thumb {
  position: relative;
  width: 32px;
  height: 32px;
  margin-right: -10px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--km-surface-background);
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
}

.history-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.history-item-more {
  margin-left: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.history-fulfilment-brand {
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}

.history-fulfilment-method {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.25;
}

.history-customer-name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history-customer-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  min-width: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
}

.history-customer-email {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-customer-sep {
  flex-shrink: 0;
  color: var(--muted);
}

.history-customer-phone {
  flex-shrink: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.history-total {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

th.history-total {
  font-weight: 700;
}

.history-chevron {
  width: 28px;
  color: var(--muted);
  text-align: right;
  padding-right: 14px !important;
}

.history-chevron-head {
  width: 28px;
}

.history-empty {
  height: auto;
  text-align: center;
  color: var(--text-secondary);
  padding: 28px 12px !important;
}

@media (max-width: 980px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .context-rail {
    position: static;
  }
}

@media (max-width: 720px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .addr-grid {
    grid-template-columns: 1fr;
  }

  .fact-split {
    display: none;
  }

  .context-rail {
    grid-template-columns: 1fr;
  }
}

/* —— Report damage workflow —— */
.damage-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.damage-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--km-fs-body-sm);
}

.damage-step.is-current {
  color: var(--text);
  font-weight: 600;
}

.damage-step.is-done {
  color: var(--text-secondary);
}

.damage-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.damage-step.is-current .damage-step-num {
  border-color: var(--text);
  background: var(--text);
  color: var(--surface);
}

.damage-step.is-done .damage-step-num {
  border-color: var(--km-positive);
  color: var(--km-positive);
}

.damage-section-title {
  margin: 0 0 12px;
  font-size: var(--km-fs-body-lg);
  font-weight: 700;
}

.damage-required {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.damage-context-note {
  margin: 12px 0 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
  line-height: 1.45;
}

.damage-dropzone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  margin: 0 0 16px;
  padding: 28px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--km-radius-md, 8px);
  background: color-mix(in srgb, var(--surface) 88%, var(--border));
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.damage-dropzone:hover {
  border-color: var(--text-secondary);
}

.damage-dropzone-title {
  font-weight: 600;
  font-size: var(--km-fs-body);
}

.damage-dropzone-meta {
  font-size: var(--km-fs-body-sm);
  color: var(--muted);
}

.damage-channel {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.damage-channel legend {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: var(--km-fs-body-sm);
}

.damage-channel-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.damage-channel-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--km-radius-md, 8px);
  font-size: var(--km-fs-body-sm);
  cursor: pointer;
}

.damage-channel-option.is-selected {
  border-color: var(--text);
  background: color-mix(in srgb, var(--surface) 92%, var(--border));
}

.damage-open-outcome {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--km-radius-md, 8px);
  background: color-mix(in srgb, var(--surface) 88%, var(--border));
}

.damage-open-outcome-title {
  margin: 0;
  font-weight: 600;
  font-size: var(--km-fs-body-sm);
}

.damage-open-outcome-meta {
  margin: 2px 0 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text-secondary);
}

.damage-review-list {
  margin-bottom: 16px;
}

.damage-review-block {
  margin: 0 0 14px;
}

.damage-review-subhead {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.damage-review-block p,
.damage-review-notes {
  margin: 0;
  font-size: var(--km-fs-body-sm);
  color: var(--text);
  white-space: pre-wrap;
  line-height: 1.45;
}

.damage-review-attest {
  margin-top: var(--km-space-md);
}

.damage-attest {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: var(--km-fs-body-sm);
  line-height: 1.45;
  cursor: pointer;
}

.damage-attest input {
  margin-top: 3px;
}

.damage-attest-label {
  display: block;
  color: var(--text);
}

.damage-attest-hint {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.damage-done {
  width: min(560px, 100%);
}

.damage-item .refund-item-amount {
  display: none;
}