.traffic-header, .traffic-cities, .traffic-page { width: var(--wrap); margin-inline: auto; }
.traffic-header { margin-block: 1.1rem .85rem; }
.traffic-header h1 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.4; }
.traffic-header p { margin: .4rem 0 0; color: var(--ink-2); font-size: .88rem; }
.traffic-cities { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .4rem; margin-bottom: 1rem; }
.traffic-cities a { display: grid; place-items: center; min-height: 44px; padding: .4rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--paper); color: var(--ink-2); font-size: .82rem; font-weight: 700; text-align: center; }
.traffic-cities a.is-current { background: linear-gradient(125deg,var(--blue-50),var(--surface-accent)); border-color: var(--blue-100); color: var(--blue-d); }
.traffic-page { padding-bottom: 1rem; }
.traffic-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin-bottom: .7rem; }
.traffic-section-heading h2, .traffic-section-heading h3 { margin: 0; font-size: 1.1rem; line-height: 1.4; }
.traffic-section-heading > span, .traffic-section-heading > a { color: var(--ink-2); font-size: .76rem; }
.traffic-section-heading > a { min-height: 36px; display: inline-flex; align-items: center; color: var(--blue-d); text-decoration: underline; text-underline-offset: 3px; }
.traffic-status-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; }
.traffic-status-card { display: flex; flex-direction: column; min-width: 0; padding: 1rem; background: var(--paper); border: 1px solid var(--line); border-radius: 1rem; }
.traffic-status-card header { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; }
.traffic-mode { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: .75rem; background: linear-gradient(145deg,var(--blue-50),var(--surface-accent)); color: var(--blue-d); font-size: .75rem; font-weight: 800; }
.traffic-status-card h3 { margin: 0; font-size: 1rem; }
.traffic-status-card header p { margin: .12rem 0 0; color: var(--ink-2); font-size: .73rem; line-height: 1.6; }
.traffic-status-links { display: grid; align-content: start; gap: .2rem; flex: 1; }
.traffic-status-links a { display: flex; align-items: center; justify-content: space-between; gap: .3rem; min-height: 44px; border-top: 1px solid var(--line); font-size: .8rem; color: var(--blue-d); font-weight: 650; }
.traffic-status-links a span { flex-shrink: 0; }
.traffic-timetable-link { margin-top: .4rem; display: grid; place-items: center; min-height: 38px; border-radius: .6rem; color: var(--blue-d); background: var(--blue-50); font-size: .78rem; font-weight: 700; }
.traffic-feed-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-block: 1.5rem .8rem; }
.traffic-feed-heading h2 { font-size: 1.1rem; margin: 0; }
.traffic-feed-heading p { margin: .3rem 0 0; color: var(--ink-2); font-size: .8rem; }
.traffic-refresh { flex-shrink: 0; min-height: 44px; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--paper); color: var(--blue-d); font-size: .78rem; font-weight: 700; cursor: pointer; }
.traffic-refresh[aria-busy="true"] { opacity: .65; }
.traffic-feeds { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); align-items: start; gap: .85rem; }
.traffic-primary { display: grid; gap: .85rem; min-width: 0; }
.traffic-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; min-width: 0; }
.traffic-articles { list-style: none; padding: 0; margin: 0; }
.traffic-articles li + li { border-top: 1px solid var(--line); }
.traffic-articles li { padding: .8rem 0; }
.traffic-articles li:first-child { padding-top: .15rem; }
.traffic-article { display: block; }
.traffic-article-title, .traffic-article strong { color: var(--ink); font-size: .92rem; font-weight: 700; line-height: 1.65; overflow-wrap: break-word; }
.traffic-article p { color: var(--ink-2); font-size: .8rem; line-height: 1.75; margin: .35rem 0 0; }
.traffic-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .65rem; font-size: .72rem; color: var(--ink-2); line-height: 1.6; margin-block: .25rem; }
.traffic-source { color: var(--ink-2); font-size: .72rem; line-height: 1.7; margin: .6rem 0 0; }
.traffic-source a { text-decoration: underline; text-underline-offset: 3px; }
.traffic-empty { font-size: .85rem; color: var(--ink-2); margin: .7rem 0; }
.traffic-related { display: flex; flex-wrap: wrap; gap: .5rem; border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1.2rem; }
.traffic-related a, .traffic-jumps a { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .4rem .85rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--paper); color: var(--blue-d); font-size: .8rem; font-weight: 650; }
.traffic-schedule-note { display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding: .85rem 1rem; background: var(--blue-50); border-radius: .8rem; }
.traffic-schedule-note p { font-size: .83rem; line-height: 1.75; margin: 0; }
.traffic-schedule-note .btn { flex-shrink: 0; background: var(--paper); font-size: .8rem; }
.traffic-jumps { display: flex; flex-wrap: wrap; gap: .5rem; margin-block: .8rem; }
.traffic-line, .traffic-buses { margin-top: 1.3rem; scroll-margin-top: calc(var(--header-height) + 7.5rem); }
.traffic-stations { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.traffic-station { display: grid; grid-template-columns: minmax(6.2rem,.7fr) minmax(0,1.3fr); align-items: center; column-gap: .75rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .85rem; background: var(--paper); min-width: 0; }
.traffic-station h3 { font-size: 1rem; margin: 0; }
.traffic-station header > span { font-size: .7rem; color: var(--ink-2); }
.traffic-station__directions { display: grid; gap: .3rem; }
.traffic-station__directions span { padding-block: .2rem; color: var(--ink-2); font-size: .78rem; }
.traffic-station__open { grid-column: 1/-1; display: flex; align-items: center; justify-content: space-between; gap: .4rem; min-height: 44px; margin-top: .5rem; padding: .4rem .6rem; border-radius: .5rem; background: var(--blue-50); font-size: .78rem; color: var(--blue-d); font-weight: 650; }
.traffic-bus-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
.traffic-bus-route { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .85rem; background: var(--paper); min-width: 0; }
.traffic-bus-route > div:first-child { flex: 1; min-width: 0; }
.traffic-bus-route h3 { margin: 0; font-size: .92rem; line-height: 1.65; }
.traffic-bus-route__links { display: grid; gap: .3rem; flex-shrink: 0; }
.traffic-bus-route__links a { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .35rem .6rem; border-radius: .6rem; background: var(--blue-50); color: var(--blue-d); font-size: .78rem; font-weight: 700; }
.traffic-bus-hubs { margin-top: 1rem; }
.traffic-bus-hubs h2 { font-size: 1rem; margin: 0; }
.bus-departures { margin-bottom: 1rem; scroll-margin-top: calc(var(--header-height) + 7.5rem); }
.bus-departures__intro, .bus-departures__notice { margin: .3rem 0 .7rem; color: var(--ink-2); font-size: .8rem; line-height: 1.75; }
.bus-departures__form { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(10rem,.7fr) auto; gap: .6rem; align-items: end; }
.bus-departures__form--filtered { grid-template-columns: minmax(0,1.2fr) minmax(10rem,.65fr) minmax(0,1fr) auto; }
.bus-departures__form > div { min-width: 0; }
.bus-departures__form label { display: block; margin-bottom: .3rem; color: var(--ink-2); font-size: .8rem; font-weight: 700; }
.bus-departures__form input:not([type=submit]):not([type=hidden]), .bus-departures__form select { width: 100%; min-width: 0; min-height: 46px; font: inherit; font-size: 16px; padding: .5rem .65rem; border: 1px solid var(--line-2); border-radius: .65rem; background: var(--paper); color: var(--ink); }
.bus-departures__form select { text-overflow: ellipsis; }
.bus-departures__form .btn { min-height: 46px; }
.bus-departures__choices { margin-top: .85rem; }
.bus-departures__choices > summary { width: fit-content; max-width: 100%; min-height: 44px; padding-block: .6rem; color: var(--blue-d); font-size: .8rem; font-weight: 650; line-height: 1.65; cursor: pointer; }
.bus-departures__stop-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .5rem; }
.bus-departures__stop-list li { display: flex; align-items: stretch; min-width: 0; border: 1px solid var(--line); border-radius: .65rem; overflow-wrap: break-word; }
.bus-departures__stop-choice { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: .25rem; padding: .6rem .7rem; border-radius: .65rem; color: var(--ink); }
.bus-departures__stop-choice.is-current { background: var(--blue-50); box-shadow: inset 3px 0 var(--blue); }
.bus-departures__choice-title { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; font-size: .86rem; }
.bus-departures__choice-direction { color: var(--blue-d); font-size: .84rem; font-weight: 650; line-height: 1.65; }
.bus-departures__choice-routes { color: var(--ink-2); font-size: .74rem; line-height: 1.6; }
.bus-departures__platform { color: var(--ink-2); font-size: .75rem; font-weight: 500; }
.bus-departures__map { display: flex; flex-shrink: 0; align-items: center; justify-content: center; gap: .15rem; min-height: 44px; max-width: 6rem; padding: .45rem .65rem; border-left: 1px solid var(--line); color: var(--blue-d); font-size: .76rem; line-height: 1.55; }
.bus-departures__result-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem 1rem; margin-top: 1rem; }
.bus-departures__selected { display: flex; align-items: baseline; flex-wrap: wrap; gap: .35rem .65rem; margin: 0; font-size: 1.02rem; }
.bus-departures__selected time, .bus-departures__range { color: var(--ink-2); font-size: .8rem; white-space: nowrap; }
.bus-departures__view { display: inline-flex; gap: .2rem; padding: .2rem; border: 1px solid var(--line); border-radius: .65rem; }
.bus-departures__view a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: .35rem .75rem; border-radius: .45rem; color: var(--ink-2); font-size: .8rem; font-weight: 650; }
.bus-departures__view a.is-current { background: var(--blue-50); color: var(--blue-d); }
.bus-departures__selected-location { margin: .3rem 0; font-size: .76rem; }
.bus-departures__selected-location a { display: inline-flex; align-items: center; min-height: 32px; gap: .3rem; color: var(--blue-d); text-decoration: underline; text-underline-offset: 3px; }
.bus-departures__table { width: 100%; border-collapse: collapse; margin-bottom: .4rem; table-layout: fixed; }
.bus-departures__results { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 1.2rem; align-items: start; }
.bus-departures__caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.bus-departures__table th { background: var(--blue-50); text-align: left; color: var(--ink-2); font-size: .76rem; padding: .5rem .7rem; }
.bus-departures__table th:first-child { width: 7rem; }
.bus-departures__table td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); font-size: .85rem; vertical-align: top; overflow-wrap: break-word; }
.bus-departures__table td:first-child { font-size: 1.15rem; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--blue-d); }
.bus-departures__table time { white-space: nowrap; }
.bus-departures__table td > span, .bus-departures__table td > small { display: block; color: var(--ink-2); font-size: .72rem; font-weight: 400; }
.bus-departures__table td > strong { font-size: .88rem; }
.bus-departures__next td { background: var(--surface); }
.bus-departures__pages { align-items: center; }
.bus-departures__page-number { color: var(--ink-2); font-size: .76rem; font-variant-numeric: tabular-nums; }
.bus-departures__notice { padding-top: .5rem; margin-bottom: 0; }
.bus-departures__notice a { color: var(--blue-d); text-decoration: underline; text-underline-offset: 3px; }
.bus-departures__sources { margin-top: .25rem; color: var(--ink-2); font-size: .76rem; }
.bus-departures__sources summary { width: fit-content; max-width: 100%; min-height: 36px; padding-block: .4rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bus-departures__edition { margin-top: .3rem; }
.traffic-page a:hover, .traffic-cities a:hover { color: var(--blue-d); text-decoration: underline; text-underline-offset: 3px; }
.traffic-page a:focus-visible, .traffic-page button:focus-visible, .traffic-page summary:focus-visible, .traffic-cities a:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
@media (max-width: 1000px) {
  .traffic-status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .bus-departures__form--filtered { grid-template-columns: minmax(0,1fr) minmax(10rem,.6fr) auto; }
  .bus-departures__form--filtered .bus-departures__stop { grid-column: 1/3; }
  .bus-departures__form--filtered .bus-departures__date { grid-column: 3; }
  .bus-departures__form--filtered .bus-departures__route { grid-column: 1/3; }
}
@media (max-width: 700px) {
  .bus-departures__results { grid-template-columns: minmax(0,1fr); }
  .bus-departures__form { grid-template-columns: minmax(0,1fr) auto; }
  .bus-departures__stop, .bus-departures__form--filtered .bus-departures__stop { grid-column: 1/-1; }
  .bus-departures__form--filtered { grid-template-columns: minmax(10.5rem,1fr) minmax(0,1fr); }
  .bus-departures__form--filtered .bus-departures__date { grid-column: 1; }
  .bus-departures__form--filtered .bus-departures__route { grid-column: 2; }
  .bus-departures__form--filtered .btn { grid-column: 1/-1; }
  .bus-departures__form .btn { padding-inline: .9rem; font-size: .8rem; }
  .bus-departures__stop-list { grid-template-columns: minmax(0,1fr); }
  .bus-departures__result-heading { gap: .45rem; }
  .bus-departures__selected { font-size: .95rem; }
  .bus-departures__view a { min-height: 40px; padding-inline: .65rem; }
  .bus-departures__table th, .bus-departures__table td { padding-inline: .55rem; }
  .bus-departures__table th:first-child { width: 6.25rem; }
  .bus-departures__pages { gap: .35rem; }
  .bus-departures__pages a { padding-inline: .55rem; }
  .traffic-header { margin-block: .85rem .7rem; }
  .traffic-header p { font-size: .8rem; line-height: 1.7; }
  .traffic-cities { gap: .25rem; }
  .traffic-cities a { font-size: .72rem; padding: .3rem .15rem; border-radius: .55rem; }
  .traffic-status-grid { gap: .5rem; }
  .traffic-status-card { padding: .75rem; border-radius: .8rem; }
  .traffic-status-card header { gap: .4rem; }
  .traffic-mode { width: 1.8rem; height: 1.8rem; border-radius: .5rem; font-size: .6rem; }
  .traffic-status-card h3 { font-size: .92rem; }
  .traffic-status-card header p { font-size: .7rem; }
  .traffic-status-links a { font-size: .75rem; line-height: 1.65; }
  .traffic-feed-heading { align-items: start; margin-top: 1.1rem; }
  .traffic-feed-heading p { font-size: .76rem; }
  .traffic-feeds { grid-template-columns: minmax(0,1fr); }
  .traffic-feeds > aside { order: -1; }
  .traffic-panel { padding: .85rem; border-radius: .85rem; }
  .traffic-section-heading h2, .traffic-section-heading h3 { font-size: 1rem; }
  .traffic-article-title, .traffic-article strong { font-size: .89rem; }
  .traffic-schedule-note { display: block; padding: .75rem; }
  .traffic-schedule-note .btn { margin-top: .5rem; min-height: 40px; }
  .traffic-stations, .traffic-bus-grid { grid-template-columns: minmax(0,1fr); }
  .traffic-station { padding: .65rem .8rem; }
  .traffic-station h3 { font-size: .95rem; }
  .traffic-station__open { min-height: 40px; }
  .traffic-bus-route { padding: .75rem .8rem; }
  .traffic-bus-route h3 { font-size: .88rem; }
  .traffic-related { gap: .4rem; }
}