/*
 * responsive.css — desktop side-by-side layout vs. mobile Itinerary/Map
 * toggle (U6, R24-R26, KTD11).
 *
 * Breakpoint: 768px (min-width for desktop, max-width: 767px for mobile —
 * kept as a single shared value below so both queries stay in sync).
 *
 * Desktop (>= 768px): #itinerary and #map render side by side in a two-
 * column row (R25). The .view-tablist toggle from index.html is hidden
 * entirely — both sections are always visible regardless of
 * data-active-view, so the toggle would otherwise be a functionless
 * leftover control at this width.
 *
 * Mobile (< 768px): .site-main keeps base.css's single-column stack, but
 * only one of #itinerary/#map is shown at a time, driven by the
 * `data-active-view` attribute site/js/layout.js maintains on .site-main
 * (R26). The toggle itself becomes visible and interactive here.
 *
 * Selection-preservation note: these rules only ever change `display`.
 * Neither #itinerary nor #map is removed, re-rendered, or emptied when the
 * active view or the viewport width changes, so DOM state inside them
 * (scroll position, sync.js's highlighted day, an open Leaflet popup,
 * expanded legs) is untouched by a toggle switch or by resizing across the
 * breakpoint — see site/js/layout.js's file header for the full rationale.
 */

.view-tablist {
  display: none;
}

@media (max-width: 767px) {
  .view-tablist {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }

  .view-tab {
    flex: 1 1 0;
    min-width: 44px;
    min-height: 44px;
    padding: 0.6rem 1rem;
    font: inherit;
    font-weight: 600;
    text-align: center;
    color: #1a1a1a;
    background: #f0f0f0;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
  }

  .view-tab:hover {
    background: #e6e6e6;
  }

  .view-tab:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .view-tab[aria-selected="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
  }

  /* Exactly one of #itinerary/#map is shown at a time, per
     data-active-view (set by site/js/layout.js, defaulting to
     "itinerary" in index.html so the itinerary is the mobile default,
     R26). */
  .site-main[data-active-view="itinerary"] #map {
    display: none;
  }

  .site-main[data-active-view="map"] #itinerary {
    display: none;
  }
}

@media (min-width: 768px) {
  .site-main {
    flex-direction: row;
    align-items: flex-start;
  }

  #itinerary,
  #map {
    flex: 1 1 0;
    min-width: 0;
  }
}