/* Engine-specific components: formula blocks, parameter forms, pipeline stepper,
   conflict matrix, capacity funnel, sensitivity sliders. Layered on tokens/base/components,
   which this mockup shares with ../railway-capacity-marketplace/ for visual continuity. */

/* ---- Source traceability strip (every screen carries one) ---- */
.trace-strip {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-2xs); color: var(--engine-700);
  background: var(--engine-50); border: 1px solid var(--engine-100);
  border-radius: var(--radius-md); padding: 8px 12px; margin-bottom: var(--sp-4);
  max-width: 100%;
}
.trace-strip .ic { width: 15px; height: 15px; flex-shrink: 0; }
.trace-strip > div { min-width: 0; overflow-wrap: break-word; flex: 1 1 auto; }
.trace-strip b { font-weight: 800; }
.trace-strip a { color: var(--engine-800); font-weight: 700; }

/* ---- Formula block ---- */
.formula-block {
  background: var(--ink-900); color: #eef2ff;
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  overflow-x: auto;
  font-size: var(--fs-md);
  line-height: 2;
  direction: ltr;
  text-align: center;
}
.formula-block .term { color: #a5b4fc; }
.formula-block .op { color: #fbbf24; margin: 0 6px; }
.formula-caption {
  font-size: var(--fs-2xs); color: var(--ink-500); margin-top: var(--sp-2); text-align: center;
  direction: rtl;
}

/* ---- Pipeline stepper (Cb -> Cs -> batches -> conflicts -> Cr -> network) ---- */
.pipeline {
  display: flex; align-items: stretch; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-5);
}
.pipeline-node {
  flex: 1 1 130px; min-width: 130px;
  border: 1.5px solid var(--ink-150); border-radius: var(--radius-md);
  padding: var(--sp-3); background: var(--surface); position: relative;
  text-align: center; cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.pipeline-node:hover { border-color: var(--engine-500); }
.pipeline-node.active { border-color: var(--engine-600); background: var(--engine-50); }
.pipeline-node .pn-step { font-size: var(--fs-2xs); color: var(--engine-700); font-weight: 800; }
.pipeline-node .pn-title { font-size: var(--fs-sm); font-weight: 700; margin-top: 2px; }
.pipeline-node .pn-value { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 4px; direction: ltr; unicode-bidi: isolate; }
.pipeline-node .pn-arrow {
  position: absolute; inset-inline-end: -16px; top: 50%; transform: translateY(-50%);
  color: var(--ink-300); font-size: 16px; z-index: 2;
}
html[dir="rtl"] .pipeline-node .pn-arrow { transform: translateY(-50%) scaleX(-1); }
.pipeline-node:last-child .pn-arrow { display: none; }
@media (max-width: 900px) {
  .pipeline { flex-direction: column; }
  .pipeline-node .pn-arrow { display: none; }
}

/* ---- Capacity funnel (Cb -> Cs -> Cr, shrinking bars) ---- */
.funnel-row { display: flex; align-items: center; gap: var(--sp-3); padding: 7px 0; }
.funnel-row .fr-label { flex: 0 0 150px; font-size: var(--fs-xs); color: var(--ink-700); font-weight: 600; }
.funnel-row .fr-track { flex: 1; height: 22px; background: var(--ink-100); border-radius: var(--radius-sm); overflow: hidden; }
.funnel-row .fr-fill { height: 100%; border-radius: var(--radius-sm); transition: width .25s ease; }
.funnel-row .fr-fill.cb { background: var(--ink-300); }
.funnel-row .fr-fill.cs { background: var(--engine-500); }
.funnel-row .fr-fill.cr { background: var(--primary-600); }
.funnel-row .fr-fill.net { background: var(--amber-600); }
.funnel-row .fr-value { flex: 0 0 110px; font-size: var(--fs-sm); font-weight: 800; direction: ltr; unicode-bidi: isolate; text-align: left; }

/* ---- Parameter form grid ---- */
.param-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3) var(--sp-4); }
@media (max-width: 700px) { .param-grid { grid-template-columns: 1fr; } }
.param-field { display: flex; flex-direction: column; gap: 4px; }
.param-field label { font-size: var(--fs-xs); font-weight: 700; color: var(--ink-700); display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.param-field .p-sym { font-size: var(--fs-2xs); color: var(--engine-700); font-weight: 800; direction: ltr; }
.param-field input[type=number], .param-field select {
  font-family: inherit; font-size: var(--fs-sm); padding: 8px 10px; border-radius: var(--radius-md);
  border: 1px solid var(--ink-150); background: var(--surface); color: var(--ink-900); width: 100%;
}
.param-field input:focus, .param-field select:focus { border-color: var(--engine-500); outline: none; box-shadow: 0 0 0 3px var(--engine-100); }
.param-field .p-hint { font-size: var(--fs-2xs); color: var(--ink-500); }
.param-field input[type=range] { width: 100%; accent-color: var(--engine-600); }

/* ---- Conflict matrix ---- */
.conflict-matrix { border-collapse: collapse; font-size: var(--fs-xs); }
.conflict-matrix th, .conflict-matrix td { border: 1px solid var(--ink-100); padding: 8px 10px; text-align: center; white-space: nowrap; }
.conflict-matrix thead th { background: var(--ink-50); font-size: var(--fs-2xs); color: var(--ink-500); }
.conflict-matrix td.self { background: var(--ink-50); color: var(--ink-300); }
.conflict-matrix td.ok { background: var(--green-50); color: var(--green-800); font-weight: 800; }
.conflict-matrix td.conflict { background: var(--red-50); color: var(--red-800); font-weight: 800; cursor: pointer; }
.conflict-matrix td.conflict:hover { background: var(--red-100); }

/* ---- Batch timeline (directional batches over a day) ---- */
.batch-timeline { position: relative; border: 1px solid var(--ink-100); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-4) var(--sp-6); overflow-x: auto; max-width: 100%; }
.batch-track { position: relative; height: 34px; background: var(--ink-50); border-radius: var(--radius-sm); margin-top: var(--sp-2); min-width: 640px; }
.batch-track .batch-block {
  position: absolute; top: 3px; height: 28px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-2xs); font-weight: 800; color: #fff; direction: ltr;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.4) inset;
}
.batch-block.dir-a { background: var(--primary-600); }
.batch-block.dir-b { background: var(--amber-600); }
.batch-block.turn { background: repeating-linear-gradient(45deg, var(--ink-300), var(--ink-300) 4px, var(--ink-150) 4px, var(--ink-150) 8px); }
.batch-axis { display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--ink-500); margin-top: 6px; direction: ltr; min-width: 640px; }
.batch-legend { display: flex; gap: var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-2xs); flex-wrap: wrap; }
.batch-legend .bl-item { display: flex; align-items: center; gap: 6px; }
.batch-legend .bl-swatch { width: 12px; height: 12px; border-radius: 3px; }

/* ---- Validation list ---- */
.validation-item { display: flex; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--radius-md); border: 1px solid var(--ink-100); align-items: flex-start; }
.validation-item .ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; }
.validation-item.pass { border-color: var(--green-100); background: var(--green-50); color: var(--green-800); }
.validation-item.warn { border-color: var(--amber-100); background: var(--amber-50); color: var(--amber-800); }
.validation-item.fail { border-color: var(--red-100); background: var(--red-50); color: var(--red-800); }
.validation-item .vi-rule { font-weight: 700; font-size: var(--fs-sm); }
.validation-item .vi-detail { font-size: var(--fs-xs); margin-top: 2px; opacity: .9; }
.validation-item .vi-ref { font-size: var(--fs-2xs); margin-top: 4px; opacity: .75; }

/* ---- Sensitivity chart (simple bar/line via divs, no chart lib) ---- */
.sens-chart { display: flex; align-items: flex-end; gap: 6px; height: 140px; border-bottom: 1px solid var(--ink-150); padding: 0 4px; }
.sens-chart .sc-bar { flex: 1; background: var(--engine-500); border-radius: 4px 4px 0 0; min-width: 6px; position: relative; transition: height .2s ease; }
.sens-chart .sc-bar.baseline { background: var(--ink-300); }
.sens-axis { display: flex; justify-content: space-between; font-size: var(--fs-2xs); color: var(--ink-500); margin-top: 4px; direction: ltr; }

/* ---- Engine badge variant (indigo, alongside badge-real/demo/pending/warn) ---- */
.badge-engine { background: var(--engine-100); color: var(--engine-800); }

/* ---- Network graph (simple SVG block-sharing diagram) ---- */
.network-graph-wrap { border: 1px solid var(--ink-100); border-radius: var(--radius-md); padding: var(--sp-3); background: var(--ink-50); }
.network-graph-wrap svg { width: 100%; height: auto; display: block; }
.net-route-label { font-size: 11px; font-weight: 700; fill: var(--ink-700); }
.net-block-shared { stroke: var(--red-600); stroke-width: 3; }
.net-block-free { stroke: var(--ink-300); stroke-width: 2; }