.station-diagram {
  --station-color: #66815b;
  --station-surface: #fcfdfb;
  --station-accent: var(--station-color);
  --station-line-color: #bdcabd;
  --station-accent: color-mix(in srgb, var(--station-color) 82%, #66757a);
  --station-line-color: color-mix(in srgb, var(--station-color) 36%, #d7dfdc);
  box-sizing: border-box;
  margin: 0;
  padding: 19px 20px 20px;
  border: 1px solid #d7dfdc;
  border-radius: 16px;
  background: var(--station-surface);
  color: #13262f;
  font-family: inherit;
  box-shadow: none;
}

.station-diagram .station-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0;
  padding: 0 0 14px;
  border-bottom: 1px solid #e8eee8;
  scroll-margin-top: 78px;
}

.station-heading { flex: 1; min-width: 0; }
.station-diagram .station-eyebrow {
  display: block;
  margin: 0 0 4px;
  color: var(--station-accent);
  font-size: 8px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .1em;
}
.station-diagram .station-title {
  margin: 0;
  color: #13262f;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.station-count {
  flex: none;
  padding: 3px 7px;
  border: 1px solid #e1e7e1;
  border-radius: 5px;
  color: #7a8981;
  font: 9px/1.6 'SFMono-Regular', Consolas, monospace;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.station-canvas { position: relative; width: 100%; margin-top: 17px; isolation: isolate; }
.station-connectors {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.station-connectors > path,
.station-connectors > line,
.station-connectors > polyline {
  fill: none;
  stroke: var(--station-line-color);
  stroke-width: 1.25px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.station-connectors marker path { fill: none; stroke: var(--station-line-color); stroke-width: 1.1px; }

.station-diagram .station-list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--station-columns, 4), minmax(0, 1fr));
  gap: 23px 14px;
  margin: 0;
  padding: 0 3px;
  list-style: none;
}
.station-diagram .station-node {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  text-align: center;
}
.station-marker {
  position: relative;
  display: flex;
  width: 100%;
  height: 25px;
  flex: none;
  align-items: flex-end;
  justify-content: center;
}
.station-number {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 3px;
  color: #8a978e;
  font: 9px/1.5 'SFMono-Regular', Consolas, 'PingFang SC', sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: .015em;
}
.station-diagram .station-dot {
  box-sizing: border-box;
  display: block;
  flex: none;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--station-accent);
  box-shadow: 0 0 0 3px var(--station-surface);
}
.station-endpoint .station-number { color: var(--station-accent); }
.station-endpoint .station-dot { outline: 1px solid var(--station-line-color); outline-offset: 2px; }
.station-diagram .station-node-label {
  display: block;
  max-width: 100%;
  margin: 7px 0 0;
  padding: 0 3px;
  background: var(--station-surface);
  color: #50635b;
  font-size: 12px;
  font-weight: 450;
  line-height: 1.7;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.station-endpoint .station-node-label { color: #344d43; font-weight: 550; }

/* Layout follows the measured canvas width, independently of either page. */
.station-diagram[data-layout='vertical'] { padding: 17px 18px 15px; }
.station-diagram[data-layout='vertical'] .station-header { padding-bottom: 12px; }
.station-diagram[data-layout='vertical'] .station-title { font-size: 15px; }
.station-diagram[data-layout='vertical'] .station-canvas { margin-top: 9px; }
.station-diagram .station-list[data-layout='vertical'] {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}
.station-diagram .station-list[data-layout='vertical'] .station-node {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  grid-row: auto !important;
  grid-column: auto !important;
  min-height: 42px;
  padding: 6px 0;
  align-items: center;
  text-align: left;
}
.station-list[data-layout='vertical'] .station-marker {
  display: grid;
  grid-template-columns: 42px 8px;
  gap: 10px;
  width: 60px;
  height: 22px;
  align-items: center;
  justify-content: start;
}
.station-list[data-layout='vertical'] .station-number {
  position: static;
  transform: none;
  padding: 0;
  text-align: right;
}
.station-diagram .station-list[data-layout='vertical'] .station-node-label {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.75;
}

@media print {
  .station-diagram { break-inside: avoid; box-shadow: none; }
  .station-connectors, .station-dot { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}