/* Reusable content components shared across views */

/* ---- Chain flow (monthly -> weekly -> daily -> charter -> wagon ticket) ---- */
.chain-flow { display: flex; align-items: stretch; gap: var(--sp-2); flex-wrap: wrap; }
.chain-node {
  flex: 1 1 140px;
  min-width: 140px;
  border: 1.5px solid var(--ink-150);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  background: var(--surface);
  position: relative;
}
.chain-node.active { border-color: var(--primary-600); background: var(--primary-50); }
.chain-node .cn-title { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-900); }
.chain-node .cn-buyer { font-size: var(--fs-2xs); color: var(--ink-500); margin-top: 2px; }
.chain-node .cn-arrow {
  position: absolute; inset-inline-end: -18px; top: 50%; transform: translateY(-50%);
  color: var(--ink-300); font-size: 18px; z-index: 2;
}
html[dir="rtl"] .chain-node .cn-arrow { transform: translateY(-50%) scaleX(-1); }
.chain-node:last-child .cn-arrow { display: none; }
@media (max-width: 700px) {
  .chain-flow { flex-direction: column; }
  .chain-node .cn-arrow { display: none; }
}

/* ---- Actor list (overview) ---- */
.actor-item { border: 1px solid var(--ink-100); border-radius: var(--radius-md); padding: var(--sp-3); }
.actor-item .actor-name { font-weight: 700; font-size: var(--fs-sm); }
.actor-item .actor-supported { font-size: var(--fs-xs); color: var(--green-700); margin-top: 4px; }
.actor-item .actor-open { font-size: var(--fs-xs); color: var(--amber-700); margin-top: 4px; }

/* ---- Journey card (overview) ---- */
.journey-card {
  border: 1px solid var(--ink-100); border-radius: var(--radius-md); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2); cursor: pointer; background: var(--surface);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.journey-card:hover { border-color: var(--primary-500); box-shadow: var(--shadow-sm); }
.journey-card h4 { font-size: var(--fs-sm); }
.journey-card p { font-size: var(--fs-xs); color: var(--ink-500); }
.journey-card .jc-refs { margin-top: auto; }

/* ---- Package card (market) ---- */
.package-card {
  border: 1.5px solid var(--ink-100); border-radius: var(--radius-lg); padding: var(--sp-4);
  background: var(--surface); display: flex; flex-direction: column; gap: var(--sp-2);
}
.package-card.selected { border-color: var(--primary-600); box-shadow: 0 0 0 3px var(--primary-100); }
.package-card .pc-route { font-size: var(--fs-md); font-weight: 700; }
.package-card .pc-route .arrow { color: var(--ink-300); margin: 0 6px; }
.package-card .pc-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--ink-500); }
.package-card .pc-meta b { color: var(--ink-900); direction: ltr; unicode-bidi: isolate; }
.package-card .pc-rivals { font-size: var(--fs-2xs); color: var(--ink-500); background: var(--ink-50); border-radius: var(--radius-sm); padding: 6px 10px; }
.package-card .pc-footer { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); }

/* ---- Glossary card (commitments) ---- */
.glossary-card { border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: var(--sp-4); background: var(--surface); }
.glossary-card h4 { font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; }
.glossary-card p { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 6px; }
.glossary-card .gc-evidence { margin-top: var(--sp-3); font-size: var(--fs-2xs); color: var(--primary-700); }

/* ---- KPI mini row inside cards ---- */
.mini-kpi-row { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.mini-kpi { min-width: 120px; }
.mini-kpi .lbl { font-size: var(--fs-2xs); color: var(--ink-500); }
.mini-kpi .val { font-size: var(--fs-lg); font-weight: 800; direction: ltr; unicode-bidi: isolate; }

/* ---- Assumption / open-question card ---- */
.qcard { border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: var(--sp-4); background: var(--surface); }
.qcard .qid { font-weight: 800; color: var(--primary-700); font-size: var(--fs-sm); }
.qcard h4 { margin-top: 2px; }
.qcard .qeffect { font-size: var(--fs-xs); color: var(--ink-500); margin-top: var(--sp-2); }
.qcard .qdecision { margin-top: var(--sp-3); padding: var(--sp-3); background: var(--purple-50); border-radius: var(--radius-md); font-size: var(--fs-xs); color: var(--purple-800); }

/* ---- Scenario route row ---- */
.scenario-row { border: 1px solid var(--ink-100); border-radius: var(--radius-lg); padding: var(--sp-4); background: var(--surface); }
.scenario-row .sr-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.scenario-row .sr-route { font-weight: 700; }
.scenario-row .sr-rel-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-2); }
.rel-pill { font-size: var(--fs-2xs); padding: 3px 9px; border-radius: var(--radius-pill); font-weight: 700; }
.rel-pill.competing { background: var(--red-100); color: var(--red-800); }
.rel-pill.complementary { background: var(--green-100); color: var(--green-800); }

/* ---- Practice / sensitivity ---- */
.practice-bid-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-bottom: 1px dashed var(--ink-100); }
.practice-bid-row:last-child { border-bottom: none; }
.sensitivity-row { display: flex; align-items: center; gap: var(--sp-3); }
.sensitivity-row input[type=range] { flex: 1; }