:root { --highway: #d96535; --highway-dark: #9e3f23; --asphalt: #1b2924; --signal: #9fca45; }
.corridor-body { background: var(--paper); }
.corridor-hero { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(310px,.65fr); gap: 20px 5vw; align-items: center; padding: 28px clamp(14px,5vw,74px) 24px; overflow: hidden; background: radial-gradient(circle at 83% -35%, rgba(202,244,106,.45), transparent 39%), linear-gradient(112deg,#ece8db 0 68%,#e1ddce 68%); }
.corridor-hero-copy h1, .corridor-heading h2, .map-route-heading h2, .all-routes-heading h2 { margin: 0; font-family: var(--display); letter-spacing: -2.5px; line-height: .98; }
.corridor-hero-copy h1 { max-width: 850px; font-size: clamp(38px,5.2vw,66px); line-height: 1.02; }
.corridor-hero-copy h1 em { color: var(--highway); font-style: normal; }
.corridor-hero-copy > p:last-child { max-width: 690px; margin: 15px 0 0; color: #506058; font-size: 15px; line-height: 1.5; }
.stop-ticket { position: relative; display: grid; grid-template-columns: 78px 1fr; gap: 20px; align-items: center; min-height: 130px; padding: 21px 25px; overflow: hidden; color: white; border: 1px solid #314039; background: var(--asphalt); box-shadow: 8px 8px 0 var(--highway); }
.stop-ticket::after { content: "ЕГОРЬЕВСКОЕ ШОССЕ"; position: absolute; right: -6px; bottom: -4px; color: rgba(255,255,255,.055); font: 650 21px var(--display); letter-spacing: 1.5px; white-space: nowrap; }
.stop-ticket-code { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; border: 4px solid white; border-radius: 50%; color: var(--lime); font: 750 23px var(--display); }
.stop-ticket div { position: relative; z-index: 1; display: flex; flex-direction: column; }
.stop-ticket small { color: #92a79d; font-size: 9px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; }
.stop-ticket strong { margin-top: 3px; font: 650 clamp(21px,3vw,32px) var(--display); letter-spacing: -1.4px; }
.stop-ticket p { margin: 6px 0 0; color: #b6c5bd; font-size: 12px; }
.stop-ticket i { position: absolute; top: 0; right: 29px; width: 4px; height: 100%; background: repeating-linear-gradient(to bottom,var(--highway) 0 15px,transparent 15px 25px); opacity: .6; }
.trip-choice { grid-column: 1/-1; max-width: 1320px; width: 100%; margin: 4px auto 0; padding: 14px; border: 1px solid #c5c5b8; background: rgba(255,255,255,.72); box-shadow: 5px 5px 0 rgba(18,60,47,.07); }
.trip-choice > p { margin: 0 0 9px; color: var(--forest); font-size: 12px; font-weight: 700; }
.corridor-direction { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.corridor-direction button { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; min-height: 82px; padding: 13px 16px; border: 1px solid #bfc1b8; color: #36463e; background: #fff; cursor: pointer; text-align: left; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.corridor-direction button:hover { border-color: var(--leaf); transform: translateY(-1px); }
.direction-mark { display: grid; place-items: center; width: 42px; height: 42px; color: var(--forest); border: 2px solid currentColor; border-radius: 50%; font: 650 21px var(--display); }
.direction-copy { display: flex; min-width: 0; flex-direction: column; }
.direction-copy small { color: #6f7b75; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.direction-copy strong { margin-top: 2px; font: 650 19px var(--display); letter-spacing: -.7px; }
.direction-copy em { margin-top: 4px; color: #627069; font-size: 12px; font-style: normal; }
.corridor-direction button.active { color: white; border-color: var(--forest); background: var(--forest); box-shadow: inset 5px 0 0 var(--lime); }
.corridor-direction button.active .direction-mark { color: var(--lime); }
.corridor-direction button.active small { color: var(--lime); }
.corridor-direction button.active em { color: #d7e1dc; }
.transit-filter { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.transit-filter button { display: flex; min-height: 64px; padding: 11px 14px; flex-direction: column; justify-content: center; border: 1px solid #bfc1b8; color: #3b4a43; background: #fff; cursor: pointer; text-align: left; }
.transit-filter strong { font: 650 14px var(--display); }
.transit-filter small { margin-top: 4px; color: #6b7771; font-size: 10px; }
.transit-filter button.active { color: #fff; border-color: var(--forest); background: var(--forest); box-shadow: inset 5px 0 0 var(--lime); }
.transit-filter button.active small { color: #d8e4de; }

.fare-payment { padding: 18px clamp(14px,5vw,74px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-light); }
.fare-payment-card { display: grid; grid-template-columns: minmax(190px,.8fr) minmax(510px,2fr) minmax(260px,1fr); gap: 18px; align-items: center; max-width: 1320px; margin: 0 auto; padding: 14px 16px; border: 1px solid #d3d9d4; border-radius: 14px; background: #fff; box-shadow: 0 3px 12px rgba(18,60,47,.045); }
.fare-payment-heading { display: flex; align-items: center; gap: 11px; min-width: 0; }
.fare-payment-heading .eyebrow { margin: 0 0 2px; }
.fare-payment-heading h2 { margin: 0; font: 650 17px var(--display); letter-spacing: -.55px; line-height: 1.15; }
.fare-payment-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; color: #fff; border-radius: 11px; background: var(--forest); font: 650 18px var(--display); }
.payment-methods { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.payment-methods li { display: grid; grid-template-columns: 29px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; min-width: 0; min-height: 48px; padding: 7px 8px; border: 1px solid #e0e5e1; border-radius: 10px; background: #f7f9f7; }
.payment-methods li > span { display: grid; grid-row: 1/3; place-items: center; width: 29px; height: 29px; color: var(--forest); border: 1px solid #c9d7cf; border-radius: 9px; background: #eaf2ed; font: 700 12px var(--display); }
.payment-methods strong { overflow: hidden; color: var(--ink); font-size: 11px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.payment-methods small { overflow: hidden; color: #69756f; font-size: 9px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.payment-rules { display: grid; gap: 6px; padding-left: 15px; border-left: 1px solid #dfe3e0; }
.payment-rules p { display: flex; gap: 7px; align-items: flex-start; margin: 0; color: #5a6761; font-size: 10px; line-height: 1.35; }
.payment-rules p > span { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 50%; font-size: 12px; font-weight: 700; }
.payment-ban { color: #813d33!important; }
.payment-ban > span { color: #9a4437; background: #f7e6e2; }
.payment-ban strong { font-size: 10px; }
.payment-tap > span { color: var(--forest); background: #e8f1ec; }

.departure-section, .corridor-map-section, .all-routes-section { padding-inline: clamp(14px,5vw,74px); }
.departure-section { padding-top: 28px; padding-bottom: 34px; background: var(--paper-light); }
.corridor-heading, .map-route-heading, .all-routes-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; max-width: 1320px; margin: 0 auto 15px; }
.corridor-heading h2, .map-route-heading h2, .all-routes-heading h2 { font-size: clamp(26px,3.4vw,42px); }
.corridor-source { display: flex; align-items: center; gap: 10px; min-width: 245px; padding: 9px 12px; border: 1px solid #c7c6ba; background: #fff; }
.corridor-source > span { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #a0a59f; }
.corridor-source[data-state="live"] > span { background: #38a461; box-shadow: 0 0 0 6px rgba(56,164,97,.13); }
.corridor-source[data-state="cache"] > span { background: #d4a52c; }
.corridor-source[data-state="error"] > span { background: var(--rust); }
.corridor-source div { display: flex; flex-direction: column; }
.corridor-source strong { font-size: 13px; }
.corridor-source small { color: var(--muted); font-size: 10px; }
.stop-time-explainer { display: flex; align-items: center; gap: 11px; max-width: 1320px; margin: 0 auto 10px; padding: 10px 13px; border: 1px solid #b8c3bb; background: #edf3ea; }
.stop-time-explainer > span { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; color: var(--forest); border: 2px solid var(--forest); border-radius: 50%; font: 750 11px var(--display); }
.stop-time-explainer div { display: flex; flex-direction: column; }
.stop-time-explainer strong { font-size: 13px; }
.stop-time-explainer small { margin-top: 2px; color: #5b6861; font-size: 10px; }
.next-corridor-bus { display: grid; grid-template-columns: 106px 210px minmax(0,1fr) auto; gap: 20px; align-items: center; max-width: 1320px; min-height: 118px; margin: 0 auto 10px; padding: 15px 18px; color: #fff; border-left: 8px solid var(--route-color,var(--highway)); background: var(--forest-deep); box-shadow: 7px 7px 0 rgba(217,101,53,.18); }
.next-corridor-bus[hidden] { display: none!important; }
.next-corridor-bus.is-empty { color: var(--ink); border-left-color: #a5aaa3; background: #eeece3; box-shadow: none; }
.next-route-number { display: flex; min-height: 76px; padding: 8px; align-items: center; justify-content: center; flex-direction: column; color: white; border: 2px solid rgba(255,255,255,.8); background: var(--route-color,var(--highway)); }
.next-route-number small { color: rgba(255,255,255,.72); }
.next-route-number strong { margin-top: 3px; font: 750 23px var(--display); letter-spacing: -1px; }
.next-trip-times { display: flex; min-width: 0; align-items: center; gap: 12px; }
.trip-time-step { display: flex; min-width: 150px; flex-direction: column; }
.trip-time-step[hidden], .time-step-link[hidden] { display: none!important; }
.time-step-link { position: relative; width: 44px; height: 2px; flex: 0 0 44px; background: repeating-linear-gradient(90deg,var(--lime) 0 5px,transparent 5px 9px); opacity: .8; }
.time-step-link::after { content: ""; position: absolute; top: -3px; right: 0; width: 7px; height: 7px; border-top: 2px solid var(--lime); border-right: 2px solid var(--lime); transform: rotate(45deg); }
.next-route-destination { display: flex; min-width: 0; flex-direction: column; }
.next-corridor-bus small { color: #8ea299; font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.trip-time-step strong { margin-top: 2px; color: var(--lime); font: 750 36px var(--display); letter-spacing: -2px; }
.terminal-step strong { color: white; }
.trip-time-step > span { width: fit-content; margin-top: 3px; padding: 3px 6px; color: var(--forest-deep); background: var(--lime); font-size: 10px; font-weight: 700; }
.terminal-step > span { color: white; background: rgba(255,255,255,.15); }
.next-corridor-bus.has-two-times { grid-template-columns: 106px minmax(390px,500px) minmax(220px,1fr) auto; }
.next-route-destination strong { margin-top: 5px; font: 650 18px var(--display); line-height: 1.18; }
.next-route-destination > span { margin-top: 6px; color: #9fb0a8; font-size: 10px; }
.next-route-signal { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.18); font-size: 11px; white-space: nowrap; }
.next-route-signal i { width: 9px; height: 9px; border-radius: 50%; background: #8f9994; }
.next-route-signal[data-state="live"] i { background: var(--lime); box-shadow: 0 0 0 4px rgba(202,244,106,.13); }
.next-route-signal[data-state="empty"] i { background: #d8a431; }
.en-route-panel { max-width: 1320px; margin: 0 auto 10px; border: 1px solid #aeb8b1; background: #e8ede6; }
.en-route-panel[hidden] { display: none; }
.en-route-panel summary { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 13px; align-items: center; min-height: 58px; padding: 9px 13px; cursor: pointer; list-style: none; }
.en-route-panel summary::-webkit-details-marker { display: none; }
.en-route-panel summary > span { display: flex; min-width: 0; flex-direction: column; }
.en-route-panel summary small { color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.en-route-panel summary strong { font: 650 16px var(--display); }
.en-route-panel summary b { display: grid; place-items: center; width: 31px; height: 31px; color: white; border-radius: 50%; background: var(--forest); font: 700 12px var(--display); }
.en-route-panel summary em { color: var(--leaf); font-size: 9px; font-style: normal; font-weight: 700; text-transform: uppercase; }
.en-route-panel[open] summary em::before { content: "скрыть"; }
.en-route-panel[open] summary em { font-size: 0; }
.en-route-panel[open] summary em::before { font-size: 9px; }
.en-route-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; padding: 1px; border-top: 1px solid #bdc5bf; background: #bdc5bf; }
.en-route-card { display: grid; grid-template-columns: auto minmax(105px,auto) minmax(0,.7fr) minmax(95px,1fr); gap: 9px; align-items: center; min-width: 0; padding: 8px 10px; background: #fff; }
.en-route-times { display: grid; grid-template-columns: auto 11px auto; gap: 3px; align-items: center; }
.en-route-times strong { color: var(--forest); font: 650 14px var(--display); }
.en-route-times i { color: var(--route-color); font-size: 11px; font-style: normal; }
.en-route-arrival { color: var(--leaf); font-size: 9px; font-weight: 700; white-space: nowrap; }
.en-route-destination { display: flex; min-width: 0; flex-direction: column; padding-left: 8px; border-left: 1px solid var(--line); }
.en-route-destination small { color: var(--muted); font-size: 7px; font-weight: 700; text-transform: uppercase; }
.en-route-destination strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.en-route-destination time { color: var(--leaf); font: 650 11px var(--display); }
.upcoming-departures-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; max-width: 1320px; margin: 17px auto 9px; padding-bottom: 8px; border-bottom: 1px solid #c6c7bd; }
.upcoming-departures-heading[hidden] { display: none; }
.upcoming-departures-heading div { display: flex; flex-direction: column; }
.upcoming-departures-heading small { color: var(--highway); font-size: 8px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.upcoming-departures-heading strong { font: 650 18px var(--display); }
.upcoming-departures-heading > span { color: var(--muted); font-size: 9px; }
.departure-strip { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 7px; max-width: 1320px; margin: 0 auto; }
.departure-strip.is-upcoming-from-ramenskoye { grid-template-columns: repeat(3,minmax(0,1fr)); }
.departure-card { position: relative; min-width: 0; padding: 12px; border: 1px solid var(--line); background: #fff; }
.departure-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--route-color); }
.departure-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.route-chip { display: inline-grid; place-items: center; min-width: 35px; min-height: 23px; padding: 3px 6px; color: #fff; background: var(--route-color); font: 650 10px var(--display); }
.departure-stop-time { display: flex; flex-direction: column; text-align: right; }
.departure-stop-time small { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.departure-card time { color: var(--forest); font: 650 20px var(--display); }
.departure-card > strong { display: block; margin-top: 11px; font-size: 12px; line-height: 1.25; }
.departure-card > p { min-height: 28px; margin: 5px 0 0; color: var(--muted); font-size: 8px; line-height: 1.35; }
.departure-countdown { display: block; width: fit-content; margin-top: 8px; padding: 3px 6px; color: var(--forest-deep); background: var(--lime); font-size: 9px; font-weight: 700; }
.departure-card-direction { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: .35px; text-transform: uppercase; }
.departure-card-times { display: grid; grid-template-columns: minmax(0,1fr) 12px minmax(0,1fr) 12px minmax(0,1.15fr); gap: 4px; align-items: center; margin-top: 12px; }
.departure-card-time { display: flex; min-width: 0; flex-direction: column; }
.departure-card-time small { color: var(--muted); font-size: 7px; font-weight: 700; line-height: 1.25; text-transform: uppercase; }
.departure-card-time b { min-height: 25px; margin-top: 3px; overflow: hidden; font-size: 9px; line-height: 1.25; text-overflow: ellipsis; }
.departure-card-time time { margin-top: 2px; font-size: 19px; letter-spacing: -.5px; }
.departure-card-time.arrival time, .departure-card-time.destination time { color: var(--leaf); }
.departure-card-time time.is-unknown { font-size: 10px; letter-spacing: 0; }
.stop-time-basis { display: block; width: fit-content; margin-top: 2px; color: var(--warning, #8b672f); font-size: 7px; font-weight: 700; line-height: 1.2; }
.stop-time-basis[hidden] { display: none; }
.departure-card-time em { width: fit-content; max-width: 100%; margin-top: 4px; padding: 3px 4px; overflow: hidden; color: white; background: #40554b; font-size: 7px; font-style: normal; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.departure-card-time.arrival em, .departure-card-time.destination em { color: var(--forest-deep); background: var(--lime); }
.departure-card-arrow { position: relative; width: 14px; height: 2px; background: var(--route-color); opacity: .72; }
.departure-card-arrow::after { content: ""; position: absolute; top: -3px; right: 0; width: 6px; height: 6px; border-top: 2px solid var(--route-color); border-right: 2px solid var(--route-color); transform: rotate(45deg); }
.card-gps { display: flex; min-width: 0; align-items: center; gap: 5px; color: var(--muted); font-size: 7px; }
.card-gps i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #a3aaa6; }
.card-gps b { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.card-gps[data-state="live"] { color: var(--leaf); }
.card-gps[data-state="live"] i { background: #38a461; box-shadow: 0 0 0 3px rgba(56,164,97,.12); }
.card-gps[data-state="empty"] i { background: #d8a431; }
.card-gps[data-state="error"] { color: var(--rust); }
.departure-card .card-gps { margin-top: 9px; padding-top: 7px; border-top: 1px dashed var(--line); }
.en-route-card .card-gps { grid-column: 2/-1; }
.corridor-loading { grid-column: 1/-1; padding: 28px; color: var(--muted); border: 1px dashed #b8b9af; text-align: center; }
.corridor-note { max-width: 1320px; margin: 13px auto 0; color: var(--muted); font-size: 11px; }

.corridor-map-section { padding-top: 32px; padding-bottom: 38px; color: white; background: var(--asphalt); }
.map-route-heading { align-items: center; }
.live-summary { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; min-width: 210px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.16); }
.live-summary strong { grid-row: 1/3; color: var(--lime); font: 650 28px var(--display); }
.live-summary span { font-size: 11px; font-weight: 700; }
.live-summary small { color: #8fa299; font-size: 9px; }
.corridor-map-layout { display: grid; grid-template-columns: minmax(0,1fr) 240px; gap: 10px; max-width: 1320px; margin: 0 auto; }
.corridor-map-panel { position: relative; min-height: 430px; overflow: hidden; border: 1px solid #53635c; background: #cdd5ca; }
#corridor-map { height: 430px; }
.corridor-map-unavailable { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 30px; color: var(--ink); background: #d9ded2; text-align: center; }
.corridor-map-unavailable[hidden] { display: none; }
.corridor-map-caption { position: absolute; right: 12px; bottom: 12px; z-index: 500; display: flex; flex-wrap: wrap; gap: 11px; padding: 8px 10px; color: var(--ink); background: rgba(251,250,245,.94); font-size: 10px; }
.corridor-map-caption span { display: flex; align-items: center; gap: 5px; }
.corridor-map-caption i { width: 9px; height: 9px; border-radius: 50%; background: #8b9690; }
.corridor-map-caption i.target { border: 2px solid var(--forest); background: var(--lime); }
.corridor-map-caption i.live { background: #38a461; }
.corridor-map-caption i.old { background: #d4a52c; }
.corridor-stop-marker { width: 12px!important; height: 12px!important; margin: -6px 0 0 -6px!important; border: 3px solid white; border-radius: 50%; background: #60746a; box-shadow: 0 2px 5px rgba(0,0,0,.25); }
.corridor-stop-marker.target { width: 23px!important; height: 23px!important; margin: -11px 0 0 -11px!important; border: 5px solid var(--forest); background: var(--lime); box-shadow: 0 0 0 7px rgba(202,244,106,.28); }
.corridor-stop-label { padding: 2px 5px; border: 0; color: var(--forest); background: rgba(255,255,255,.9); box-shadow: none; font-size: 9px; font-weight: 700; }
.corridor-stop-label::before { display: none; }
.corridor-bus-wrapper { border: 0!important; background: transparent!important; }
.corridor-bus-stack { position: absolute; bottom: 8px; left: 0; display: flex; max-width: 220px; flex-wrap: wrap-reverse; gap: 4px; transform: translateX(-50%); }
.corridor-bus-marker { position: relative; display: grid; grid-template-columns: auto; min-width: 48px!important; min-height: 34px!important; place-items: center; padding: 4px 6px 3px; color: #35280b; border: 3px solid white; border-radius: 8px 8px 4px 4px; box-shadow: 0 4px 12px rgba(8,39,29,.3); }
.corridor-bus-marker::before { content: ""; position: absolute; top: 5px; left: 5px; width: 5px; height: 5px; border-radius: 1px; background: currentColor; box-shadow: 9px 0 0 currentColor; opacity: .52; }
.corridor-bus-marker::after { content: ""; position: absolute; bottom: -6px; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); z-index: -1; }
.corridor-bus-marker b { padding-top: 4px; font: 750 11px/1 var(--display); }
.corridor-bus-marker small { font-size: 5px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; }
.corridor-bus-marker.gps-ok { color: white; background: #248454; }
.corridor-bus-marker.schedule-only { color: #3b2b08; background: #e2aa2d; }
.route-pulse { display: flex; flex-direction: column; min-height: 430px; color: var(--ink); border: 1px solid #4f5f57; background: #f4f1e7; }
.route-pulse header { display: flex; flex-direction: column; padding: 13px 14px; color: white; background: #0b2019; }
.route-pulse header small { color: var(--highway); font-size: 8px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.route-pulse header strong { font: 650 17px var(--display); }
#route-pulse-list { display: grid; grid-template-columns: 1fr 1fr; }
.pulse-route { display: grid; grid-template-columns: 34px 1fr; gap: 6px; align-items: center; min-height: 42px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pulse-route:nth-child(2n) { border-right: 0; }
.pulse-route b { display: grid; place-items: center; min-height: 28px; color: white; background: var(--route-color); font: 650 9px var(--display); }
.pulse-route div { display: flex; min-width: 0; flex-direction: column; }
.pulse-route strong { font-size: 11px; }
.pulse-route small { color: var(--muted); font-size: 8px; }
.pulse-route[data-state="live"] strong { color: var(--leaf); }
.pulse-route[data-state="error"] strong { color: var(--rust); }
.route-pulse > p { margin: auto 12px 12px; padding-top: 11px; color: var(--muted); border-top: 1px solid var(--line); font-size: 9px; }

.all-routes-section { padding-top: 32px; padding-bottom: 42px; background: #f4f1e7; }
.schedule-filter { display: flex; border: 1px solid #bfc0b6; }
.schedule-filter button { padding: 7px 11px; border: 0; color: #5a665f; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.schedule-filter button + button { border-left: 1px solid #bfc0b6; }
.schedule-filter button.active { color: white; background: var(--forest); }
.route-cards { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); max-width: 1320px; margin: 0 auto 10px; border: 1px solid var(--line); }
.route-cards.few-routes { grid-template-columns: repeat(auto-fit,minmax(170px,240px)); justify-content: start; gap: 6px; border: 0; }
.route-cards.few-routes .route-summary-card { border: 1px solid var(--line); }
.route-summary-card { min-width: 0; padding: 10px 9px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.route-summary-card:nth-child(8n) { border-right: 0; }
.route-summary-card:nth-last-child(-n+8) { border-bottom: 0; }
.route-summary-card b { display: inline-grid; place-items: center; min-width: 37px; min-height: 25px; padding: 3px 6px; color: white; background: var(--route-color); font: 650 10px var(--display); }
.route-summary-card strong { display: block; margin-top: 8px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.route-summary-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; }
.corridor-timetable { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; max-width: 1320px; margin: 0 auto; }
.timetable-row { display: grid; grid-template-columns: 49px 76px minmax(0,1fr); gap: 9px; align-items: center; min-width: 0; padding: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.75); }
.timetable-row.is-past { opacity: .42; }
.timetable-row.is-next { border-color: var(--route-color); box-shadow: inset 4px 0 0 var(--route-color); }
.timetable-stop-time { display: flex; flex-direction: column; }
.timetable-stop-time small { color: var(--muted); font-size: 7px; font-weight: 700; text-transform: uppercase; }
.timetable-row time { color: var(--forest); font: 650 14px var(--display); }
.timetable-row div { display: flex; min-width: 0; flex-direction: column; }
.timetable-row strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.timetable-row small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.timetable-row.has-full-route { grid-template-columns: 49px minmax(0,1fr); }
.timetable-trip-times { display: grid; grid-template-columns: minmax(0,1fr) 10px minmax(0,1fr) 10px minmax(0,1.2fr); gap: 3px; align-items: center; }
.timetable-trip-times > span { display: flex; min-width: 0; flex-direction: column; }
.timetable-trip-times small { font-size: 6px; font-weight: 700; text-transform: uppercase; }
.timetable-trip-times i { color: var(--route-color); font-size: 12px; font-style: normal; font-weight: 800; }

@media (max-width:1050px) {
  .departure-strip { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .en-route-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .route-cards { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .route-summary-card { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .route-summary-card:nth-child(4n) { border-right: 0; }
  .route-summary-card:nth-last-child(-n+4) { border-bottom: 0; }
  .corridor-timetable { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .corridor-hero { grid-template-columns: 1fr; gap: 15px; padding-top: 18px; background: radial-gradient(circle at 90% -20%,rgba(202,244,106,.45),transparent 36%),var(--paper); }
  .corridor-hero-copy h1, .corridor-body[data-corridor-direction="to_ramenskoye"] .corridor-hero-copy h1 { font-size: clamp(34px,10.5vw,45px); letter-spacing: -2px; line-height: 1.04; }
  .corridor-body[data-corridor-page="other"] .corridor-hero-copy h1 { font-size: clamp(30px,8.8vw,37px); }
  .corridor-hero-copy > p:last-child { margin-top: 10px; font-size: 13px; line-height: 1.42; }
  .stop-ticket { min-height: 105px; grid-template-columns: 62px 1fr; padding: 15px 17px; }
  .stop-ticket-code { width: 60px; height: 60px; font-size: 18px; }
  .trip-choice { padding: 11px; }
  .corridor-direction { grid-template-columns: 1fr; gap: 7px; }
  .corridor-direction button { min-height: 72px; padding: 10px 12px; }
  .direction-copy strong { font-size: 16px; }
  .direction-copy em { font-size: 11px; }
  .transit-filter { grid-template-columns: 1fr; gap: 6px; }
  .transit-filter button { min-height: 55px; }
  .fare-payment { padding-top: 12px; padding-bottom: 12px; }
  .fare-payment-card { grid-template-columns: 1fr; gap: 11px; padding: 12px; }
  .fare-payment-heading h2 { font-size: 16px; }
  .payment-methods { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .payment-rules { padding: 10px 0 0; border-top: 1px solid #dfe3e0; border-left: 0; }
  .corridor-heading, .map-route-heading, .all-routes-heading { display: block; }
  .corridor-heading h2, .map-route-heading h2, .all-routes-heading h2 { font-size: clamp(23px,7vw,29px); letter-spacing: -1.4px; line-height: 1.08; }
  .corridor-source, .live-summary, .schedule-filter { margin-top: 11px; }
  .stop-time-explainer { align-items: flex-start; }
  .next-corridor-bus { grid-template-columns: 72px 1fr auto; gap: 10px; padding: 11px; }
  .next-route-number { min-height: 62px; }
  .next-route-number strong { font-size: 18px; }
  .next-trip-times { min-width: 0; }
  .trip-time-step { min-width: 0; }
  .trip-time-step strong { font-size: 29px; }
  .next-corridor-bus.has-two-times { grid-template-columns: 72px minmax(0,1fr); }
  .has-two-times .next-trip-times { display: grid; grid-template-columns: 1fr 17px 1fr; grid-column: 2; gap: 7px; }
  .has-two-times .time-step-link { width: 17px; }
  .has-two-times .trip-time-step strong { font-size: 23px; }
  .has-two-times .trip-time-step small { font-size: 7px; line-height: 1.25; }
  .has-two-times .trip-time-step > span { font-size: 8px; }
  .next-route-destination { grid-column: 1/-1; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.14); }
  .next-route-destination strong { white-space: normal; }
  .next-route-signal { grid-column: 1/-1; width: fit-content; padding: 6px 8px; }
  .next-route-signal span { display: inline; }
  .departure-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .departure-strip.is-upcoming-from-ramenskoye { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .en-route-list { grid-template-columns: 1fr; }
  .en-route-card { grid-template-columns: auto minmax(105px,auto) minmax(0,.7fr) minmax(95px,1fr); }
  .upcoming-departures-heading { display: block; }
  .upcoming-departures-heading > span { display: block; margin-top: 4px; }
  .departure-card-time em { font-size: 7px; }
  .departure-card-time time { font-size: 17px; }
  .departure-card-time b { font-size: 8px; }
  .corridor-map-layout { grid-template-columns: 1fr; }
  .corridor-map-panel, #corridor-map { min-height: 350px; height: 350px; }
  .route-pulse { min-height: auto; }
  #route-pulse-list { grid-template-columns: repeat(4,1fr); }
  .pulse-route { display: flex; min-height: 48px; flex-direction: column; gap: 4px; border-right: 1px solid var(--line); }
  .pulse-route:nth-child(2n) { border-right: 1px solid var(--line); }
  .pulse-route:nth-child(4n) { border-right: 0; }
  .pulse-route b { width: 100%; min-height: 23px; }
  .pulse-route div { text-align: center; }
  .route-pulse > p { margin-top: 12px; }
  .route-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .route-summary-card, .route-summary-card:nth-child(4n) { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .route-summary-card:nth-child(2n) { border-right: 0; }
  .route-summary-card:nth-last-child(-n+2) { border-bottom: 0; }
  .corridor-timetable { grid-template-columns: 1fr; }
}
@media (max-width:600px) {
  .departure-strip.is-upcoming-from-ramenskoye { grid-template-columns: 1fr; }
}
@media (max-width:390px) {
  .departure-strip { grid-template-columns: 1fr; }
  .departure-strip.is-upcoming-from-ramenskoye { grid-template-columns: 1fr; }
  .departure-card { padding: 9px 7px; }
  .departure-card-times { grid-template-columns: minmax(0,1fr) 9px minmax(0,1fr) 9px minmax(0,1.15fr); gap: 2px; }
  .departure-card-time time { font-size: 17px; }
  .departure-card-time time.is-unknown { font-size: 9px; }
  .departure-card-time em { font-size: 8px; }
  .en-route-card { grid-template-columns: auto minmax(105px,auto) minmax(0,1fr); padding-inline: 7px; }
  .en-route-destination { grid-column: 2/-1; padding: 5px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .corridor-map-caption { right: 7px; bottom: 7px; left: 7px; justify-content: center; }
}