/* ==================== LIVE PAGE (live.html) ====================
   Full-bleed Leaflet map showing only routes with an active TTC service disruption right now,
   colored by each route's real GTFS route_color. Top-left panel: connection status, legend,
   last-updated. Right-side panel: details for whichever route was last clicked.
*/

body.live-page, body.live-page #app {
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.live-page .map-container {
    height: 100%;
    width: 100%;
    background: #0f1117;
}

.live-page #liveMap {
    height: 100%;
    width: 100%;
}

/* ---------- Top-left status/legend panel ---------- */
.live-page-sidebar {
    width: 280px;
}

.live-page-sidebar .panel-content {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
}

/* Collapse-to-pill toggle (shares .control-panel.collapsed's slide-off-left animation and 48x48
   sizing from main.css -- this page only adds the icon flip and the count badge). */
.live-page-sidebar .panel-toggle {
    position: relative;
}

.live-page-sidebar.collapsed .panel-toggle i {
    transform: rotate(180deg);
}

/* Hidden while expanded (the status line right below already spells out the count in full) --
   shown only on the collapsed 48x48 pill, where it's the sole surviving clue that something's
   wrong, so a mobile user doesn't have to expand the panel just to find out nothing's active. */
.live-panel-toggle-badge {
    display: none;
}

.live-page-sidebar.collapsed .live-panel-toggle-badge.has-count {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    background: var(--accent-primary, #e74c3c);
    color: #fff;
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    box-shadow: 0 0 0 2px var(--bg-secondary);
}

.live-section-label {
    font-size: 0.7rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: var(--space-sm) 0 6px;
}

.live-effect-select {
    width: 100%;
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.live-effect-select .view-select {
    width: 100%;
}

.live-filter-item input {
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.live-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.9rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
}

.live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.live-dot.live-ok {
    background: #2ecc71;
    animation: live-pulse 2s infinite;
}

.live-dot.live-error {
    background: var(--accent-primary, #e74c3c);
}

@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.55); }
    70% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); }
    100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); }
}

.live-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.live-refresh-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 6px;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.live-refresh-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.live-refresh-btn.spinning i {
    animation: live-spin 0.6s linear;
}

@keyframes live-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.live-upcoming-filter {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.live-route-search {
    position: relative;
    margin-bottom: var(--space-sm);
}

.live-search-suggestions {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    z-index: var(--z-dropdown);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    max-height: 220px;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
    display: none;
}

.live-search-suggestions.open {
    display: block;
}

.live-search-suggestion {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.live-search-suggestion:hover {
    background: var(--bg-tertiary);
}

.live-search-suggestion .live-search-route {
    font-weight: 700;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.live-search-suggestion .live-search-name {
    color: var(--text-muted);
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-search-empty {
    padding: var(--space-sm) var(--space-md);
    color: var(--text-muted);
    font-size: 0.8rem;
}

.live-search-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.live-search-chips:empty {
    display: none;
    margin: 0;
    padding: 0;
    border: none;
}

.live-search-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--accent-primary);
    color: #fff;
    border-radius: 999px;
    padding: 2px 6px 2px 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.live-search-chip button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 2px;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.8;
}

.live-search-chip button:hover {
    opacity: 1;
}

.live-transit-type-select {
    width: 100%;
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.live-transit-type-btn {
    text-align: left;
}

.live-transit-type-panel {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.live-transit-type-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
}

.live-transit-type-item:hover {
    background: var(--bg-surface);
}

.live-transit-type-item input {
    margin: 0;
    accent-color: var(--accent-primary);
}

.live-legend {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.live-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.live-legend-item.live-legend-dim {
    opacity: 0.45;
}

.live-legend-swatch {
    width: 22px;
    height: 4px;
    border-radius: 2px;
    flex-shrink: 0;
}

.live-legend-swatch.live-legend-swatch-thick {
    height: 6px;
}

.live-legend-empty {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    padding: var(--space-sm) 0;
}

/* ---------- Right-side detail panel ---------- */
.live-detail-panel {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    width: 380px;
    max-width: calc(100vw - 2 * var(--space-lg));
    max-height: calc(100vh - 2 * var(--space-lg));
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-top: 3px solid var(--live-panel-accent, var(--accent-primary));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-fixed);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(calc(100% + var(--space-lg)));
    opacity: 0;
    pointer-events: none;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.live-detail-panel.open {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

.live-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.live-detail-header h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.live-detail-header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.live-detail-legend-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.live-detail-legend-btn:hover,
.live-detail-legend-btn.active {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
}

.live-detail-legend {
    padding: var(--space-sm) var(--space-lg) var(--space-md);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.live-detail-legend-section + .live-detail-legend-section {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-light);
}

.live-detail-legend-title {
    font-size: 0.66rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.live-detail-legend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 6px;
}

.live-detail-legend-grid-arrows {
    grid-template-columns: repeat(4, auto);
}

.live-detail-legend-entry {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Mirrors the real map marker (.live-stop-marker-dot) at a smaller scale, so a legend entry
   visibly matches what's plotted on the map instead of being a bare colored glyph. */
.live-detail-legend-swatch {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-secondary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: 0.58rem;
}

.live-detail-legend-note {
    margin-top: 6px;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.35;
}

.live-detail-body {
    padding: var(--space-md) var(--space-lg);
    overflow-y: auto;
}

.live-alert-card {
    padding: var(--space-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.live-alert-card:hover {
    background: var(--bg-surface);
}

.live-alert-card + .live-alert-card {
    margin-top: var(--space-sm);
}

.live-alert-card-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}

.live-alert-icon-badge {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    font-size: 0.95rem;
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.live-alert-icon-badge.effect-no_service,
.live-alert-icon-badge.effect-significant_delays {
    background: rgba(231, 76, 60, 0.18);
    color: #e74c3c;
}

.live-alert-icon-badge.effect-detour,
.live-alert-icon-badge.effect-modified_service,
.live-alert-icon-badge.effect-reduced_service {
    background: rgba(243, 156, 18, 0.18);
    color: #f39c12;
}

.live-alert-icon-badge.effect-additional_service {
    background: rgba(46, 204, 113, 0.18);
    color: #2ecc71;
}

.live-alert-icon-badge.effect-stop_moved,
.live-alert-icon-badge.effect-accessibility_issue {
    background: rgba(52, 152, 219, 0.18);
    color: #3498db;
}

.live-alert-icon-badge.effect-other_effect,
.live-alert-icon-badge.effect-unknown_effect {
    background: rgba(149, 165, 166, 0.18);
    color: #95a5a6;
}

.live-alert-card-top-text {
    flex: 1;
    min-width: 0;
}

.live-alert-effect-name {
    font-size: 0.9rem;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    text-transform: capitalize;
}

.live-alert-recur-count {
    font-size: 0.7rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    text-transform: none;
}

.live-alert-cause {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    text-transform: capitalize;
}

.live-alert-shared-routes {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 0.74rem;
    color: var(--text-muted);
    font-style: italic;
}

.live-alert-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.live-alert-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-tertiary);
    color: var(--text-primary);
    margin-bottom: 0;
}

.live-alert-badge.severity-info {
    background: rgba(52, 152, 219, 0.18);
    color: #3498db;
}

.live-alert-badge.severity-warning {
    background: rgba(243, 156, 18, 0.18);
    color: #f39c12;
}

.live-alert-badge.severity-severe {
    background: rgba(231, 76, 60, 0.18);
    color: #e74c3c;
}

.live-alert-badge.status-upcoming {
    background: rgba(155, 89, 182, 0.18);
    color: #9b59b6;
}

.live-alert-badge.effect-no_service,
.live-alert-badge.effect-significant_delays {
    background: rgba(231, 76, 60, 0.18);
    color: #e74c3c;
}

.live-alert-badge.effect-detour,
.live-alert-badge.effect-modified_service,
.live-alert-badge.effect-reduced_service {
    background: rgba(243, 156, 18, 0.18);
    color: #f39c12;
}

.live-alert-badge.effect-additional_service {
    background: rgba(46, 204, 113, 0.18);
    color: #2ecc71;
}

.live-alert-header {
    font-size: 0.88rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    line-height: 1.4;
    margin: 0 0 6px;
}

.live-alert-description {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0 0 6px;
}

.live-alert-occurrences {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 6px 0;
    padding: 8px 10px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.live-alert-occurrence {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.76rem;
}

.live-alert-occurrence-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.live-alert-occurrence.current .live-alert-occurrence-dot {
    background: #2ecc71;
}

.live-alert-occurrence.upcoming .live-alert-occurrence-dot {
    background: transparent;
    border: 1.5px solid #9b59b6;
}

.live-alert-occurrence-label {
    flex-shrink: 0;
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    width: 52px;
}

.live-alert-occurrence.current .live-alert-occurrence-label {
    color: #2ecc71;
}

.live-alert-occurrence.upcoming .live-alert-occurrence-label {
    color: #9b59b6;
}

.live-alert-occurrence-range {
    color: var(--text-muted);
}

.live-alert-path {
    margin-top: 8px;
}

.live-alert-path-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

/* Metro-style line diagram: a continuous vertical rail behind every stop's dot, one row per
   physical station (see _groupAlertStops) -- not one per directional platform. */
.live-alert-path-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* No max-height/overflow of its own -- a 14-platform alert was capping at 200px and creating
       an awkward scrollbar-inside-a-scrollbar. The whole panel body (.live-detail-body) already
       scrolls, so a long station list just makes that one scroll region longer instead. */
}

.live-alert-path-list::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 14px;
    bottom: 14px;
    width: 2px;
    background: var(--border-color);
}

.live-alert-path-stop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px 5px 28px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.live-alert-path-stop:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.live-alert-path-stop.flash {
    background: rgba(163, 77, 255, 0.22);
}

/* Lavender/purple -- same "Time" identity as the Map tab's own gradient (#A34DFF), not the red
   used elsewhere for severity. This marks WHERE on the map something is, not how bad it is. */
.live-alert-path-dot {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #a34dff;
    border: 2px solid var(--bg-surface);
    z-index: 1;
}

.live-alert-path-name {
    flex: 1;
}

.live-alert-path-arrows {
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold);
    letter-spacing: 1px;
    color: #f39c12;
}

.live-alert-path-arrows.full {
    color: #a34dff;
}

/* Permanent (not hover-only) name label for a station plotted on the map -- see
   _showAlertStationsOnMap. Overrides Leaflet's default tooltip chrome to match the app's dark
   pill styling instead of the library's plain white box. */
.leaflet-tooltip.live-station-label {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.leaflet-tooltip.live-station-label::before {
    border-right-color: var(--border-color);
}

.live-alert-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--accent-primary);
}

/* TTC's own diversion-map graphic -- shown when an alert has no stop-level location data for us
   to plot ourselves (see netlify/functions/alerts.js's firstImageUrl). */
.live-alert-image-link {
    display: block;
    margin-top: 8px;
}

.live-alert-image {
    display: block;
    max-width: 220px;
    max-height: 160px;
    width: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
    background: var(--bg-surface);
}

.live-alert-image-caption {
    display: block;
    margin-top: 4px;
    font-size: 0.68rem;
    color: var(--text-muted);
    font-style: italic;
    line-height: 1.3;
}

/* ---------- Leaflet polyline hover affordance ---------- */
.live-page .leaflet-interactive:hover {
    cursor: pointer;
}

/* Every interactive Leaflet path (route hit-lines, station circle markers) gets tabindex="0", so
   the same browser default dotted focus ring applies here too, not just on alert markers -- see
   the fuller explanation on .live-stop-marker:focus below. */
.live-page .leaflet-interactive:focus {
    outline: none;
}

.live-page .leaflet-interactive:focus-visible {
    outline: 2px solid #a34dff;
    outline-offset: 1px;
}

/* ---------- Alert markers (one per alert, not per stop) ----------
   Background color is set inline per marker from LIVE_EFFECT_ICONS -- red/orange/green/blue/grey
   by effect type, same semantics as the panel's .live-alert-icon-badge.effect-* rules. The white
   ring + shadow below is what keeps a marker legible against a same-hued route line (e.g. an
   orange Detour icon on Line 5's orange track), not the fill color -- that's doing double duty
   as identity. A bare icon-only style (no circle) was tried and reverted -- circular badges back
   by request. */
.live-stop-marker {
    background: none;
    border: none;
}

/* Leaflet gives every marker tabindex="0" for keyboard accessibility -- clicking one focuses it,
   which triggers the browser's own default focus ring (Chrome renders outline:auto as a dotted
   line). That's the dotted boundary that kept appearing regardless of the halo/border work above;
   a completely different mechanism from either. Suppressed on mouse click (:focus), kept on
   keyboard nav (:focus-visible) with a clean custom ring instead of the browser default, so
   keyboard accessibility isn't just deleted. */
.live-stop-marker:focus {
    outline: none;
}

.live-stop-marker:focus-visible {
    outline: 2px solid #a34dff;
    outline-offset: 2px;
    border-radius: 50%;
}

/* Sized to fill the divIcon wrapper (Leaflet sets that wrapper's width/height inline from
   iconSize) rather than a fixed px value here -- see _markerSizeForZoom/_buildMarkerIcon in
   liveController.js, which pick iconSize per zoom level and set this span's font-size inline to
   match. A fixed 18px here would ignore that and always render the same size regardless of zoom. */
.live-stop-marker-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    color: #fff;
    cursor: pointer;
}

/* Route-wide alert with no real location data -- a soft outer halo instead of the solid marker's
   crisp ring, so it visibly reads as "approximate: dropped at the route's midpoint" rather than a
   precise affected stop. A dashed border was tried first: CSS renders dashes unevenly around a
   circle (uneven arc lengths per segment), which just looked broken rather than intentional. */
.live-stop-marker-approx .live-stop-marker-dot {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 0 3px color-mix(in srgb, var(--live-marker-color, #a34dff) 30%, transparent);
}

/* Route-wide alert with no real location data -- lower opacity instead of the solid marker's full
   strength, so it visibly reads as "approximate: dropped at the route's midpoint" rather than a
   precise affected stop. A dashed border, then a colored halo ring, were tried first for this and
   both fought with the icon-only redesign above; opacity alone stays clean at any size. */
.live-stop-marker-approx .live-stop-marker-dot {
    opacity: 0.6;
}

@media (max-width: 768px) {
    .live-detail-panel {
        left: var(--space-lg);
        right: var(--space-lg);
        width: auto;
        max-width: none;
    }

    /* At this width there's no gap left anywhere on the map edge for Leaflet's zoom control to
       live without colliding with the nav island (spans nearly the full width up top) or the
       attribution strip (bottom) -- confirmed by measuring both against the control's rect at
       390x844. Pinch-to-zoom and double-tap-zoom (Leaflet's default touch handlers, already
       active) cover the same action on a touch viewport, so drop the redundant on-screen buttons
       here rather than fight for space. */
    .live-page .leaflet-control-zoom {
        display: none;
    }
}

/* The desktop collapse-to-pill sidebar is replaced outright on mobile by LiveMobileController's
   floating-tile UI (js/liveMobile.js, styles/mobile.css) -- same split the main map page already
   makes for its own desktop .control-panel vs MobileController. Nav island is unaffected: it isn't
   part of .live-page-sidebar. */
body.mobile-active .live-page-sidebar {
    display: none;
}

/* ---------- Mobile events drawer rows (js/liveMobile.js) ---------- */
.live-mobile-event-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--border-light);
    cursor: pointer;
}

.live-mobile-event-item:last-child {
    border-bottom: none;
}

.live-mobile-event-item:active {
    background: var(--bg-tertiary);
}

.live-mobile-event-route {
    flex-shrink: 0;
    min-width: 30px;
    height: 24px;
    padding: 0 6px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
}

.live-mobile-event-icon {
    flex-shrink: 0;
    font-size: 0.85rem;
    width: 18px;
    text-align: center;
}

.live-mobile-event-text {
    flex: 1;
    font-size: 0.82rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.live-mobile-event-chevron {
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}