:root {
  --tfl-blue: #0019A4;
  --tfl-red: #DC241F;
  --bg: #eef0f3;
  --panel-bg: #ffffff;
  --border: #d4d6db;
  --ink: #1c1c1c;
  --muted: #6b7176;

  /* Official TfL line colours */
  --line-bakerloo: #B26300;
  --line-central: #DC241F;
  --line-circle: #FFD329;
  --line-district: #00782A;
  --line-hammersmith-city: #F3999A;
  --line-jubilee: #A0A5A9;
  --line-metropolitan: #9B0056;
  --line-northern: #000000;
  --line-piccadilly: #003688;
  --line-victoria: #0098D4;
  --line-waterloo-city: #93CEBA;
  --line-dlr: #00A4A7;
  --line-tram: #84B817;
  --line-overground: #EE7C0E;
  --line-elizabeth: #7159A3;
  --line-liberty: #9B0040;
  --line-lioness: #FFD329;
  --line-mildmay: #910091;
  --line-suffragette: #68BCAE;
  --line-weaver: #EE7C0E;
  --line-windrush: #E320A2;
  --line-emirates: #E42029;
  --line-cable-car: #A3008F;
  --line-rail: #003688;
  --line-bus: #DC241F;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
}

header {
  background: var(--tfl-blue);
  color: #fff;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  max-width: 800px;
  margin: 0 auto;
}

header h1 {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.search-bar {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 280px;
}

.search-bar input {
  flex: 1;
  padding: 10px 14px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.18) inset;
}

.search-bar input:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.search-bar button {
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  background: var(--tfl-red);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s;
}

.search-bar button:hover {
  background: #b51d19;
}

.search-bar button#near-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.5);
}

.search-bar button#near-btn:hover {
  background: rgba(255,255,255,0.28);
}

main {
  display: block;
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 760px) {
  main { padding: 12px; }
  header { padding: 14px 16px; gap: 12px; }
  header h1 { font-size: 1.2rem; }

  /* On phones the search bar's min-width plus two buttons overflows the
     viewport. Drop it so the input can shrink to fit, and keep all three
     controls on one row. */
  .search-bar { min-width: 0; }
}

@media (max-width: 460px) {
  header { flex-wrap: wrap; gap: 10px; padding: 12px; }
  header h1 { font-size: 1.05rem; }
  /* Stack title above search so input gets the full row; buttons share it. */
  .search-bar { flex-basis: 100%; }
  .search-bar input { min-width: 0; }
  .search-bar button { padding: 10px 14px; font-size: 0.9rem; }
}

/* View switching: only the active view is shown */
.view {
  display: none;
}
.view.active {
  display: block;
}

.arrivals-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--tfl-blue);
  padding-bottom: 10px;
}

.arrivals-header h2 {
  margin: 0;
  flex: 1;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tfl-blue);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

#arrivals-title {
  border-bottom: none;
  padding-bottom: 0;
}

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: rgba(0, 25, 164, 0.08);
  color: var(--tfl-blue);
  border: 1px solid rgba(0, 25, 164, 0.2);
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}

.back-btn:hover {
  background: rgba(0, 25, 164, 0.16);
}

#stops-panel, #arrivals-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

#stops-panel h2, #arrivals-panel h2 {
  margin: 0 0 12px 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tfl-blue);
  letter-spacing: -0.01em;
}

#stops-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 72vh;
  overflow-y: auto;
}

#stops-list li {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-radius: 8px;
  margin: 2px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  transition: background 0.12s;
}

#stops-list li:hover {
  background: #eef1f8;
}

#stops-list li.active {
  background: var(--tfl-blue);
  color: #fff;
}

#stops-list li.active .stop-modes {
  color: rgba(255,255,255,0.8);
}

#stops-list .stop-name {
  font-weight: 600;
  font-size: 0.95rem;
}

.favourites-panel {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.favourites-panel:not([hidden]) + #stops-list {
  margin-top: 0;
}

.favourites-heading {
  margin: 0 0 8px 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.favourites-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.favourites-list li {
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-radius: 8px;
  margin: 2px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  transition: background 0.12s;
  background: #f3f6ff;
}

.favourites-list li:hover {
  background: #e7edff;
}

.favourites-list li.active {
  background: var(--tfl-blue);
  color: #fff;
}

.fav-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0 4px;
  transition: color 0.15s, transform 0.1s;
}

.fav-btn:hover {
  color: #e0a800;
}

.fav-btn.is-fav {
  color: #e0a800;
}

.fav-btn:active {
  transform: scale(0.9);
}

#stops-list .stop-modes {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mode-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 10px;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.4;
}

/* Shared line colour backgrounds - used by both .line-badge and .mode-chip.
   Official TfL line colours via --line-* vars. */
/* Fallback colour for any line without a specific class below. Defined
   first so real .line-* classes (equal specificity, later source order)
   override it; unknown lines fall through to this default. */
.line-default { background: var(--tfl-blue); }

.line-bakerloo { background: var(--line-bakerloo); }
.line-central { background: var(--line-central); }
.line-circle { background: var(--line-circle); }
.line-district { background: var(--line-district); }
.line-hammersmith-city { background: var(--line-hammersmith-city); }
.line-jubilee { background: var(--line-jubilee); }
.line-metropolitan { background: var(--line-metropolitan); }
.line-northern { background: var(--line-northern); }
.line-piccadilly { background: var(--line-piccadilly); }
.line-victoria { background: var(--line-victoria); }
.line-waterloo-city { background: var(--line-waterloo-city); }
.line-dlr { background: var(--line-dlr); }
.line-tram { background: var(--line-tram); }
.line-overground { background: var(--line-overground); }
.line-elizabeth { background: var(--line-elizabeth); }
.line-liberty { background: var(--line-liberty); }
.line-lioness { background: var(--line-lioness); }
.line-mildmay { background: var(--line-mildmay); }
.line-suffragette { background: var(--line-suffragette); }
.line-weaver { background: var(--line-weaver); }
.line-windrush { background: var(--line-windrush); }
.line-emirates { background: var(--line-emirates); }
.line-cable-car { background: var(--line-cable-car); }
.line-rail,
.line-national-rail { background: var(--line-rail); }
.line-bus { background: var(--line-bus); }
.line-tube,
.line-underground { background: var(--tfl-blue); }
.line-replacement-bus { background: #444; }
.line-coach { background: #7c4dff; }
.line-river { background: #005a9c; }
.line-interchange { background: #444; }

#arrivals-notices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.notice {
  background: #fff8e1;
  border: 1px solid #ffd54f;
  border-left: 5px solid #ef6c00;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.9rem;
  color: #5b4400;
  line-height: 1.4;
}

.notice-tag {
  display: inline-block;
  background: #ef6c00;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
}

#arrivals-status {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 10px;
  min-height: 1.2em;
}

#arrivals-table {
  width: 100%;
  border-collapse: collapse;
}

#arrivals-table th {
  text-align: left;
  padding: 8px 8px;
  border-bottom: 2px solid var(--border);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}

#arrivals-table td {
  padding: 11px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  vertical-align: middle;
}

#arrivals-table tr:hover td {
  background: #f8f9fb;
}

#arrivals-table th:last-child,
#arrivals-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.line-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 4px 10px;
  border-radius: 4px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
}

.line-badge.line-circle,
.line-badge.line-liberty,
.line-badge.line-lioness,
.line-badge.line-waterloo-city,
.line-badge.line-suffragette,
.line-badge.line-tram {
  color: #1c1c1c;
}

.mode-chip.line-circle,
.mode-chip.line-liberty,
.mode-chip.line-lioness,
.mode-chip.line-waterloo-city,
.mode-chip.line-suffragette,
.mode-chip.line-tram {
  color: #1c1c1c;
}

.show-all-row td {
  text-align: center !important;
  padding-top: 14px;
  border-bottom: none;
}

.show-all-btn {
  background: var(--tfl-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 18px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}

.show-all-btn:hover {
  background: #001a6e;
}

.due-soon {
  color: var(--tfl-red);
  font-weight: 700;
}