/* Ways to ship: a tall lead card for partner rates beside two use-case cards.
   Every card carries two drawings: built UI pieces (default) and isometric line art (?cards=iso).
   Values come from system/tokens.css only. */

.ways {
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--s-9) var(--s-8) var(--s-11);
}

.ways-head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}
.ways-head .section-title { max-width: var(--measure-ways); }

.ways-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-6);
}

.card-lead,
.card {
  display: flex;
  flex-direction: column;
}
.card-lead { grid-row: span 2; }

.card-art {
  display: grid;
  place-items: center;
  min-height: var(--art-card);
  margin-bottom: var(--s-6);
}
.card-lead .card-art {
  flex: 1 1 auto;
  min-height: var(--art-lead);
}

.card-copy .text-link { margin-top: var(--s-4); }

/* Variant switch. html[data-cards] is set in <head> from ?cards=iso. */
.art-iso { display: none; width: 100%; height: auto; overflow: visible; }
[data-cards="iso"] .art-iso { display: block; }
[data-cards="iso"] .art-drawn { display: none; }

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6);
  margin: var(--s-6) 0 0;
  padding-top: var(--s-6);
  border-top: var(--hairline) solid var(--m-200);
}
.stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: var(--s-1);
}
.stat dd { margin: 0; }
.stat .meta { color: var(--g-600); }

/* Built UI pieces: real text at the page's own sizes, drawn flat. */

.ui {
  position: relative;
  width: 100%;
  max-width: var(--ui-w);
  padding: var(--s-3);
  border-radius: var(--radius);
  background: var(--g-0);
  outline: var(--hairline) solid var(--g-200);
  outline-offset: calc(var(--hairline) * -1);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  color: var(--g-900);
}

.ui .ico {
  flex: none;
  width: var(--icon-glyph);
  height: var(--icon-glyph);
  color: var(--g-600);
}

.ui-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
  border-bottom: var(--hairline) solid var(--g-100);
}

/* Rate match: shop, matched partner and its carriers above the rate panel. */

.match {
  display: grid;
  justify-items: center;
  gap: var(--s-6);
  width: 100%;
}

.match-map { display: flex; align-items: center; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--chip-h);
  padding: 0 var(--s-3);
  border-radius: var(--chip-h);
  background: var(--g-0);
  outline: var(--hairline) solid var(--g-200);
  outline-offset: calc(var(--hairline) * -1);
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  color: var(--g-900);
  white-space: nowrap;
}
.chip .ico { width: var(--icon-glyph); height: var(--icon-glyph); color: var(--g-600); }
.chip-on { background: var(--m-100); outline-color: var(--m-200); color: var(--m-800); }
.chip-on .ico { color: var(--m-700); }

.wire { flex: none; width: var(--wire-w); height: auto; }
.wire line { stroke: var(--m-600); stroke-width: var(--stroke-glyph); }
.branch { flex: none; width: var(--branch-w); height: var(--branch-h); }
.branch path { fill: none; stroke: var(--g-300); stroke-width: var(--hairline); }
.carriers { display: grid; gap: var(--s-1); }
.carriers .chip { color: var(--g-600); }


.rates {
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rate {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rate-bar-w);
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-2);
  border-radius: var(--radius-inner);
  color: var(--g-600);
}

.rate-bar {
  height: var(--bar-h);
  border-radius: var(--bar-h);
  background: var(--g-100);
  overflow: hidden;
}

.rate-fill {
  display: block;
  width: calc(var(--w) * 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--g-300);
  transform-origin: left center;
}

.rate-best { background: var(--m-50); color: var(--g-900); }
.rate-best .rate-fill { background: var(--m-600); }

.ui-foot {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  padding: var(--s-3) var(--s-2) var(--s-1);
  border-top: var(--hairline) solid var(--g-100);
  color: var(--m-800);
}
.ui-foot .ico { color: var(--m-600); }

/* Label to return */

.ui-flow,
.ui-b2b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.ui-flow .ui,
.ui-b2b .ui { max-width: var(--ui-w-sm); }

.ui-label {
  position: relative;
  z-index: var(--z-art-control);
  flex: none;
  width: var(--label-w);
  height: auto;
  margin-left: calc(var(--s-6) * -1);
  transform: var(--label-tilt);
}
.ui-label .lbl-sheet { fill: var(--g-0); stroke: var(--g-700); stroke-width: var(--hairline); }
.ui-label .lbl-accent { fill: var(--m-400); }
.ui-label .lbl-line { fill: var(--g-200); }
.ui-label .lbl-rule { stroke: var(--g-200); stroke-width: var(--hairline); }
.ui-label .lbl-bars { fill: var(--g-900); }

.steps { margin: 0; padding: 0; list-style: none; }

.step {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2);
  color: var(--g-500);
}

/* Connector from the dot above into this one: a row is 40, a dot 16, so the gap is 24. */
.step + .step::before {
  content: "";
  position: absolute;
  left: calc(var(--s-2) + var(--step-dot) / 2 - var(--hairline) / 2);
  bottom: calc(50% + var(--step-dot) / 2);
  width: var(--hairline);
  height: var(--s-5);
  background: var(--g-200);
}

.step-dot {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--step-dot);
  height: var(--step-dot);
  border-radius: 50%;
  background: var(--g-0);
  box-shadow: inset 0 0 0 var(--hairline) var(--g-300);
  color: var(--g-0);
}
.step-dot svg { width: var(--s-3); height: var(--s-3); }

.step.is-done,
.step.is-now { color: var(--g-900); }
.step.is-done .step-dot { background: var(--m-600); box-shadow: none; }
.step.is-done + .step::before { background: var(--m-600); }
.step.is-now .step-dot { animation: step-pulse var(--dur-pulse) var(--ease-out) infinite; box-shadow: var(--step-pulse-from); }

@keyframes step-pulse {
  from { box-shadow: var(--step-pulse-from); }
  to { box-shadow: var(--step-pulse-to); }
}

/* Business shipments */

.ticks { display: grid; margin: 0; padding: 0; list-style: none; }

.tick {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2);
}
.tick .ico { color: var(--m-600); }

.ui-pallet {
  position: relative;
  z-index: var(--z-art-control);
  flex: none;
  width: var(--pallet-w);
  height: auto;
  margin-left: calc(var(--s-6) * -1);
  overflow: visible;
}

/* Isometric line art, shared by both variants' drawings. */

.art-iso *,
.ui-pallet * { vector-effect: non-scaling-stroke; }
.art-iso .f-top, .ui-pallet .f-top,
.art-iso .f-left, .ui-pallet .f-left,
.art-iso .f-ground { fill: var(--g-0); }
.art-iso .f-right, .ui-pallet .f-right { fill: var(--g-50); }
.art-iso .f-accent, .ui-pallet .f-accent { fill: var(--m-400); }
.art-iso .e, .ui-pallet .e { stroke: var(--g-700); stroke-width: var(--hairline); stroke-linejoin: round; }
.art-iso .soft { fill: none; stroke: var(--g-200); stroke-width: var(--hairline); }
.art-iso .route { fill: none; stroke: var(--g-400); stroke-width: var(--hairline); stroke-dasharray: var(--dash-orbit); }
.art-iso .route-on { fill: none; stroke: var(--m-600); stroke-width: var(--stroke-glyph); stroke-linecap: round; stroke-linejoin: round; }
.art-iso .ink { fill: none; stroke: var(--g-700); stroke-width: var(--hairline); stroke-linecap: round; }
.art-iso .dot { fill: var(--m-600); }

/* Entrance, set by ways.js only when motion is allowed. */

.ways[data-reveal="pending"] .rate-fill { transform: scaleX(0); }
.ways[data-reveal="pending"] .rate-best { background-color: transparent; }
.ways[data-reveal="pending"] .ui-foot,
.ways[data-reveal="pending"] .tick .ico { opacity: 0; transform: var(--pop-from); }

.ways[data-reveal="in"] .rate-fill {
  transition: transform var(--dur-draw) var(--ease-in-out) calc(var(--i) * var(--stagger));
}
.ways[data-reveal="in"] .rate-best {
  transition: background-color var(--dur-base) var(--ease-out) calc(3 * var(--stagger) + var(--dur-draw));
}
.ways[data-reveal="in"] .ui-foot {
  transition: opacity var(--dur-base) var(--ease-out) calc(3 * var(--stagger) + var(--dur-draw)),
    transform var(--dur-base) var(--ease-out) calc(3 * var(--stagger) + var(--dur-draw));
}
.ways[data-reveal="in"] .tick .ico {
  transition: opacity var(--dur-base) var(--ease-out) calc(var(--i) * var(--stagger) * 2),
    transform var(--dur-base) var(--ease-out) calc(var(--i) * var(--stagger) * 2);
}

@media (prefers-reduced-motion: reduce) {
  .ways *,
  .ways *::before { transition: none; animation: none; }
}

@media (max-width: 960px) {
  .ways { padding: var(--s-8) var(--s-5) var(--s-10); }
  .ways-grid { grid-template-columns: minmax(0, 1fr); }
  .card-lead { grid-row: auto; }
}

@media (max-width: 560px) {
  .ways { padding: var(--s-8) var(--s-4) var(--s-10); }
  .ways-grid { gap: var(--s-5); }
  .card-art,
  .card-lead .card-art { min-height: 0; }
  .ui-label,
  .ui-pallet,
  .match-map { display: none; }
  .stats { grid-template-columns: minmax(0, 1fr); row-gap: var(--s-4); }
  .rate { grid-template-columns: minmax(0, 1fr) var(--rate-bar-w-sm); gap: var(--s-3); }
}