/* Live train-position diagram — collapsible per line card. Scoped under .sd-diagram so
   nothing here can clash with station.css. */
.sd-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 10px 0 0; padding: 6px 12px;
  background: #f1f3f5; border: 1px solid var(--line, #e5e7eb); border-radius: 999px;
  font-family: inherit; font-size: 0.74rem; font-weight: 800; color: #374151;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.sd-toggle .sd-chev { transition: transform .2s; font-size: 0.8rem; line-height: 1; }
.sd-toggle[aria-expanded="true"] .sd-chev { transform: rotate(90deg); }
.sd-diagram { display: none; margin-top: 10px; }
.sd-diagram.open { display: block; }

/* Two-line (split-by-direction) mock layout */
.sd-diagram .sd-lane { margin: 0 0 14px; }
.sd-diagram .sd-lane:last-child { margin-bottom: 0; }
.sd-diagram .sd-lane-title { font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; color: #374151; margin-bottom: 2px; padding: 0 5%; }
.sd-diagram .sd-lane-title .sd-arr { font-size: 0.9rem; line-height: 1; }
/* Split lanes: pull the rail + its furniture up (default rail sits 60px down) so each lane TITLE sits
   close to its OWN line, instead of floating up near the lane above and reading as part of it. */
.sd-diagram .sd-lane .track { height: 86px; }
.sd-diagram .sd-lane .rail, .sd-diagram .sd-lane .node, .sd-diagram .sd-lane .train { top: 44px; }
.sd-diagram .sd-lane .nlabel { top: 58px; }
.sd-diagram .sd-lane .nlabel.mid { top: 60px; }

.sd-diagram .track { position: relative; height: 118px; }
.sd-diagram .rail { position: absolute; left: 6%; right: 6%; top: 60px; height: 4px; border-radius: 2px; }
.sd-diagram .node { position: absolute; top: 60px; transform: translate(-50%,-50%); width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 3px solid #1a1a2e; z-index: 3; }
/* Neighbour rings sit ABOVE trains with a hollow centre, so a train stopped AT that
   station (currentLocation "At X") frames inside the ring instead of hiding it. */
.sd-diagram .node:not(.mid) { background: transparent; z-index: 6; }
.sd-diagram .node.mid { width: 17px; height: 17px; border-width: 4px; }
.sd-diagram .nlabel { position: absolute; top: 74px; font-size: 0.64rem; font-weight: 700; color: #6b7280; line-height: 1.18; }
/* Neighbour nodes sit a touch out from centre (25/75) with each label centred directly under its
   node, on mobile and desktop alike. */
.sd-diagram .node.sd-nL { left: 25%; }
.sd-diagram .node.sd-nR { left: 75%; }
.sd-diagram .nlabel.sd-nL-lbl, .sd-diagram .nlabel.sd-nR-lbl { transform: translateX(-50%); text-align: center; max-width: 26%; }
.sd-diagram .nlabel.sd-nL-lbl { left: 25%; }
.sd-diagram .nlabel.sd-nR-lbl { left: 75%; }
.sd-diagram .nlabel.mid { left: 50%; transform: translateX(-50%); text-align: center; max-width: 34%; color: #1a1a2e; font-weight: 900; top: 76px; }

/* Mobile — long Overground station names like "Dalston Kingsland" overlap
   "Hackney Central" at the standard 25/50/75% positions. Push neighbours
   further out (15/85%), shrink labels slightly, and align each side label
   AWAY from the centre to give the middle station name dedicated width. */
@media (max-width: 540px) {
  .sd-diagram .node.sd-nL { left: 15%; }
  .sd-diagram .node.sd-nR { left: 85%; }
  .sd-diagram .nlabel.sd-nL-lbl,
  .sd-diagram .nlabel.sd-nR-lbl {
    transform: none;
    max-width: 30%;
    font-size: 0.58rem;
    line-height: 1.1;
  }
  .sd-diagram .nlabel.sd-nL-lbl { left: 2%; text-align: left; }
  .sd-diagram .nlabel.sd-nR-lbl { left: auto; right: 2%; text-align: right; }
  .sd-diagram .nlabel.mid { max-width: 40%; font-size: 0.62rem; }
}
.sd-diagram .dirrow { display: flex; justify-content: space-between; gap: 12px; font-size: 0.62rem; font-weight: 800; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 6px; padding: 0 5%; }
.sd-diagram .dirrow span { max-width: 46%; line-height: 1.25; }
.sd-diagram .dirrow span:first-child { text-align: left; }
.sd-diagram .dirrow span:last-child { text-align: right; }

.sd-diagram .train { position: absolute; top: 60px; width: 48px; height: 18px; transform: translate(-50%,-50%); z-index: 5; transition: left .9s linear, opacity .6s linear; pointer-events: none; }
.sd-diagram .train .eta { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-size: 0.58rem; font-weight: 700; color: #1a1a2e; white-space: nowrap; }
.sd-diagram .train .eta.held { color: #c0392b; font-weight: 800; }
.sd-diagram .train .eta.cancelled { color: #c0392b; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.sd-diagram .m-comet.cancelled .core { background: #c0392b !important; opacity: 0.7; }
@keyframes sd-pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
.sd-diagram .train .halo { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%,-50%); border: 2px solid; opacity: 0; }
.sd-diagram .train.atstation .halo { animation: sd-halo 1.5s ease-out infinite; }
@keyframes sd-halo { 0%{ transform:translate(-50%,-50%) scale(1); opacity:.55 } 100%{ transform:translate(-50%,-50%) scale(2.8); opacity:0 } }

.sd-diagram .arrived-status { position: absolute; left: 50%; top: 2px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; pointer-events: none; z-index: 6; }
.sd-diagram .arrived-status .a-line { font-size: 0.55rem; font-weight: 800; color: #166534; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }

/* comet marker */
.sd-diagram .m-comet .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2.5px rgba(255,255,255,.95),0 1px 2px rgba(0,0,0,.3); z-index: 2; }
.sd-diagram .m-comet .tail { position: absolute; top: 50%; transform: translateY(-50%); height: 7px; width: 22px; border-radius: 4px; z-index: 1; }
.sd-diagram .m-comet.dir-right .tail { right: 50%; }
.sd-diagram .m-comet.dir-left  .tail { left: 50%; }
.sd-diagram .m-comet.halted .tail { display: none; }
.sd-diagram .m-comet.halted .core { animation: sd-pulse 1.1s ease-in-out infinite; box-shadow: 0 0 0 2.5px rgba(255,255,255,.95),0 0 0 4.5px rgba(192,57,43,.55); }

@media (max-width:540px){
  .sd-diagram .nlabel { font-size: 0.56rem; }
  .sd-diagram .nlabel.mid { font-size: 0.62rem; max-width: 32%; }
  .sd-diagram .dirrow { font-size: 0.56rem; }
  .sd-diagram .arrived-status .a-line { font-size: 0.5rem; }
}