/* The Island Metro page is a live tool: keep its page-specific introduction
   compact so its controls and map are reachable without consuming a screen. */
.spi-topic-page:has(.spi-transit) .spi-topic-hero { min-height:0; margin:.5rem 0 1rem; padding:1rem 1.25rem; border-radius:1rem; background:#075985; box-shadow:0 .65rem 1.5rem rgba(7,45,57,.14); }
.spi-topic-page:has(.spi-transit) .spi-topic-hero h1 { max-width:none; margin-bottom:.35rem; font-size:clamp(2rem,4vw,2.5rem); }
.spi-topic-page:has(.spi-transit) .spi-topic-hero .spi-deck { margin:0; font-size:1rem; line-height:1.45; }
.spi-topic-page:has(.spi-transit) .spi-topic-hero .spi-eyebrow { display:none; }
.spi-transit { max-width:76rem; margin:1rem auto; padding:clamp(.8rem,2vw,1.25rem); border:1px solid #b8d9d8; border-radius:1rem; background:#f8fffe; color:#123d47; }
.spi-transit h2,.spi-transit h3 { color:#075985; font-family:Georgia,'Times New Roman',serif; }
.spi-transit h2 { margin:.15rem 0 .45rem; font-size:clamp(1.65rem,3vw,2.4rem); }
.spi-transit h3 { margin:0 0 .7rem; font-size:1.2rem; }
.spi-transit__intro { display:flex; justify-content:space-between; gap:1rem; align-items:start; }
.spi-transit__intro .spi-eyebrow { display:none; }
.spi-transit__intro p { max-width:52rem; margin:.25rem 0; line-height:1.55; }
.spi-transit__badges,.spi-transit__controls { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.spi-transit__badges span { padding:.42rem .65rem; border-radius:999px; background:#e1f6f1; color:#075d64; font-size:.8rem; font-weight:800; white-space:nowrap; }
.spi-transit__controls { margin:1.25rem 0 .55rem; }
.spi-transit__controls label { display:flex; gap:.45rem; align-items:center; font-weight:700; }
.spi-transit select,.spi-transit button { min-height:44px; padding:.5rem .7rem; border:1px solid #4c8586; border-radius:.45rem; background:#fff; color:#073b4c; font:inherit; }
.spi-transit button { cursor:pointer; font-weight:750; }
.spi-transit button:hover { background:#e7f7f4; }
.spi-transit button:disabled,.spi-transit select:disabled { opacity:.65; cursor:wait; }
.spi-transit button:focus-visible,.spi-transit select:focus-visible,.spi-transit a:focus-visible,.spi-transit__stop:focus-visible { outline:3px solid #d97706; outline-offset:3px; }
.spi-transit__status { min-height:1.5em; margin:.35rem 0 1rem; font-size:.92rem; }
.spi-transit__layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(17rem,1fr); gap:1rem; align-items:start; }
.spi-transit__map-wrap { min-width:0; }
.spi-transit__map { position:relative; height:clamp(20rem,55vw,37rem); border:1px solid #77a9a7; border-radius:.7rem; background:#dcefee; }
.spi-transit__map-activate { display:none; margin-top:.5rem; min-height:44px; }
.spi-transit__map-note { margin:.4rem 0; font-size:.8rem; color:#48636a; }
.spi-transit__side { max-height:37rem; overflow:auto; padding:.85rem; border:1px solid #c6dfdd; border-radius:.7rem; background:#fff; }
.spi-transit__stops { margin:0; padding:0; list-style:none; }
.spi-transit__stop { display:block; width:100%; min-height:44px; padding:.65rem .25rem; border:0; border-bottom:1px solid #d6e7e5; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; }
.spi-transit__stop:hover,.spi-transit__stop[aria-current="true"] { background:#eaf8f5; }
.spi-transit__arrival { display:block; margin-top:.18rem; color:#49646a; font-size:.86rem; }
.spi-transit__vehicle { margin:.35rem 0; padding:.45rem .6rem; border-radius:.4rem; background:#eef8f7; font-size:.9rem; }
.spi-transit__accessible { margin-top:1.25rem; padding-top:1rem; border-top:1px solid #c6dfdd; }
.spi-transit__accessible p { margin:.2rem 0; line-height:1.5; }
.spi-transit__source,.spi-transit__noscript { margin:.9rem 0 0; font-size:.88rem; line-height:1.5; }
.spi-transit .leaflet-popup-content { font:14px/1.4 system-ui,sans-serif; }
.spi-transit__bus-marker { width:1.55rem; height:1.55rem; border:2px solid #fff; border-radius:50%; box-sizing:border-box; box-shadow:0 1px 5px #244; }
@media (max-width:700px) { .spi-transit { margin-inline:-.25rem; border-radius:.7rem; } .spi-transit__intro { display:block; } .spi-transit__badges { margin-top:.75rem; } .spi-transit__layout { grid-template-columns:1fr; } .spi-transit__side { max-height:none; } .spi-transit__map { height:clamp(18rem,75vh,28rem); } .spi-transit__accessible ol { columns:1; } }
@media (pointer:coarse) { .spi-transit__map-activate { display:inline-flex; align-items:center; } }
@media (prefers-reduced-motion:reduce) { .spi-transit * { scroll-behavior:auto !important; } }

/* Distinguish moving buses from the smaller circular stop markers. */
.spi-transit__bus-marker { display:grid; place-items:center; color:#fff; font:800 8px/1 system-ui,sans-serif; }