/* Cloudstore Central — Shipping & Fulfilment Integration page.
   Builds on the shared om-* demo/hierarchy/chain/timeline styling
   (order-management.css). Only the additions specific to this page live here:
   the shipment-hierarchy emphasis and the pausable production-to-delivery flow.
   Every control is enhanced-only and hidden under .no-js; any motion is gated
   on prefers-reduced-motion. */

/* ---------- shipment hierarchy emphasis ---------- */
.sf-hierarchy .om-tier__row { gap: var(--space-sm); }
.sf-hierarchy .om-node--ship { line-height: 1.5; }

/* ---------- pausable production-to-delivery flow ---------- */
.sf-flow__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs);
}
.sf-flow__controls { display: flex; gap: var(--space-2xs); }
.sf-flow__toggle {
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  background: var(--bg-subtle);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-3xs) var(--space-xs);
  cursor: pointer;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
.sf-flow__toggle:hover { background: var(--bg-muted); }
.sf-flow__toggle:focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* The active step is emphasised with weight, ring and a subtle lift — never by
   colour alone, so the highlight remains perceivable for all users. */
.sf-flow .om-chain__step { transition: transform var(--duration-fast) ease; }
.sf-flow .om-chain__step.is-active .om-chain__label {
  font-weight: var(--fw-semibold);
  box-shadow: 0 0 0 2px var(--color-accent, currentColor);
}
.sf-flow.is-animating .om-chain__step.is-active { transform: translateY(-2px); }

/* ---------- progressive-enhancement fallback ---------- */
/* Without JavaScript the pause control does nothing, so hide it. */
.no-js .sf-flow__controls { display: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sf-flow .om-chain__step,
  .sf-flow__toggle { transition: none; }
  .sf-flow.is-animating .om-chain__step.is-active { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 40rem) {
  .sf-flow__head { gap: var(--space-2xs); }
}