@font-face {
    font-family: "LTA Identity";
    src: url("fonts/LTAIdentity-Medium.woff2") format("woff2");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

:root {
    color-scheme: light;
    --bg: #eef2f4;
    --panel: #ffffff;
    --panel-soft: #f6f8fa;
    --ink: #17202a;
    --muted: #64748b;
    --border: rgba(71, 85, 105, .2);
    --accent: #0f766e;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-width: 320px;
    background: linear-gradient(180deg, #f8fafb 0, var(--bg) 280px);
    color: var(--ink);
}

button, input { font: inherit; }
button { color: inherit; }

.topbar, main, footer {
    width: min(1880px, calc(100% - 32px));
    margin-inline: auto;
}

.topbar {
    min-height: 108px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand { display: flex; align-items: center; gap: 15px; }
.brand__mark { width: 48px; height: 48px; display: grid; gap: 4px; transform: rotate(-5deg); }
.brand__mark i { display: block; height: 7px; border-radius: 99px; background: var(--accent); }
.brand__mark i:nth-child(1) { width: 32px; background: #d42e12; }
.brand__mark i:nth-child(2) { width: 43px; background: #009645; }
.brand__mark i:nth-child(3) { width: 24px; background: #005ec4; }
.eyebrow { margin: 0 0 3px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(25px, 4vw, 38px); line-height: 1; letter-spacing: -.04em; }
.station-card__status-dot { display: block; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 4px; border-radius: 50%; background: #fbbf24; box-shadow: 0 0 0 4px rgba(251,191,36,.12); }

.controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    min-width: 0;
}

.topbar__controls { flex: 1 1 auto; }
.search { position: relative; display: block; width: min(420px, 42vw); }
.search svg { position: absolute; left: 14px; top: 50%; width: 18px; transform: translateY(-50%); fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.search input { width: 100%; height: 44px; padding: 0 15px 0 42px; color: var(--ink); border: 1px solid var(--border); border-radius: 12px; outline: none; background: var(--panel); box-shadow: 0 2px 8px rgba(15,23,42,.04); }
.search input:focus { border-color: rgba(103,232,249,.65); box-shadow: 0 0 0 3px rgba(103,232,249,.1); }
.zoom-controls { display: flex; gap: 6px; }
.zoom-controls button { min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--panel); cursor: pointer; }
.zoom-controls button:hover { background: var(--panel-soft); border-color: rgba(167,190,219,.35); }

.legend { display: flex; gap: 7px; margin-bottom: 12px; padding-bottom: 3px; overflow-x: auto; scrollbar-width: thin; }
.legend__item { flex: 0 0 auto; display: grid; grid-template-columns: 8px auto; grid-template-rows: auto auto; column-gap: 8px; padding: 8px 12px; text-align: left; border: 1px solid var(--border); border-radius: 10px; background: #fff; cursor: pointer; }
.legend__item > span { grid-row: 1 / 3; align-self: stretch; width: 5px; border-radius: 99px; background: var(--line-color); }
.legend__item b { font-family: "LTA Identity", sans-serif; font-size: 11px; font-weight: 500; }
.legend__item small { color: var(--muted); font-family: "LTA Identity", sans-serif; font-size: 9px; font-weight: 500; }
.legend__item[aria-pressed="false"] { opacity: .38; filter: grayscale(.8); }

.map-shell { position: relative; min-height: 620px; height: calc(100vh - 220px); overflow: hidden; border: 1px solid #c7cdd3; border-radius: 18px; background: #ddd; box-shadow: 0 22px 65px rgba(15,23,42,.13); }
.map-canvas { width: 100%; height: 100%; touch-action: none; cursor: grab; }
.map-canvas.is-dragging { cursor: grabbing; }
#system-map { display: block; width: 100%; height: 100%; user-select: none; }
.map-grid path { fill: none; stroke: rgba(71,85,105,.07); stroke-width: 1; }
.route { transition: opacity .24s ease; }
.route__line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.route__line { stroke: var(--route-color); stroke-width: 6; }
.route--lrt .route__line { stroke-width: 3; }
.route--status-under-construction .route__line { opacity: .5; }
.route--status-delay .route__line { stroke-dasharray: 13 12; }
.route--status-disrupted .route__line { stroke: #7b8490; stroke-dasharray: 9 12; }
.track-status-marker { pointer-events: none; }
.track-status-marker rect { fill: #202936; stroke: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.track-status-marker text { fill: #fff; font-size: 6px; font-weight: 900; letter-spacing: .04em; }
.track-status-marker circle { fill: #fff; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.track-status-marker path { fill: none; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.track-status-marker--delay circle, .track-status-marker--delay path { stroke: #b45309; }
.track-status-marker--disrupted circle, .track-status-marker--disrupted path { stroke: #dc2626; }
.track-status-marker--info circle { stroke: #2563eb; }
.track-status-marker--info .track-status-marker__info { fill: #2563eb; font-size: 8px; font-weight: 950; letter-spacing: 0; }

.station { outline: none; cursor: pointer; transition: opacity .24s ease; }
.station__hit { fill: transparent; }
.station__dot { fill: #ddd; stroke: #26323f; stroke-width: 2.5; filter: url(#station-shadow); }
.station__interchange { fill: #fff; stroke: #26323f; stroke-width: 3.5; filter: url(#station-shadow); }
.station__interchange--capsule { vector-effect: non-scaling-stroke; }
.station__label { pointer-events: all; paint-order: stroke; stroke: #ddd; stroke-width: 3.5px; stroke-linejoin: round; }
.station__name { fill: #111827; font-family: "LTA Identity", sans-serif; font-size: 9px; font-weight: 500; letter-spacing: -.015em; }
.station__codes { fill: #475569; font-size: 7px; font-weight: 800; letter-spacing: .025em; }
.station:hover .station__dot, .station:focus .station__dot, .station.is-selected .station__dot { fill: var(--accent); r: 7; }
.station:hover .station__interchange, .station:focus .station__interchange, .station.is-selected .station__interchange { stroke: var(--accent); stroke-width: 5; }
.station:hover .station__name, .station:focus .station__name, .station.is-selected .station__name { fill: var(--accent); font-size: 11px; }
.station.is-dimmed, .route.is-dimmed { opacity: .09; }
.station.is-search-hidden { opacity: .09; }
.station.is-search-match .station__dot, .station.is-search-match .station__interchange { fill: #fef08a; stroke: #facc15; }

.line-status-widget { position: absolute; z-index: 3; top: 18px; left: 18px; width: min(310px, calc(100% - 36px)); padding: 15px; border: 1px solid rgba(71,85,105,.24); border-radius: 15px; background: rgba(255,255,255,.94); box-shadow: 0 15px 42px rgba(15,23,42,.18); backdrop-filter: blur(16px); pointer-events: none; }
.line-status-widget h2 { margin: 1px 0 12px; font-size: 19px; line-height: 1.15; letter-spacing: -.025em; }
.line-status-widget__list { display: grid; gap: 9px; }
.line-status-widget__row { display: grid; grid-template-columns: 5px minmax(0, 1fr); gap: 10px; min-height: 36px; }
.line-status-widget__swatch { width: 5px; border-radius: 99px; background: var(--line-color); }
.line-status-widget__details { min-width: 0; }
.line-status-widget__details strong { display: block; overflow: hidden; color: #1e293b; font-family: "LTA Identity", sans-serif; font-size: 11px; font-weight: 500; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.line-status-widget__details strong span { margin-right: 3px; color: #475569; font-weight: 900; }
.line-status-widget__badges { display: grid; gap: 4px; margin-top: 4px; }
.line-status-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.line-status-entry small { color: #475569; font-size: 9px; line-height: 1.35; }
.line-status-badge { display: inline-flex; align-items: center; min-height: 18px; padding: 2px 7px; border-radius: 999px; font-size: 8px; font-weight: 900; line-height: 1.2; letter-spacing: .035em; text-transform: uppercase; }
.line-status-badge--under-construction { background: #fef3c7; color: #92400e; }
.line-status-badge--delay { border: 1px dashed #b45309; background: #fff7ed; color: #9a3412; }
.line-status-badge--disrupted { border: 1px dashed #64748b; background: #e2e8f0; color: #334155; }
.line-status-badge--info { background: #dbeafe; color: #1d4ed8; }
.line-status-widget__source { margin: 11px -2px -2px; padding-top: 9px; border-top: 1px solid #e2e8f0; color: #64748b; font-size: 8px; font-weight: 750; }

.station-card { position: absolute; z-index: 4; top: 18px; right: 18px; width: min(330px, calc(100% - 36px)); padding: 18px; border: 1px solid rgba(71,85,105,.24); border-radius: 16px; background: rgba(255,255,255,.95); box-shadow: 0 18px 50px rgba(15,23,42,.2); backdrop-filter: blur(16px); }
.station-card__close { position: absolute; right: 10px; top: 9px; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 24px; cursor: pointer; }
.station-card h2 { margin: 2px 30px 2px 0; font-size: 25px; letter-spacing: -.03em; }
.station-card__chinese { margin: 0 0 14px; color: var(--muted); }
.station-card__codes { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.code-badge { display: inline-flex; min-width: 42px; height: 26px; align-items: center; justify-content: center; padding: 0 8px; border-radius: 7px; background: var(--badge-color); color: #fff; font-size: 11px; font-weight: 900; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.station-card__status { padding-top: 14px; border-top: 1px solid var(--border); color: #475569; font-size: 12px; }
.station-card__status-message { display: flex; align-items: flex-start; gap: 9px; }
.station-card__status-message + .station-card__status-message { margin-top: 10px; }
.station-card__status-message p { margin: 0; line-height: 1.45; }
.station-card__status-dot--delay { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.13); }
.station-card__status-dot--disrupted { background: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.12); }
.station-card__status-dot--info { background: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.station-card__status-dot--under-construction { background: #d97706; box-shadow: 0 0 0 4px rgba(217,119,6,.12); }
.map-hint { position: absolute; left: 16px; bottom: 14px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,.88); color: var(--muted); font-size: 10px; pointer-events: none; }

footer { padding: 16px 2px 30px; color: var(--muted); font-size: 11px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
    .topbar { min-height: 0; padding: 16px 0 12px; align-items: stretch; flex-direction: column; gap: 14px; }
    .controls { width: 100%; gap: 7px; }
    .search { width: auto; flex: 1 1 auto; }
    .zoom-controls { flex: 0 0 auto; }
    .zoom-controls button { min-width: 38px; padding-inline: 9px; }
    .map-shell { height: calc(100vh - 245px); min-height: 520px; border-radius: 14px; }
    .legend__item small { display: none; }
    .legend__item { grid-template-rows: auto; }
    .legend__item > span { grid-row: 1; }
    .line-status-widget { top: 12px; left: 12px; width: min(250px, calc(100% - 24px)); }
    .map-hint { right: 12px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}