.city-module { color: #202428; }
.city-module .city-title { font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.3; overflow-wrap: anywhere; }
.city-module .city-subname { display: block; color: #62686e; font-size: 1rem; font-weight: 400; line-height: 1.5; margin-top: .25rem; }
.city-module .city-name { overflow-wrap: anywhere; }
.city-module .city-nav { display: flex; flex-wrap: wrap; gap: .25rem .5rem; border-bottom: 1px solid #dee2e6; margin: 1rem 0 1.25rem; }
.city-module .city-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .75rem; color: #495057; text-decoration: none; border-bottom: 3px solid transparent; }
.city-module .city-nav a.active { border-bottom-color: #0066f5; color: #0059d6; font-weight: 600; }
.city-module a:focus-visible, .city-module button:focus-visible { outline: 3px solid #0066f5; outline-offset: 3px; }
.city-module .city-search { position: relative; margin: 0 0 1rem; }
.city-module .city-search input { min-height: 46px; padding-right: 3.25rem; }
.city-module .city-search button { position: absolute; top: 1px; right: 1px; width: 44px; height: 44px; border: 0; background: transparent; border-radius: .375rem; color: #495057; font-size: 1.5rem; }
.city-module .city-search button[hidden] { display: none; }
.city-module .city-card-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: .15rem .75rem; margin-top: .65rem; color: #495057; font-size: .875rem; }
.city-module .city-facts { gap: .5rem !important; font-size: .9375rem !important; }
.city-module .city-facts .badge { white-space: normal; font-size: inherit; font-weight: 400; padding: .4rem .6rem; }
.city-module .city-facts a { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; text-decoration: none; }
.city-module .city-facts a::after { content: ""; width: .35rem; height: .35rem; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); opacity: .6; }
.city-module .city-facts a:hover, .city-module .city-facts a:focus-visible { background-color: #eaf2ff !important; border-color: #8ab4f8 !important; color: #0059d6 !important; }
.city-module .city-line-index { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.city-module .city-line-index[hidden] { display: none; }
.city-module .city-line-browser { margin-bottom: 1rem; }
.city-module .city-line-browser summary { min-height: 44px; padding: .65rem .75rem; border: 1px solid #dee2e6; border-radius: .5rem; cursor: pointer; }
.city-module .city-line-browser summary:focus-visible { outline: 3px solid #0066f5; outline-offset: 3px; }
.city-module .city-line-index a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .4rem .65rem; border: 1px solid #dee2e6; border-radius: .5rem; text-decoration: none; color: #202428; }
.city-module .city-line-code { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 26px; padding: .2rem .4rem; border-radius: .35rem; font-size: .875rem; font-weight: 600; }
.city-module .line-group { scroll-margin-top: 1rem; margin-bottom: 1rem; }
.city-module .line-group h2 { font-size: 1rem !important; color: #343a40 !important; }
.city-module .station-item { gap: 1rem; min-height: 64px; }
.city-module .city-station-name { min-width: 0; flex: 1; overflow-wrap: anywhere; font-size: 1.0625rem; line-height: 1.45; }
.city-module .city-station-name small { display: block; font-size: .875rem; color: #62686e !important; }
.city-module .city-station-lines { max-width: 35%; justify-content: flex-end; flex-shrink: 0; }
.city-module .city-line-table { width: 100%; table-layout: fixed; }
.city-module .city-line-table th, .city-module .city-line-table td { padding: .6rem .5rem; overflow-wrap: anywhere; }
.city-module .city-line-table th:last-child { width: 26%; }
.city-module .city-line-table .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; margin: .15rem; font-size: .875rem; white-space: normal; }
.city-module .city-station-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.city-module .city-station-actions a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.city-module .city-station-header .badge { white-space: normal; font-size: .875rem; padding: .5rem .65rem; margin: .2rem .25rem .2rem 0; line-height: 1.4; }
.city-module .city-timetable-note { color: #495057; font-size: .9375rem; line-height: 1.6; max-width: 70rem; }
@media (max-width: 575px) {
    .city-module .city-nav { gap: 0 .2rem; }
    .city-module .city-nav a { padding: .5rem .6rem; }
    .city-module .city-line-table th:last-child { width: 28%; }
    .city-module .city-line-table .badge { min-width: 28px; padding: .25rem .35rem; }
    .city-module .city-station-actions a { flex: 1 1 120px; }
}

.city-module .city-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.city-module .city-section-heading h2 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
.city-module .city-section-heading > a { font-size: .9375rem; text-decoration: none; }
.city-module .city-overview-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, 1fr); gap: 1.5rem; }
.city-module .city-overview-map { min-width: 0; padding: 1.25rem; border: 1px solid #e4e7eb; border-radius: .75rem; }
.city-module .city-map-preview { display: flex; align-items: center; justify-content: center; min-height: 220px; }
.city-module .city-map-preview img { display: block; width: 100%; height: 350px; object-fit: contain; }
.city-module .city-overview-actions { display: grid; gap: 1rem; }
.city-module .city-overview-actions > a { display: flex; flex-direction: column; justify-content: center; gap: .6rem; padding: 1.25rem; color: #62686e; background: #f6f7f9; border: 1px solid #e4e7eb; border-radius: .75rem; text-decoration: none; font-size: .9375rem; }
.city-module .city-action-title { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.125rem; font-weight: 600; color: #202428; }
.city-module .city-overview-actions > a:hover { background: #edf3fb; }
.city-module .city-overview-interchanges { margin-top: 2rem; }
.city-module .city-interchange-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.city-module .city-interchange { border: 1px solid #e4e7eb; border-radius: .6rem; padding: 1rem; }
.city-module .city-interchange h3 { font-size: 1rem; line-height: 1.5; margin: 0 0 .75rem; overflow-wrap: anywhere; }
.city-module .city-interchange h3 a { color: #202428; text-decoration: none; }
.city-module .city-interchange-lines { display: flex; flex-wrap: wrap; gap: .5rem; }
.city-module .city-interchange-lines a { min-height: 32px; text-decoration: none; }

.city-module .city-line-path { margin-top: 1.5rem; }
.city-module .city-topology-label { border-radius: 1rem; padding: .3rem .75rem; background: #edf1f6; font-size: .9375rem; }
.city-module .city-branch-summary { list-style: none; padding: 0; margin: 0 0 1rem; color: #62686e; font-size: .9375rem; }
.city-module .city-branch-summary a { color: inherit; text-decoration: none; }
.city-module .city-line-diagram { border-collapse: collapse; }
.city-module .city-line-diagram col.city-track-column { width: var(--track-width); }
.city-module .city-line-diagram col.city-transfer-column { width: 26%; }
.city-module .city-line-diagram thead { background: #f6f7f9; color: #62686e; font-size: .875rem; }
.city-module .city-line-diagram td { height: 64px; }
.city-module .city-line-diagram td:not(.city-track) { border-bottom: 1px solid #eef0f3; }
.city-module .city-line-diagram td.city-track { position: relative; padding: 0; }
.city-module .city-track svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.city-module .city-track path { fill: none; stroke: var(--line-color); stroke-width: 6; vector-effect: non-scaling-stroke; stroke-linecap: square; stroke-linejoin: round; }
.city-module .city-track-dot { position: absolute; top: 50%; width: 14px; height: 14px; transform: translate(-50%,-50%); border: 4px solid var(--line-color); border-radius: 50%; background: #fff; }
.city-module .city-path-station { color: #202428; text-decoration: none; font-size: 1.0625rem; font-weight: 500; }
.city-module .city-path-subname { display: block; color: #62686e; font-size: .875rem; margin-top: .1rem; }
.city-module .city-path-note { display: block; color: #62686e; font-size: .8125rem; margin-top: .25rem; }

.city-module .city-timetable-heading { align-items: baseline; }
.city-module .city-timetable-version { color: #62686e; font-size: .875rem; margin: 0; }
.city-module .city-timetable-version time { white-space: nowrap; font-variant-numeric: tabular-nums; }
.city-module .city-timetable-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,280px),1fr)); gap: 1.25rem; align-items: start; }
.city-module .city-timetable-card { min-width: 0; border: 1px solid #e2e5e9; border-radius: .75rem; overflow: hidden; background: #f8f9fb; }
.city-module .city-timetable-line { padding: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; border-bottom: 1px solid #e2e5e9; }
.city-module .city-timetable-line-link { display: inline-flex; gap: .6rem; align-items: center; color: #202428; text-decoration: none; min-width: 0; }
.city-module .city-timetable-line h3 { font-size: 1.0625rem; font-weight: 600; margin: 0; line-height: 1.4; overflow-wrap: anywhere; }
.city-module .city-timetable-range-label { font-size: .8125rem; color: #62686e; white-space: nowrap; }
.city-module .city-timetable-direction { margin: 0 1rem; padding: 1rem 0; }
.city-module .city-timetable-direction + .city-timetable-direction { border-top: 1px solid #e2e5e9; }
.city-module .city-timetable-direction h4 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; line-height: 1.45; }
.city-module .city-timetable-direction table { width: 100%; table-layout: auto; font-size: .875rem; }
.city-module .city-timetable-direction th { padding: .3rem .65rem .3rem 0; color: #62686e; font-weight: 400; overflow-wrap: anywhere; }
.city-module .city-timetable-direction td { width: 1%; padding: .3rem 0; vertical-align: top; }
.city-module .city-time-range { display: inline-flex; gap: .45rem; align-items: flex-start; white-space: nowrap; font-variant-numeric: tabular-nums; }
.city-module .city-time-value { display: inline-block; }
.city-module .city-time-separator { color: #62686e; }
@media (max-width: 767px) {
    .city-module .city-overview-grid { grid-template-columns: minmax(0,1fr); }
    .city-module .city-map-preview img { height: 270px; }
    .city-module .city-interchange-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 359px) {
    .city-module .city-interchange-grid { grid-template-columns: minmax(0,1fr); }
}