/* Day switcher on a stop's departures (js/stopdays.js): "‹ Today ›", Pick a time, route chips, a day with no service. */
.sd-bar { position: sticky; top: 0; z-index: 3; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: var(--sp-2, 8px); min-height: 60px; padding: var(--sp-1, 4px) 0 var(--sp-2, 8px); background: var(--surface); }
.overlay .sd-bar { background: var(--bg); }
.sd-arrow { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-pill, 999px); background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); transition: transform .18s, opacity .15s, background-color .15s; }
.sd-arrow:active { transform: scale(.94); }
.sd-arrow .i { width: 22px; height: 22px; }
.sd-arrow[data-sd="next"] .i { transform: scaleX(-1); }
.sd-arrow[aria-disabled="true"] { opacity: .3; pointer-events: none; }
.sd-day { position: relative; min-width: 0; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border-radius: var(--r-chip, 12px); padding: 2px var(--sp-1, 4px); }
.sd-day:active { background: var(--surface-2); }
.sd-title { font-size: var(--fs-row, 18px); font-weight: 700; line-height: 1.2; }
.sd-sub { font-size: var(--fs-detail, 14px); color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; }
.sd-date, .sd-time { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: var(--fs-body); border: 0; padding: 0; margin: 0; cursor: pointer; min-width: 0; }
.sd-tools { margin: 0 -2px; padding: 2px 2px 10px; }
.sd-pick { position: relative; flex: none; overflow: hidden; }
.sd-empty { display: block; padding: var(--sp-5, 20px); }
.sd-empty b { display: block; font-size: var(--fs-row, 18px); font-weight: 700; margin-bottom: var(--sp-2, 8px); }
.sd-next { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.sd-more { margin-top: 10px; }
.sd-swipe { touch-action: pan-y; }
@media (max-width: 360px) { .sd-bar { gap: 4px; } .sd-title { font-size: var(--fs-row); } }
@media (prefers-reduced-motion: reduce) { .sd-arrow { transition: none; } }