:root {
  --blue: #006b78;
  --dark-blue: #004f59;
  --light-blue: #edf5f3;

  --green: #4e7d3a;
  --orange: #d18b00;
  --red: #c62828;

  --gold: #f4c542;

  --background: #f7f5ef;
  --text: #263238;
  --muted: #66717d;
  --white: #ffffff;
  --border: #d9dedb;
}

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      background: var(--background);
      color: var(--text);
      font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    }

    /* ---------------- Header ---------------- */

    header {
      background: var(--blue);
      color: white;
    }

    .header-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 24px 20px 0;
    }

    .brand {
      padding-bottom: 20px;
    }

    .brand h1 {
      margin: 0;
      font-size: 2rem;
      letter-spacing: 0.02em;
    }

    .brand p {
      margin: 5px 0 0;
      opacity: 0.9;
    }

    nav {
      display: flex;
      gap: 4px;
      overflow-x: auto;
    }

    nav a {
      display: block;
      color: white;
      text-decoration: none;
      padding: 12px 15px;
      border-radius: 7px 7px 0 0;
      white-space: nowrap;
      font-weight: 600;
    }

    nav a:hover,
    nav a.active {
      background: var(--dark-blue);
    }

    /* ---------------- Main ---------------- */

    main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 25px 20px 40px;
    }

    .section-heading {
      margin-bottom: 12px;
    }

    .section-heading h2 {
      margin: 0;
      font-size: 1.5rem;
    }

    .section-heading p {
      margin: 4px 0 0;
      color: var(--muted);
    }

    /* ---------------- Status ---------------- */

    .status {
      padding: 14px 18px;
      margin-bottom: 15px;
      border-radius: 8px;
      background: white;
      border-left: 5px solid #777;
      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    }

    .status.sample {
      background: #edf4ff;
      border-left-color: #3366cc;
    }

    .status.live {
      background: #edf8ef;
      border-left-color: var(--green);
    }

    .status.backup {
      background: #fff7df;
      border-left-color: var(--orange);
    }

    .status.stale {
      background: #fff0f0;
      border-left-color: var(--red);
    }

    .status-title {
      font-weight: 700;
      font-size: 1.05rem;
    }

    .status-age {
      margin-top: 2px;
      font-size: 1rem;
    }

    .status-details {
      margin-top: 3px;
      color: var(--muted);
      font-size: 0.85rem;
    }

    /* ---------------- Map ---------------- */

    .map-card {
      background: white;
      border-radius: 10px;
      padding: 8px;
      box-shadow: 0 2px 7px rgba(0,0,0,0.12);
    }

    #map {
      height: 650px;
      width: 100%;
      border-radius: 7px;
    }

    /* ---------------- Route selector ---------------- */

    .route-bar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin: 15px 0 35px;
    }
    
    .route-neutral {
      background: #6b7280;
      color: white;
    }

    .route-label {
      font-weight: 700;
      margin-right: 3px;
    }

    .route-button {
      border: 1px solid var(--border);
      background: white;
      color: var(--text);
      padding: 8px 16px;
      border-radius: 20px;
      cursor: pointer;
      font: inherit;
      font-weight: 600;
    }

    .route-button:hover {
      background: var(--light-blue);
    }

    .route-button.selected {
      background: var(--blue);
      border-color: var(--blue);
      color: white;
    }

    /* ---------------- Information cards ---------------- */

    .info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
    }

    .info-card {
      background: white;
      border-radius: 10px;
      padding: 22px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .info-card h2 {
      margin: 0 0 14px;
      font-size: 1.25rem;
    }

    .placeholder {
      color: var(--muted);
      margin: 0;
    }

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

    .placeholder-list li {
      padding: 10px 0;
      border-top: 1px solid var(--border);
    }

    .placeholder-list li:first-child {
      border-top: 0;
    }

    /* ---------------- Footer ---------------- */

    footer {
      background: #e6eaee;
      border-top: 1px solid var(--border);
    }

    .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 25px 20px;
      color: var(--muted);
      font-size: 0.85rem;
    }

    .footer-inner p {
      margin: 4px 0;
    }

    /* ---------------- Bus markers ---------------- */

.bus-marker {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);

  display: flex;
  align-items: center;
  justify-content: center;

  color: white;
  font-size: 17px;
  font-weight: bold;
}
.bus-marker-faded {
  opacity: 0.65;
}

.bus-marker-ghost {
  opacity: 0.3;
}

.bus-direction {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 11px solid #1f2937;
  transform-origin: 50% 28px;
  filter:
    drop-shadow(0 0 1px white)
    drop-shadow(0 0 1px white);
}


    /* Route colours, also neeeds including in scripts.js for class assignment, try to mimic real route colours where possible. */
    .route-1  { background-color: #49fc03;}
    .route-21 { background-color: #35e8ac; }
    .route-22 { background-color: #2149cc; }
    .route-25 { background-color: #4fe075;}
    .route-28 { background-color: #d18636; }
    .route-pr { background-color: #1dc4b6; }

    /* ---------------- Popup ---------------- */

    .popup-route {
      font-size: 1.3rem;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .popup-destination {
      border-top: #ddd 1px dashed; 
      margin: 9px 0;
      padding: 4px 0;
    }

.popup-header {
  display: flex;
  align-items: center;
}

.popup-operator-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
  margin-right: 10px;
  flex-shrink: 0;
}

.popup-operator {
  font-size: 16px;
  line-height: 1.1;
}

    .popup-details {
      font-size: 0.88rem;
      line-height: 1.55;
    }
    .popup-stale {
      margin-bottom: 9px;
      font-weight: 600;
    }

    /* ---------------- Mobile ---------------- */

    @media (max-width: 700px) {

      .header-inner {
        padding-top: 18px;
      }

      .brand h1 {
        font-size: 1.55rem;
      }

      nav a {
        padding: 10px 11px;
        font-size: 0.9rem;
      }

      main {
        padding: 18px 12px 30px;
      }

      #map {
        height: 500px;
      }

      .info-grid {
        grid-template-columns: 1fr;
      }

      .section-heading h2 {
        font-size: 1.3rem;
      }

    }

.leaflet-control-fullscreen {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: white;
  color: #333;
  font-size: 22px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
}

.leaflet-control-fullscreen:hover {
  background: #f4f4f4;
}

#map:fullscreen {
  width: 100vw;
  height: 100vh;
}