/* v5 — SRC-05 (official v3) additions: OD catalogue, leg network, simulator.
   Uses only the shared semantic tokens, so the light and dark themes both apply. */

/* ---------- tables shared by the OD catalogue and the leg path ---------- */
.table-wrap { overflow-x: auto; }
.od-table, .legs-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.od-table th, .legs-table th { text-align: start; font-size: var(--fs-xs); color: var(--ink-500); font-weight: 700; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--ink-100); white-space: nowrap; }
.od-table td, .legs-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--ink-100); vertical-align: top; }
.od-table td.num { direction: ltr; text-align: end; font-variant-numeric: tabular-nums; }
.od-table .badge { white-space: nowrap; }
.od-actions { min-width: 160px; }
.od-actions-in { display: flex; flex-wrap: wrap; gap: 4px; }
.od-pair { min-width: 190px; }
.od-table td .badge { margin-bottom: 2px; }
.od-detail td { background: var(--ink-50); }
.od-op h4 { font-size: var(--fs-sm); margin: 0; }
.od-op input { width: 100%; }
.od-filters { align-items: end; }
.od-filters input, .od-filters select, .param-field input[list], .param-field input[type=search] {
  min-height: 40px; padding: 0 var(--sp-3); border: 1px solid var(--ink-150); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-900); font: inherit;
}
.od-check { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); min-height: 40px; }
.od-op input { min-height: 38px; padding: 0 var(--sp-3); border: 1px solid var(--ink-150); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-900); font: inherit; }

/* ---------- leg schematic ---------- */
.legs-stage { background: var(--ink-50); border: 1px solid var(--ink-100); border-radius: var(--radius-md); overflow-x: auto; }
.legs-svg { display: block; width: 100%; height: auto; min-width: 560px; }
.leg-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; stroke: var(--ink-300); }
.leg-line.single { stroke: var(--ink-300); }
.leg-line.double { stroke: var(--primary-500); stroke-width: 2.6; }
.leg-line.mixed { stroke: var(--amber-600); stroke-width: 2.2; }
.leg-line.sub { stroke: var(--purple-600); stroke-width: 3.4; }
.leg-line.sel { stroke: var(--green-600); stroke-width: 5; }
.leg-g.split .leg-line { opacity: .28; }
.leg-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; pointer-events: stroke; }
.leg-hit:hover { stroke: color-mix(in srgb, var(--primary-500) 25%, transparent); }
.node-a.term { fill: var(--surface); stroke: var(--ink-500); stroke-width: 1.6; }
.node-a.junction { fill: var(--engine-600); stroke: var(--surface); stroke-width: 1.4; }
.mark circle { stroke: var(--surface); stroke-width: 2.4; }
.mark.origin circle { fill: var(--green-600); }
.mark.dest circle { fill: var(--red-600); }
.mark text, .path-lbl { font-size: 12px; fill: var(--ink-900); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; font-weight: 700; }
.path-lbl { font-size: 10px; font-weight: 500; }
.legs-legend { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-500); }
.legs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legs-legend i.lg { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--ink-300); }
.legs-legend i.lg.double { border-top-color: var(--primary-500); }
.legs-legend i.lg.mixed { border-top-color: var(--amber-600); }
.legs-legend i.lg.sel { border-top-color: var(--green-600); border-top-width: 5px; }
.legs-legend i.nd { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.legs-legend i.nd.term { background: var(--surface); border: 2px solid var(--ink-500); }
.legs-legend i.nd.junction { background: var(--engine-600); }

/* ---------- simulator ---------- */
.sim-controls .sim-slider { flex: 1 1 260px; }
.sim-controls input[type=range] { width: 100%; accent-color: var(--engine-600); }
.sim-controls input[type=number], .sim-controls select { min-height: 38px; padding: 0 var(--sp-3); border: 1px solid var(--ink-150); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink-900); font: inherit; }
.sim-now { stroke: var(--red-600); stroke-width: 1.6; stroke-dasharray: 5 4; }
.sim-dot { stroke: var(--surface); stroke-width: 1.6; }
.sim-dot.loaded { fill: var(--primary-600); }
.sim-dot.empty { fill: var(--amber-600); }
.sim-reserve { fill: color-mix(in srgb, var(--red-600) 14%, transparent); }
.sim-map { height: 300px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--ink-100); background: var(--ink-50); }
.sim-strip { display: flex; align-items: center; gap: var(--sp-3); direction: ltr; } /* same left=origin orientation as the time–space diagram and the map */
.sim-end { font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.sim-track { position: relative; flex: 1; height: 34px; border-radius: 17px; background: var(--ink-50); border: 1px solid var(--ink-100); overflow: hidden; }
.sim-track::before { content: ""; position: absolute; inset-inline: 10px; top: 50%; border-top: 2px dashed var(--ink-300); }
.sim-train { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; opacity: 0; transition: opacity .15s; border: 2px solid var(--surface); }
.sim-train.loaded { background: var(--primary-600); }
.sim-train.empty { background: var(--amber-600); }