/* ============================================================
   E · Rehearsal / Submit-parcel / Shipment shared
   依赖 _tokens.css · _e-fashion.css · _e-orders.css · _e-form.css · _e-warehouse.css
   ============================================================ */

/* ───────── Step header (parcel flow steps 1/2/3) ───────── */
.e-pflow { display: flex; align-items: center; gap: 0; margin-bottom: 22px; padding: 16px 20px; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); overflow-x: auto; }
.e-pflow__step { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 0 14px; }
.e-pflow__node { width: 26px; height: 26px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-border); display: grid; place-items: center; color: var(--color-text-muted); font-family: var(--font-display); font-weight: 800; font-size: 12px; flex-shrink: 0; }
.e-pflow__step.is-done .e-pflow__node { background: var(--color-primary-fill); border-color: var(--color-primary-fill); color: #fff; }
.e-pflow__step.is-current .e-pflow__node { background: var(--color-primary-soft); border-color: var(--color-primary-fill); color: var(--color-primary-fill); box-shadow: 0 0 0 4px rgba(11,168,136,.15); }
.e-pflow__t { font-size: 13px; font-weight: 700; color: var(--color-text-muted); white-space: nowrap; }
.e-pflow__step.is-done .e-pflow__t, .e-pflow__step.is-current .e-pflow__t { color: var(--color-text); }
.e-pflow__step.is-current .e-pflow__t { color: var(--color-primary-fill); }
.e-pflow__l { flex: 1; min-width: 24px; height: 2px; background: var(--color-border); }
.e-pflow__l.is-done { background: var(--color-primary-fill); }

/* ───────── Items recap strip (small chips of selected goods) ───────── */
.e-recap { background: var(--color-surface); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.e-recap__t { font-size: 13px; font-weight: 700; color: var(--color-text); }
.e-recap__t strong { color: var(--color-primary-fill); }
.e-recap__chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.e-recap__chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; background: #fff; border: 1px solid var(--color-border); border-radius: 999px; font-size: 12px; font-weight: 600; }
.e-recap__chip__img { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; }
.e-recap__chip strong { font-family: var(--font-mono); color: var(--color-text-muted); }
.e-recap__edit { font-size: 12px; color: var(--color-primary-fill); font-weight: 700; cursor: pointer; }

/* ───────── Line comparison cards ───────── */
.e-line-grid { display: grid; gap: 12px; }
.e-line {
  background: #fff;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 20px 22px;
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 18px;
  cursor: pointer;
  position: relative;
  align-items: center;
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.e-line:hover:not(.is-selected) { border-color: var(--color-border-strong); }
.e-line.is-selected { border-color: var(--color-primary-fill); box-shadow: 0 0 0 3px var(--color-focus-ring); background: linear-gradient(180deg, var(--color-primary-soft) 0%, #fff 30%); }
.e-line.is-cheapest { box-shadow: 0 0 0 1px var(--color-primary-fill); }
.e-line.is-cheapest.is-selected { box-shadow: 0 0 0 3px var(--color-focus-ring); }
.e-line.is-disabled { opacity: 0.6; cursor: not-allowed; }
@media (max-width: 720px) { .e-line { grid-template-columns: 56px 1fr; } .e-line__r { grid-column: 1 / -1; padding-top: 12px; border-top: 1px dashed var(--color-border); margin-top: 6px; display: flex; justify-content: space-between; align-items: flex-end; } }

.e-line__ribbon { position: absolute; top: -10px; left: 22px; padding: 3px 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 4px; }
.e-line__ribbon--cheap { background: var(--color-primary-fill); color: #fff; }
.e-line__ribbon--fast { background: var(--color-cta); color: #fff; }
.e-line__ribbon--rec { background: var(--color-sticker-yellow); color: var(--color-sticker-yellow-fg); }
.e-line__ribbon--vip { background: var(--color-secondary); color: #fff; }

.e-line__ic { width: 56px; height: 56px; border-radius: 14px; background: var(--color-surface); display: grid; place-items: center; font-size: 26px; flex-shrink: 0; }
.e-line.is-selected .e-line__ic { background: rgba(255,255,255,.7); }

.e-line__main { min-width: 0; }
.e-line__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.e-line__t { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -0.005em; color: var(--color-text); }
.e-line__s { font-size: 12px; color: var(--color-text-muted); line-height: 1.55; }
.e-line__features { display: flex; gap: 14px; margin-top: 8px; flex-wrap: wrap; font-size: 11px; }
.e-line__feature { display: inline-flex; align-items: center; gap: 5px; color: var(--color-text-muted); }
.e-line__feature--has { color: var(--color-primary-fill); }
.e-line__feature--has::before { content: "✓"; font-weight: 800; }
.e-line__feature--no::before { content: "✗"; color: var(--color-text-disabled); }

.e-line__r { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding-left: 18px; border-left: 1px solid var(--color-border); min-width: 140px; }
.e-line__price { font-family: var(--font-display); font-size: 24px; font-weight: 900; color: var(--color-text); letter-spacing: -0.015em; line-height: 1; font-variant-numeric: tabular-nums; }
.e-line.is-cheapest .e-line__price { color: var(--color-primary-fill); }
.e-line__per-kg { font-size: 11px; color: var(--color-text-muted); font-family: var(--font-mono); }
.e-line__eta { font-size: 12px; font-weight: 700; color: var(--color-text); margin-top: 4px; padding: 3px 9px; background: var(--color-surface); border-radius: 999px; }
.e-line__radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--color-border-strong); background: #fff; display: grid; place-items: center; margin-top: 8px; }
.e-line.is-selected .e-line__radio { border-color: var(--color-primary-fill); }
.e-line.is-selected .e-line__radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary-fill); }

/* —— Detail expandable —— */
.e-line__detail { grid-column: 1 / -1; padding-top: 16px; margin-top: 4px; border-top: 1px dashed var(--color-border); display: none; }
.e-line.is-selected .e-line__detail { display: block; }
.e-line__detail__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 12px; }
@media (max-width: 720px) { .e-line__detail__grid { grid-template-columns: 1fr 1fr; } }
.e-line__detail-cell { font-size: 11px; }
.e-line__detail-cell__k { color: var(--color-text-muted); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.e-line__detail-cell__v { font-size: 13px; font-weight: 700; color: var(--color-text); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* —— Mini routing diagram —— */
.e-route { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 12px 14px; background: var(--color-surface); border-radius: 10px; font-size: 12px; flex-wrap: wrap; }
.e-route__pin { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--color-text); white-space: nowrap; }
.e-route__pin__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary-fill); }
.e-route__pin--end .e-route__pin__dot { background: var(--color-cta); }
.e-route__arrow { color: var(--color-text-muted); font-size: 14px; line-height: 1; }
.e-route__via { color: var(--color-text-muted); font-style: italic; }

/* ───────── Package config card (right rail) ───────── */
.e-pkg-config { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 84px; }
@media (max-width: 980px) { .e-pkg-config { position: static; } }
.e-pkg-card { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 18px 20px; }
.e-pkg-card__h { font-family: var(--font-display); font-size: 14px; font-weight: 800; margin: 0 0 12px; letter-spacing: -0.005em; display: flex; align-items: center; gap: 8px; }
.e-pkg-card__h .ic { width: 22px; height: 22px; border-radius: 6px; background: var(--color-primary-soft); color: var(--color-primary-fill); display: grid; place-items: center; font-size: 12px; font-weight: 900; }

/* —— Bar chart (compare-line snapshot) —— */
.e-bar { display: grid; grid-template-columns: 70px 1fr auto; gap: 8px; padding: 8px 0; align-items: center; font-size: 12px; border-bottom: 1px dashed var(--color-border); }
.e-bar:last-child { border-bottom: 0; }
.e-bar__name { font-size: 11px; font-weight: 700; color: var(--color-text-muted); }
.e-bar.is-selected .e-bar__name { color: var(--color-primary-fill); }
.e-bar__track { height: 12px; background: var(--color-surface); border-radius: 6px; overflow: hidden; position: relative; }
.e-bar__fill { height: 100%; background: var(--color-border-strong); border-radius: 6px; transition: width var(--duration-normal) var(--ease-out); }
.e-bar.is-selected .e-bar__fill { background: var(--color-primary-fill); }
.e-bar.is-cheapest .e-bar__fill { background: linear-gradient(90deg, var(--color-primary), var(--color-primary-fill)); }
.e-bar__v { font-family: var(--font-display); font-weight: 900; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* —— Weight donut —— */
.e-weight-vis { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; }
.e-weight-vis__donut { width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--color-primary-fill) 0% 65%, var(--color-cta) 65% 100%); position: relative; }
.e-weight-vis__donut::after { content: ""; position: absolute; inset: 16px; background: #fff; border-radius: 50%; }
.e-weight-vis__donut__t { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 900; font-size: 14px; color: var(--color-text); z-index: 1; line-height: 1; flex-direction: column; }
.e-weight-vis__donut__t small { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--color-text-muted); font-weight: 600; margin-top: 2px; }
.e-weight-vis__leg { font-size: 11px; }
.e-weight-vis__leg__row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
.e-weight-vis__leg__dot { width: 8px; height: 8px; border-radius: 2px; }
.e-weight-vis__leg__k { color: var(--color-text-muted); }
.e-weight-vis__leg__v { font-weight: 800; color: var(--color-text); margin-left: auto; font-variant-numeric: tabular-nums; }

/* —— Insurance row —— */
.e-ins-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--color-border); align-items: center; }
.e-ins-row:last-child { border-bottom: 0; }
.e-ins-row__t { font-size: 13px; font-weight: 700; }
.e-ins-row__s { font-size: 11px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.5; }
.e-ins-row__v { font-family: var(--font-display); font-weight: 900; font-size: 14px; color: var(--color-text); font-variant-numeric: tabular-nums; }
.e-ins-row__v--free { color: var(--color-primary-fill); }