/* 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; }

/* ---- Operational source browser ---- */
.operations-layout { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(0, 1.6fr); gap: var(--sp-4); align-items: start; }
.operations-browser { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.operations-filters { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--sp-3); }
.service-list { max-height: 560px; overflow: auto; border: 1px solid var(--ink-100); border-radius: var(--radius-md); }
.service-row {
  width: 100%; border: 0; border-bottom: 1px solid var(--ink-100); background: var(--surface); color: var(--ink-900);
  padding: var(--sp-3); display: grid; gap: 2px; text-align: right; cursor: pointer;
}
.service-row:last-child { border-bottom: 0; }
.service-row:hover { background: var(--ink-50); }
.service-row.selected { background: var(--primary-50); box-shadow: inset -3px 0 0 var(--primary-600); }
.service-name { font-weight: 800; font-size: var(--fs-sm); }
.service-route { color: var(--ink-700); font-size: var(--fs-xs); }
.service-meta { display: flex; justify-content: space-between; gap: var(--sp-2); color: var(--ink-500); font-size: var(--fs-2xs); }
.service-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.service-summary > div { background: var(--ink-50); border-radius: var(--radius-md); padding: var(--sp-3); }
.service-summary span { display: block; color: var(--ink-500); font-size: var(--fs-2xs); }
.service-summary strong { display: block; font-size: var(--fs-sm); margin-top: 3px; }
.stop-table-wrap { max-height: 560px; overflow: auto; }
.source-invalid { color: var(--red-700); font-weight: 800; }
.linklike { all: unset; cursor: pointer; color: var(--primary-700); font-weight: 700; text-decoration: underline; }
.linklike:focus-visible { outline: 3px solid var(--primary-500); outline-offset: 2px; border-radius: 3px; }

/* ---- Proposed decision review ---- */
.decision-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.decision-summary { background: var(--purple-50); color: var(--purple-800); border-radius: var(--radius-pill); padding: 8px 14px; font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; }
.decision-filters { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; align-items: end; gap: var(--sp-4); }
.decision-card { border: 1px solid var(--ink-100); border-radius: var(--radius-lg); background: var(--surface); overflow: clip; }
.decision-card.has-choice { border-color: var(--purple-600); }
.decision-card > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-3); padding: var(--sp-4); }
.decision-card > summary::-webkit-details-marker { display: none; }
.decision-card > summary::before { content: "⌄"; grid-column: 1; grid-row: 1; color: var(--ink-500); transform: rotate(90deg); transition: transform .15s ease; }
.decision-card[open] > summary::before { transform: rotate(0); }
.decision-card .qid { color: var(--primary-700); font-weight: 900; font-size: var(--fs-xs); grid-column: 2; }
.decision-title { font-size: var(--fs-md); font-weight: 800; grid-column: 2; }
.decision-card-status { grid-column: 3; grid-row: 1 / span 2; font-size: var(--fs-2xs); color: var(--amber-800); background: var(--amber-50); border-radius: var(--radius-pill); padding: 4px 10px; white-space: nowrap; }
.decision-card.has-choice .decision-card-status { color: var(--purple-800); background: var(--purple-50); }
.decision-card-body { border-top: 1px solid var(--ink-100); padding: var(--sp-5); }
.decision-question { font-size: var(--fs-sm); line-height: 1.9; }
.decision-refs { font-size: var(--fs-2xs); color: var(--ink-500); margin-top: var(--sp-2); }
.decision-card fieldset { border: 0; padding: 0; margin: var(--sp-4) 0 0; }
.decision-card legend { font-size: var(--fs-xs); font-weight: 800; margin-bottom: var(--sp-2); }
.decision-option { display: grid; grid-template-columns: auto auto 1fr auto; align-items: start; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--ink-100); border-radius: var(--radius-md); margin-top: var(--sp-2); cursor: pointer; }
.decision-option:hover { border-color: var(--primary-500); background: var(--ink-50); }
.decision-option.recommended { background: var(--purple-50); border-color: var(--purple-100); }
.decision-option.selected { box-shadow: 0 0 0 2px var(--purple-600); }
.decision-option input { margin-top: 5px; accent-color: var(--purple-700); }
.decision-option-number { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink-100); font-size: var(--fs-xs); font-weight: 900; }
.decision-option-text { font-size: var(--fs-xs); line-height: 1.85; }
.analyst-reason { margin-top: var(--sp-3); color: var(--purple-800); background: var(--purple-50); border-radius: var(--radius-md); padding: var(--sp-3); font-size: var(--fs-xs); }

@media (max-width: 980px) {
  .operations-layout { grid-template-columns: 1fr; }
  .operations-browser { position: static; }
  .service-list { max-height: 420px; }
  .decision-filters { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .operations-filters, .service-summary { grid-template-columns: 1fr 1fr; }
  .decision-toolbar { align-items: flex-start; flex-direction: column; }
  .decision-card > summary { grid-template-columns: auto 1fr; }
  .decision-card-status { grid-column: 2; grid-row: auto; justify-self: start; }
  .decision-option { grid-template-columns: auto auto 1fr; }
  .decision-option .badge { grid-column: 3; justify-self: start; white-space: normal; }
}

@media (max-width: 480px) {
  .operations-filters, .service-summary { grid-template-columns: 1fr; }
}