:root {
    --cream: #faf3e7;
    --cream-dark: #f0e4cf;
    --brown: #4a3728;
    --brown-dark: #2e2218;
    --terracotta: #c46a4a;
    --terracotta-dark: #a1502f;
    --ink: #3a3128;
    --line: #D8CBB8;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; font-family: 'Georgia', 'Iowan Old Style', serif; color: var(--ink); }
  .wrap { display: flex; flex-direction: column; height: 100vh; }

  header {
    position: relative;
    background: var(--brown);
    color: var(--cream);
    padding: 12px 18px 10px;
    flex-shrink: 0;
    border-bottom: 3px solid var(--brown-dark);
  }
  header h1 { margin: 0 0 3px; font-size: 1.1em; letter-spacing: 0.02em; }
  header p  { margin: 0; font-size: 0.78em; opacity: 0.85; font-style: italic; }
  .overview-link {
    position: absolute; top: 12px; right: 18px;
    font-size: 1rem; font-weight: 600; color: var(--cream); text-decoration: none;
    letter-spacing: 0.01em;
  }
  .overview-link:hover { text-decoration: underline; }
  @media (max-width: 640px) {
    header { display: flex; flex-direction: column; }
    .overview-link {
      position: static;
      order: -1;            /* sits above the h1 */
      align-self: flex-end; /* stays on the right */
      margin-bottom: 6px;
    }
  }

  .main { display: flex; flex: 1; min-height: 0; }
  #map { flex: 1.5; min-width: 0; }

  #list {
    flex: 1;
    min-width: 260px;
    max-width: 360px;
    overflow-y: auto;
    border-left: 1px solid var(--line);
    background: var(--cream);
  }

  .legend-bar {
    position: sticky;
    top: 0;
    background: var(--brown-dark);
    color: var(--cream);
    font-size: 0.7em;
    font-weight: bold;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 5px 13px;
    display: flex;
    gap: 14px;
    align-items: center;
    z-index: 5;
  }
  .leg-item { display: flex; align-items: center; gap: 5px; }
  .swatch {
    width: 11px; height: 11px; border-radius: 50%;
    border: 2px solid white; flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
  }
  .swatch.main { background: var(--terracotta); }
  .swatch.side { background: var(--brown); }

  .stop {
    display: flex;
    gap: 9px;
    padding: 8px 13px;
    align-items: flex-start;
    border-bottom: 1px solid var(--cream-dark);
    cursor: pointer;
    transition: background 0.12s;
  }
  .stop:hover  { background: var(--cream-dark); }
  .stop.active { background: var(--terracotta); color: var(--cream); }
  .stop.active .stop-sub { opacity: 0.85; }

  .badge {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--terracotta);
    color: #fff;
    font-size: 0.7em;
    font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    margin-top: 1px;
  }
  .stop.active .badge { background: white; color: var(--terracotta-dark); }
  .badge.side { background: var(--brown); width: 14px; height: 14px; margin: 4px 4px 0 4px; border-radius: 50%; }
  .stop.active .badge.side { background: white; }

  .stop-body { flex: 1; min-width: 0; }
  .stop-name { font-size: 0.88em; font-weight: bold; line-height: 1.25; }
  .stop.side-row .stop-name { font-style: italic; font-weight: normal; font-size: 0.82em; }
  .stop-sub { display: block; font-size: 0.75em; opacity: 0.7; margin-top: 2px; }

  .leaflet-popup-content-wrapper {
    background: var(--cream);
    color: var(--ink);
    border-radius: 6px;
    border: 2px solid var(--terracotta);
  }
  .leaflet-popup-tip { background: var(--cream); }
  .popup-title { font-weight: bold; color: var(--terracotta-dark); margin-bottom: 3px; font-size: 1.0em; }
  .popup-sub { font-size: 0.85em; color: var(--brown-dark); }

  @media (max-width: 700px) {
    .main { flex-direction: column; }
    #map { flex: none; height: 55vh; }
    #list { max-width: none; border-left: none; border-top: 1px solid var(--line); flex: 1; }
  }