/* Train graph material and service palette. Geometry stays in SVG; themes only
   change tokens, so pausing or switching appearance never recolours history by
   the train's current assignment. */
.train-graph-card {
  --graph-surface: #191c22;
  --graph-chrome: rgba(255, 255, 255, .055);
  --graph-border: rgba(255, 255, 255, .12);
  --graph-grid: rgba(255, 255, 255, .08);
  --graph-text: #f3f5f8;
  --graph-secondary: #adb5c3;
  --graph-selected: rgba(71, 150, 255, .2);
  --graph-accent: #83b8ff;
  --graph-local: #5ca5ff;
  --graph-express: #ff6d79;
  --graph-through-local: #c19bff;
  --graph-through-express: #ffb24c;
  --graph-short: #50d4c1;
  --graph-return: #b3becd;
  --graph-departure: #d5a277;
  color: var(--graph-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  font-variant-numeric: tabular-nums;
}
html.cityrail-light-ui .train-graph-card {
  --graph-surface: #fff;
  --graph-chrome: rgba(20, 40, 70, .04);
  --graph-border: rgba(20, 40, 70, .12);
  --graph-grid: #e4e9f0;
  --graph-text: #202a3a;
  --graph-secondary: #566276;
  --graph-selected: #e5efff;
  --graph-accent: #1768c4;
  --graph-local: #1675d1;
  --graph-express: #d93a49;
  --graph-through-local: #8652be;
  --graph-through-express: #b86b08;
  --graph-short: #078578;
  --graph-return: #657287;
  --graph-departure: #995d32;
}
#ctrl-center-overlay:not([data-active-tab="train-graph"]) .train-graph-card,
#ctrl-center-overlay[data-active-tab="train-graph"] #ctrl-content-grid > .ctrl-card:not(.train-graph-card) {
  display: none;
}
.train-graph-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0 2px 6px;
}
.train-graph-heading h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.3;
}
#ctrl-center-overlay .train-graph-card :is(button, select, input) {
  box-sizing: border-box;
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--graph-text);
  background: var(--graph-chrome);
  border: 1px solid var(--graph-border);
  border-radius: 10px;
  min-height: 36px;
  padding: 0 12px;
}
#ctrl-center-overlay .train-graph-card button {
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
#ctrl-center-overlay .train-graph-card button:hover { background: var(--graph-selected); }
}
#ctrl-center-overlay .train-graph-card button:active { box-shadow: inset 0 0 0 2px var(--graph-border); }
#ctrl-center-overlay .train-graph-card :is(button, select, input, svg):focus-visible {
  outline: 2px solid var(--graph-accent);
  outline-offset: 3px;
}
.train-graph-heading select { max-width: 100%; min-width: 140px; }
#ctrl-center-overlay .train-graph-card option { background: var(--graph-surface); }
.train-graph-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.train-graph-segmented, .train-graph-zoom { display: flex; gap: 3px; }
.train-graph-segmented {
  padding: 3px;
  border-radius: 11px;
  background: var(--graph-chrome);
}
.train-graph-segmented button { border-color: transparent; background: transparent; min-height: 30px; }
#ctrl-center-overlay .train-graph-card button[aria-pressed="true"] {
  color: var(--graph-accent);
  background: var(--graph-selected);
  font-weight: 600;
}
.train-graph-duration {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--graph-secondary);
}
.train-graph-duration input { width: 78px; background: var(--graph-surface); padding: 0 8px; }
.train-graph-zoom button { width: 36px; padding: 0; font-size: 20px; }
.train-graph-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px 14px;
  margin: 4px 4px;
  font-size: 13px;
  color: var(--graph-secondary);
}
.train-graph-legend span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.train-graph-card [data-service="local"] { --service-color: var(--graph-local); }
.train-graph-card [data-service="express"] { --service-color: var(--graph-express); }
.train-graph-card [data-service="through-local"] { --service-color: var(--graph-through-local); }
.train-graph-card [data-service="through-express"] { --service-color: var(--graph-through-express); }
.train-graph-card [data-service="short"] { --service-color: var(--graph-short); }
.train-graph-card [data-service="return"] { --service-color: var(--graph-return); }
.train-graph-card [data-service="departure"] { --service-color: var(--graph-departure); }
.train-graph-swatch { width: 24px; height: 0; border-top: 2px solid var(--service-color); }
.train-graph-viewport {
  min-height: 420px;
  height: calc(var(--ui-layout-height, 100dvh) - 230px);
  background: var(--graph-surface);
  border: 1px solid var(--graph-border);
  border-radius: 12px;
  overflow: auto;
  overscroll-behavior: contain;
}
#cct-train-graph-svg {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  overscroll-behavior: contain;
  user-select: none;
  cursor: grab;
}
#cct-train-graph-svg.is-dragging { cursor: grabbing; }
#cct-train-graph-svg .grid { stroke: var(--graph-grid); stroke-width: 1; }
#cct-train-graph-svg .train-line {
  fill: none;
  stroke: var(--service-color);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
#cct-train-graph-svg text {
  fill: var(--graph-secondary);
  font-family: inherit;
  font-size: 12px;
  pointer-events: none;
}
#cct-train-graph-svg .train-graph-station-label { fill: var(--graph-text); }
#cct-train-graph-svg .train-graph-now { stroke: var(--graph-accent); stroke-width: 1; stroke-dasharray: 3 5; opacity: .6; }
.train-graph-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 6px 2px 0;
  color: var(--graph-secondary);
  font-size: 12px;
  line-height: 1.6;
}
.train-graph-footer output { white-space: nowrap; }
@media (max-width: 600px) {
  .train-graph-heading h2 { font-size: 20px; }
  #ctrl-center-overlay .train-graph-card :is(button, select, input) { min-height: 40px; }
  .train-graph-legend { justify-content: flex-start; gap: 8px 14px; font-size: 12px; }
  .train-graph-viewport { min-height: 440px; height: 65dvh; }
}
@media (prefers-reduced-motion: reduce) {
  #ctrl-center-overlay .train-graph-card button { transition: none; }
}
@media (prefers-contrast: more) {
  .train-graph-card { --graph-border: var(--graph-secondary); --graph-grid: var(--graph-secondary); }
}

.train-graph-card [data-service="limited"] { --service-color: #bf5af2; }
.train-graph-card [data-service="direct"] { --service-color: #00b8d9; }