:root {
  --bg: #f4f6f9;
  --panel: #ffffff;
  --ink: #1c2530;
  --muted: #67737f;
  --border: #e3e8ee;
  --shadow: 0 6px 24px rgba(20, 32, 48, 0.12);
  --radius: 12px;
  --op: #1f9d55;   /* operational accent */
  --uc: #e08a00;   /* under-construction accent */
  --pl: #8a94a0;   /* planned accent */
  --sidebar-w: 348px;
  --detail-w: 372px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); overflow: hidden; }
h1, h2, h3, p, ul { margin: 0; }
button { font: inherit; cursor: pointer; }
a { color: #2563eb; }

#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  height: 100vh;
  width: 100vw;
}

/* ───────────────────────── Sidebar ───────────────────────── */
#sidebar {
  background: var(--panel);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 1200;
}
.brand-title { display: flex; align-items: center; gap: 9px; }
.brand-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: conic-gradient(#8E24AA, #1565C0, #00963C, #F2B100, #E91E8C, #F57C00, #E53935, #8E24AA);
}
.brand h1 { font-size: 19px; letter-spacing: -0.3px; }
.brand-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.city-select {
  margin-top: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: 9px; font-size: 14px; font-weight: 600; background: #fbfcfe; color: var(--ink); cursor: pointer;
}
.city-select:focus { outline: 2px solid #c7d2fe; border-color: #93a7f5; }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px;
}
.card-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--muted); margin-bottom: 10px; }

.field { margin-bottom: 9px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.field-row { display: flex; gap: 6px; }
input[type="text"], #from-input, #to-input {
  width: 100%; padding: 9px 10px; border: 1px solid var(--border);
  border-radius: 9px; font-size: 14px; background: #fbfcfe; color: var(--ink);
}
input:focus { outline: 2px solid #c7d2fe; border-color: #93a7f5; }

.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink); cursor: pointer; margin: 6px 0; }
.check input { width: 15px; height: 15px; }

.planner-actions { display: flex; gap: 8px; margin-top: 4px; }
.btn-primary {
  flex: 1; background: #2563eb; color: #fff; border: none;
  padding: 10px; border-radius: 9px; font-weight: 600; transition: background .15s;
}
.btn-primary:hover { background: #1d4ed8; }
.btn-ghost {
  background: #eef1f6; border: 1px solid var(--border); border-radius: 9px;
  padding: 8px 11px; color: var(--ink);
}
.btn-ghost:hover { background: #e3e8ef; }

.filters .sw { width: 22px; height: 4px; border-radius: 2px; display: inline-block; }
.sw-op { background: var(--op); }
.sw-uc { background: var(--uc); }
.sw-pl { background: var(--pl); }

/* Lines list */
.lines-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.line-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px;
  border-radius: 9px; cursor: pointer; transition: background .12s;
}
.line-row:hover { background: #f0f3f8; }
.line-bar { width: 6px; height: 26px; border-radius: 4px; flex-shrink: 0; }
.line-meta { flex: 1; min-width: 0; }
.line-name { font-weight: 600; font-size: 14px; }
.line-termini { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  padding: 3px 7px; border-radius: 999px; white-space: nowrap;
}
.badge-operational { background: #e3f6ea; color: #137a43; }
.badge-under_construction { background: #fdf0d8; color: #99650a; }
.badge-planned { background: #eef0f3; color: #5d6772; }

.side-foot { margin-top: auto; padding-top: 6px; }
.muted { color: var(--muted); font-size: 11px; line-height: 1.5; }
#nearby-note { font-size: 12.5px; color: var(--op); font-weight: 600; display: block; margin-bottom: 6px; }

/* ───────────────────────── Map ───────────────────────── */
#map-wrap { position: relative; }
#map { position: absolute; inset: 0; background: #aadaff; }

.locate-btn {
  position: absolute; right: 14px; bottom: 24px; z-index: 1000;
  background: #fff; border: 1px solid var(--border); border-radius: 999px;
  padding: 10px 15px; font-weight: 600; box-shadow: var(--shadow); color: var(--ink);
}
.locate-btn:hover { background: #f4f6fa; }

.legend {
  position: absolute; left: 14px; bottom: 14px; z-index: 1000;
  background: rgba(255,255,255,.95); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px; font-size: 12px; box-shadow: var(--shadow);
  line-height: 1.9;
}
.legend strong { display: block; margin-bottom: 4px; font-size: 11px; text-transform: uppercase; color: var(--muted); }
.leg-line { display: inline-block; width: 26px; height: 4px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.leg-op { background: #555; }
.leg-uc { background: #555; height: 0; border-top: 4px dashed #777; }
.leg-pl { background: #aab; height: 0; border-top: 3px dashed #b8bfc9; }
.leg-dot { display:inline-block; width: 11px; height: 11px; border: 3px solid #555; border-radius: 50%; background:#fff; vertical-align: middle; margin-right: 4px; }

.mobile-toggle { display: none; }

/* ───────────────────────── Detail panel ───────────────────────── */
.detail {
  position: absolute; top: 0; right: 0; height: 100vh; width: var(--detail-w);
  background: var(--panel); border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(20,32,48,.10); z-index: 1500;
  overflow-y: auto; padding: 20px; animation: slidein .18s ease;
}
@keyframes slidein { from { transform: translateX(20px); opacity: .4; } to { transform: none; opacity: 1; } }
.detail[hidden] { display: none; }
.detail-close {
  position: absolute; top: 12px; right: 14px; border: none; background: #eef1f6;
  width: 30px; height: 30px; border-radius: 50%; font-size: 19px; line-height: 1; color: var(--muted);
}
.detail-close:hover { background: #e1e6ee; }

.d-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding-right: 30px; }
.d-stripe { width: 8px; align-self: stretch; min-height: 34px; border-radius: 5px; }
.d-title { font-size: 20px; font-weight: 700; letter-spacing: -0.3px; }
.d-sub { color: var(--muted); font-size: 13px; margin-bottom: 14px; }

.d-banner {
  border-radius: 10px; padding: 11px 13px; font-size: 13.5px; margin-bottom: 14px; font-weight: 600;
}
.d-banner.op { background: #e3f6ea; color: #137a43; }
.d-banner.uc { background: #fdf0d8; color: #8a5a08; }
.d-banner.pl { background: #eef0f3; color: #4a5560; }
.d-banner .big { font-size: 17px; display: block; }

.d-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.d-stat { background: #f6f8fb; border-radius: 9px; padding: 9px 11px; }
.d-stat .k { font-size: 11px; color: var(--muted); }
.d-stat .v { font-size: 15px; font-weight: 700; }

.d-sec-title { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 16px 0 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); background: #fff;
}
.chip .dot { width: 10px; height: 10px; border-radius: 50%; }

/* timings */
.timing-block { border: 1px solid var(--border); border-radius: 10px; padding: 11px; margin-bottom: 9px; }
.timing-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; margin-bottom: 7px; }
.timing-head .dot { width: 11px; height: 11px; border-radius: 50%; }
.timing-dir { font-size: 12px; color: var(--muted); margin: 5px 0 2px; }
.times { display: flex; flex-wrap: wrap; gap: 6px; }
.time-pill { background: #eef4ff; color: #1e40af; font-weight: 700; font-size: 13px; padding: 4px 9px; border-radius: 7px; font-variant-numeric: tabular-nums; }
.time-pill.soon { background: #1e40af; color: #fff; }
.svc-closed { color: var(--uc); font-size: 13px; font-weight: 600; }

/* station list inside a line */
.stop-list { list-style: none; padding: 0; margin: 0; position: relative; }
.stop-item {
  display: flex; align-items: center; gap: 11px; padding: 5px 0; cursor: pointer; position: relative;
}
.stop-item:hover .stop-name { color: #2563eb; }
.stop-node {
  width: 14px; height: 14px; border-radius: 50%; background: #fff; flex-shrink: 0; z-index: 2;
}
.stop-rail { position: absolute; left: 6px; top: 0; bottom: 0; width: 3px; z-index: 1; }
.stop-name { font-size: 13.5px; }
.stop-xchg { font-size: 11px; color: var(--muted); }

/* route itinerary */
.itin { list-style: none; padding: 0; margin: 8px 0 0; }
.itin-leg { display: flex; gap: 10px; padding: 7px 0; }
.itin-leg .leg-bar { width: 7px; border-radius: 4px; flex-shrink: 0; }
.itin-leg .leg-body { flex: 1; }
.itin-leg .leg-line-name { font-weight: 700; font-size: 13.5px; }
.itin-leg .leg-detail { font-size: 12.5px; color: var(--muted); }
.itin-xfer { font-size: 12px; color: var(--uc); padding: 4px 0 4px 17px; font-weight: 600; }
.route-summary { display: flex; gap: 14px; margin: 6px 0 2px; }
.route-summary .rs { font-size: 13px; }
.route-summary .rs b { font-size: 17px; }
.route-result:empty { display: none; }
.route-result { margin-top: 10px; }
.route-err { color: #b4232a; font-size: 13px; font-weight: 600; }
.route-warn { background: #fdf0d8; color: #8a5a08; border-radius: 8px; padding: 7px 9px; font-size: 12px; margin-top: 8px; }

.leaflet-popup-content { margin: 9px 12px; font-size: 13px; }
.popup-name { font-weight: 700; font-size: 14px; }
.popup-lines { display: flex; gap: 4px; margin-top: 5px; }
.popup-lines .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ───────────────────────── Responsive ───────────────────────── */
@media (max-width: 820px) {
  #app { grid-template-columns: 1fr; }
  #sidebar {
    position: absolute; top: 0; left: 0; height: 100vh; width: min(86vw, 360px);
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow);
  }
  #sidebar.open { transform: none; }
  .mobile-toggle {
    display: block; position: absolute; top: 12px; left: 12px; z-index: 1100;
    background: #fff; border: 1px solid var(--border); border-radius: 9px;
    width: 42px; height: 42px; font-size: 20px; box-shadow: var(--shadow);
  }
  .detail { width: 100%; height: 72vh; top: auto; bottom: 0; border-left: none; border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0; animation: slideup .2s ease; }
  @keyframes slideup { from { transform: translateY(30px); opacity:.5;} to { transform:none; opacity:1; } }
  .legend { display: none; }
}