/* ===== Stops Page — stop list spine + transfer bullets ===== */

/* Ensure the header icon uses the standard size from site.css,
   but visually fills the box if the PNG/SVG has extra whitespace */
.bullet-logo.line-bullet{
  transform: scale(1.18);
  transform-origin:center;
}

/* Keep the site.css header sizing (often written for a.brand), but make it non-clickable */
.brand-static{
  cursor: default;
  pointer-events: none;
}

/* ===== Stop List (clean spine + bullet transfers) ===== */
.stoplist{
  margin-top:18px;
  max-width:950px;
}

.stoplist .stops{
  position:relative;
  padding-left:34px;     /* room for spine + nodes */
  display:grid;
  gap:18px;              /* space between stops */
}

/* Blue spine (thicker) */
.stoplist .stops::before{
  content:"";
  position:absolute;
  left:15px;             /* spine x */
  top:6px;
  bottom:6px;
  width:6px;             /* thicker spine */
  border-radius:999px;
  background:#0b4aa9;    /* deep transit-blue */
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}

.stop{
  position:relative;
  display:block;
  min-height:28px;
}

/* Stop node (bigger + centered on the stop label) */
.stop::before{
  content:"";
  position:absolute;
  left:-27px;            /* re-align dot center with thicker spine */
  top:50%;               /* center vertically */
  transform:translateY(-50%);
  width:20px;
  height:20px;
  border-radius:999px;
  background:#0b4aa9;
  box-shadow:
    0 0 0 5px rgba(11,74,169,0.14),
    0 10px 24px rgba(0,0,0,.45);
}

/* ===== FIX: multi-line transfer row alignment ===== */
/* Pin this specific stop’s node to the first text line */
.stop.node-fix::before{
  top: 0.62em !important;   /* scales with font size */
  transform: none !important;
}

/* Stop name row: bullets live AFTER the name */
.stop-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

.stop-name{
  font-size:20px;
  font-weight:800;
  letter-spacing:.1px;
  color:#ffffff;
  line-height:1.15;
  margin:0;
}

/* Optional inline note (e.g., Metro-North) */
.stop-note{
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.55);
  margin-left:6px;
  white-space:nowrap;
}

/* Transfers */
.stop-xfers{
  display:inline-flex;
  align-items:center;
  gap:1px;              /* tighter spacing between bullets */
  flex-wrap:wrap;
}

/* ===== Transfers: REAL IMAGES ===== */
.xicon{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  padding:0;
  margin:0;
}

.xicon-img{
  width:44px;
  height:44px;
  object-fit:contain;
  display:block;

  transform: scale(var(--z, 1));
  transform-origin:center;
  will-change: transform;
}

/* Bump ONLY numeric bullets (your preferred visual consistency value) */
.xicon.num .xicon-img{
  --z: 1.06;
}

/* ===== Mobile ===== */
@media (max-width:640px){
  .stop-name{ font-size:18px; }
  .stoplist .stops{ gap:16px; }

  .xicon{
    width:40px;
    height:40px;
    flex:0 0 40px;
  }

  .xicon-img{
    width:40px;
    height:40px;
  }

  .stop-xfers{
    gap:1px;   /* keep tight spacing on mobile */
  }

  /* Slightly stronger bump on small screens */
  .xicon.num .xicon-img{
    --z: 1.08;
  }
}