/* Reuse the reference's existing sign-in illustration, typography and icon sprite. */
.auth-showcase.station-line-widget { display:block; min-height:0; color:#fff; padding:24px; min-width:0; border-radius:22px; font-family:var(--font); }
.station-line-widget::before,.station-line-widget::after { display:none; }
.station-line-widget > * { position:relative; z-index:1; }
.station-line-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:22px; }
.station-line-heading h4 { color:#fff; margin:0; font-size:17px; line-height:1.4; }
.station-line-heading p { color:#b8c2d0; margin:5px 0 0; font-size:12px; }
.station-line-heading > span { font-size:11px; line-height:1.5; color:#b8c2d0; text-align:end; max-width:40%; }
.station-line-widget .station-line-chips { margin:0 0 12px; gap:10px; flex-wrap:wrap; }
.station-line-chips > span { min-height:36px; font-size:12px; font-weight:700; padding:9px 14px; }
.station-line-chips .icon { width:17px; height:17px; flex-shrink:0; }
.station-line-widget .station-line-canvas { height:268px; margin:0; border-radius:26px; box-shadow:inset 0 0 0 1px #ffffff05; backdrop-filter:none; }
.station-line-scroll { width:100%; height:100%; overflow-x:auto; overflow-y:hidden; border-radius:inherit; direction:ltr; scrollbar-width:thin; scrollbar-color:#718096 #202e43; overscroll-behavior-inline:contain; }
.station-line-scroll:focus-visible { outline:3px solid #8ee9f7; outline-offset:4px; }
.station-line-track { position:relative; width:100%; min-width:var(--station-min-width,0); height:100%; }
.station-line-lane { position:absolute; inset-block:0; inset-inline:clamp(76px,8%,100px); }
.station-line-road { position:absolute; top:130px; left:0; right:0; height:5px; border-radius:999px; background:#df1f2d; box-shadow:0 0 0 6px #ffffff06; }
.station-line-fill { width:var(--progress,0%); height:100%; border-radius:inherit; background:#16a34a; transition:width .5s ease; }
.station-line-stops { margin:0; padding:0; list-style:none; }
.station-line-widget .station-line-node { top:113px; left:var(--station-left); right:auto; width:144px; transform:translateX(-50%); }
.station-line-widget .station-line-node .station-line-dot { box-sizing:border-box; width:24px; height:24px; margin:0 auto 15px; border:6px solid var(--navy-900); background:#fff; box-shadow:0 0 0 3px #df1f2d; border-radius:50%; }
.station-line-widget .station-line-node.is-confirmed .station-line-dot { box-shadow:0 0 0 3px #16a34a; }
.station-line-node strong { display:block; width:100%; margin:0; text-align:center; color:#d4d8e0; font-size:14px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.station-line-widget .station-line-node small { display:block; color:#a9b5c6; font-size:10px; line-height:1.5; margin-top:4px; }
.station-line-widget .station-line-node .sr-only { width:1px; height:1px; margin:-1px; padding:0; border:0; box-shadow:none; }
.station-line-widget .station-line-bus { width:44px; height:44px; left:var(--bus-left); top:105px; transform:translateX(-50%); border-radius:15px; color:#fff; z-index:2; animation:none; transition:left .5s ease; }
.station-line-bus .icon { width:25px; height:25px; }
.station-line-bus::after { display:none; }
.station-line-widget .station-line-eta { z-index:3; top:16px; right:4%; min-width:108px; max-width:calc(100% - 32px); padding:12px 16px; border-radius:16px; pointer-events:none; }
.station-line-eta strong { color:#fff; font-size:24px; line-height:1.2; }
.station-line-eta span { color:#aeb8c7; font-size:11px; max-width:240px; line-height:1.4; }
.station-line-widget .station-line-status { z-index:3; bottom:17px; left:4%; padding:12px 15px; border-radius:16px; max-width:85%; font-size:12px; pointer-events:none; }
.station-line-status .icon { flex-shrink:0; width:20px; height:20px; }
.station-line-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:24px; }
.station-line-metrics strong { display:block; color:#fff; font-size:23px; line-height:1.3; direction:ltr; unicode-bidi:isolate; }
.station-line-metrics span { display:block; margin-top:6px; color:#aeb8c7; font-size:12px; line-height:1.5; }
.station-line-footnote { margin-top:18px; display:flex; align-items:center; flex-wrap:wrap; gap:12px; color:#aeb8c7; }
.station-line-footnote > small { font-size:10px; line-height:1.5; }
.station-line-scroll-actions { display:flex; align-items:center; gap:8px; margin-inline-start:auto; font-size:10px; }
.station-line-scroll-actions[hidden] { display:none; }
.station-line-scroll-actions button { display:grid; place-items:center; width:44px; height:44px; background:#ffffff0d; color:#fff; border:1px solid #ffffff26; border-radius:10px; cursor:pointer; }
.station-line-scroll-actions button:hover { background:#ffffff20; }
.station-line-scroll-actions button:focus-visible { outline:3px solid #8ee9f7; outline-offset:2px; }
.station-line-scroll-actions button:first-child .icon { transform:rotate(180deg); }
.station-line-scroll-actions .icon { width:17px; height:17px; }
.station-line-empty { position:absolute; top:125px; left:0; right:0; text-align:center; margin:0; font-size:13px; color:#c3ccda; }
[dir="rtl"] .station-line-eta, [dir="rtl"] .station-line-status { direction:rtl; }
[dir="rtl"] .station-line-scroll-actions { direction:ltr; }
@media (max-width:760px) { .auth-showcase.station-line-widget { padding:18px 14px; border-radius:18px; } .station-line-heading { margin-bottom:18px; gap:10px; } .station-line-chips > span { font-size:10px; padding:7px 10px; min-height:32px; } .station-line-widget .station-line-chips { gap:7px; } .station-line-metrics { gap:12px; } .station-line-metrics strong { font-size:20px; } .station-line-metrics span { font-size:10px; } }
@media (max-width:420px) { .station-line-heading { flex-direction:column; gap:5px; } .station-line-heading > span { max-width:none; text-align:start; } .station-line-heading h4 { font-size:15px; } .station-line-lane { inset-inline:58px; } .station-line-widget .station-line-node { width:110px; } .station-line-node strong { font-size:12px; } .station-line-metrics { gap:8px; } .station-line-metrics strong { font-size:18px; } }
@media (prefers-reduced-motion:reduce) { .station-line-fill,.station-line-widget .station-line-bus { transition:none; } }

.route-progress-legend, .route-progress-legend > span { display:inline-flex; align-items:center; gap:8px; font-size:12px; }
.route-progress-legend { gap:16px; flex-wrap:wrap; }
.legend-passed, .legend-remaining { display:inline-block; width:22px; height:5px; border-radius:3px; flex-shrink:0; }
.osm-map-legend .legend-passed, .legend-passed { background:#16a34a; }
.osm-map-legend .legend-remaining, .legend-remaining { background:#df1f2d; }

/* Compact station line in every account, including phone and tablet layouts. */
.auth-showcase.station-line-widget { padding:14px; border-radius:14px; }
.station-line-widget .station-line-heading { margin-bottom:10px;gap:10px; }
.station-line-heading h4 { font-size:14px; }
.station-line-heading p,.station-line-heading>span { font-size:10px; }
.station-line-widget .station-line-chips { margin-bottom:8px;gap:6px; }
.station-line-chips>span { min-height:26px;padding:5px 8px;font-size:10px; }
.station-line-chips .icon { width:13px;height:13px; }
.station-line-widget .station-line-canvas { height:180px;border-radius:14px; }
.station-line-road { top:81px;height:4px; }
.station-line-widget .station-line-node { top:74px; }
.station-line-widget .station-line-node .station-line-dot { width:18px;height:18px;border-width:4px;margin-bottom:9px;box-shadow:0 0 0 2px #df1f2d; }
.station-line-widget .station-line-node.is-confirmed .station-line-dot { box-shadow:0 0 0 2px #16a34a; }
.station-line-node strong { font-size:11px; }
.station-line-widget .station-line-node small { font-size:9px;margin-top:2px; }
.station-line-widget .station-line-bus { top:65px;width:32px;height:32px;border-radius:10px; }
.station-line-bus .icon { width:19px;height:19px; }
.station-line-widget .station-line-eta { top:7px;min-width:80px;padding:6px 9px;border-radius:9px; }
.station-line-eta strong { font-size:18px; }
.station-line-eta span { font-size:9px; }
.station-line-widget .station-line-status { bottom:6px;padding:5px 9px;font-size:10px;border-radius:9px; }
.station-line-status .icon { width:14px;height:14px; }
.station-line-metrics { margin-top:12px;gap:10px; }
.station-line-metrics strong { font-size:17px; }
.station-line-metrics span { font-size:10px;margin-top:3px; }
.station-line-footnote { margin-top:10px;gap:8px; }
.station-line-footnote .route-progress-legend,.station-line-footnote .route-progress-legend>span { font-size:10px;gap:6px; }
.station-line-empty { top:80px;font-size:11px; }
/* Keep parent child selection inside the station-line header, including before departure. */
.station-line-parent .station-line-heading{flex-wrap:wrap}
.station-line-parent .family-child-bar{flex:1 0 100%;width:100%;margin:0 0 8px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);box-sizing:border-box}
.station-line-parent .family-child-bar label,.station-line-parent .family-child-bar>.icon{color:#cad5e7}
.station-line-parent .family-child-bar select{color:#fff;background:transparent}
.station-line-parent .family-child-bar option{color:#172235;background:#fff}
.family-station-waiting .empty-state{padding:22px 16px 28px}
.family-station-waiting .empty-state h4{color:#fff}
.family-station-waiting .empty-state p{color:#becbe0}
.station-line-heading .family-connection{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid #6a778d;color:#dce4ef;background:#273347;white-space:nowrap}
.family-connection i{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0}
.station-line-heading .family-connection.is-live{color:#a0efcb;background:#153f35;border-color:#367e68}

.station-line-bus .station-vehicle-art{width:24px;height:30px;object-fit:contain;display:block}.station-line-driver .station-vehicle-art{width:17px;height:22px;object-fit:contain;vertical-align:middle}