/**
 * BEG 4 Commute & Weather - Locked Stylesheet
 * v3.5.0
 * ./css/bus.css
 */

:root {
  --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
  --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151;
  --gray-800: #1f2937; --gray-900: #111827;
  --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-500: #f59e0b;
  --amber-600: #d97706; --amber-900: #78350f; --amber-950: #451a03;
  --indigo-50: #eef2ff; --indigo-100: #e0e7ff; --indigo-200: #c7d2fe; --indigo-500: #6366f1;
  --indigo-900: #312e81; --indigo-950: #1e1b4b;
  --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-800: #1e293b; --slate-900: #0f172a;
  --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-800: #1e40af; --blue-900: #1e3a8a;
  --emerald-50: #ecfdf5; --emerald-100: #d1fae5; --emerald-200: #a7f3d0; --emerald-600: #059669; --emerald-900: #064e3b;
  --red-50: #fef2f2; --red-100: #fee2e2; --red-200: #fecaca; --red-600: #dc2626; --red-900: #7f1d1d;

  --morning-bg: #FAF6F0;
  --morning-header-bg: linear-gradient(135deg, #D97706 0%, #EA580C 50%, #C2410C 100%);
  --morning-tab-active: #D97706;
  --morning-card-border: #FDE68A;
  --morning-accent-text: #B45309;

  --evening-bg: #F1F5F9;
  --evening-header-bg: linear-gradient(135deg, #1E293B 0%, #0F172A 50%, #334155 100%);
  --evening-tab-active: #0F172A;
  --evening-card-border: #CBD5E1;
  --evening-accent-text: #1E293B;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--gray-800);
    display: flex; flex-direction: column; min-height: 100vh;
    transition: background-color 0.4s ease, color 0.4s ease;
}
.app-header { background: var(--theme-header-bg); color: white; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 30; transition: background 0.4s ease; }
.container { max-width: 36rem; margin: 0 auto; width: 100%; }

.header-inner { padding: 0.625rem 1rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }

.header-left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex-shrink: 0; }
.badges-col { display: flex; flex-direction: column; gap: 0.125rem; flex-shrink: 0; }
.badge-route { padding: 0.05rem 0.375rem; border-radius: 0.25rem; font-size: 10px; font-weight: 900; line-height: 1.25; text-align: center; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.badge-qm15 { background: white; color: var(--gray-900); }
.badge-bm5 { background: var(--blue-900); color: white; }

.lang-temp-stack { display: flex; flex-direction: column; gap: 0.2rem; align-items: flex-start; }
.btn-glass {
    padding: 0.2rem 0.5rem; font-size: 0.7rem; font-weight: 700; color: white;
    background: rgba(0,0,0,0.2); border: none; border-radius: 0.4rem; cursor: pointer;
    white-space: nowrap; transition: transform 0.1s, background 0.2s;
}
.btn-glass:hover { background: rgba(0,0,0,0.3); }
.btn-glass:active { transform: scale(0.95); }
.header-temp-sub { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.9); white-space: nowrap; font-family: ui-monospace, monospace; }

.header-center { display: flex; flex-direction: column; text-align: center; flex-grow: 1; min-width: 0; justify-content: center; }
.header-day-large { font-size: 1rem; font-weight: 900; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; }
@media (min-width: 640px) { .header-day-large { font-size: 1.125rem; } }
.header-date-spelled { font-size: 10px; font-weight: 600; opacity: 0.9; margin-top: 0.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.header-date-numeric { font-size: 10px; font-weight: 700; opacity: 0.85; font-family: ui-monospace, monospace; white-space: nowrap; }

.header-clock-stack { display: flex; flex-direction: column; text-align: right; flex-shrink: 0; cursor: pointer; user-select: none; padding: 0.25rem 0.5rem; border-radius: 0.5rem; background: rgba(0,0,0,0.15); transition: background 0.2s, transform 0.1s; }
.header-clock-stack:hover { background: rgba(0,0,0,0.25); }
.header-clock-stack:active { transform: scale(0.96); }
.clock-24 { font-size: 1rem; font-weight: 900; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; line-height: 1; letter-spacing: -0.025em; }
@media (min-width: 640px) { .clock-24 { font-size: 1.125rem; } }
.clock-12 { font-size: 10px; font-weight: 600; opacity: 0.85; font-family: ui-monospace, monospace; margin-top: 0.125rem; }

.main-content { padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; gap: 1rem; }

.tab-switcher { background: white; padding: 0.375rem; border-radius: 0.75rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); border: 1px solid var(--gray-200); display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.375rem; text-align: center; }
.tab-btn { padding: 0.625rem 0.75rem; border-radius: 0.5rem; font-size: 0.75rem; font-weight: 700; border: none; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.tab-work-active { background: var(--amber-600); color: white; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.tab-home-active { background: var(--slate-900); color: white; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.tab-inactive { background: transparent; color: var(--gray-500); }
.tab-inactive:hover { background: var(--gray-100); }

.alert-banner { background: var(--red-50); border: 1px solid var(--red-200); color: var(--red-900); padding: 0.75rem 1rem; border-radius: 0.75rem; font-size: 0.75rem; line-height: 1.4; display: flex; flex-direction: column; gap: 0.25rem; }
.alert-title { font-weight: 800; color: var(--red-600); display: flex; align-items: center; gap: 0.375rem; }

.main-card { background: white; border-radius: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); border: 1px solid var(--theme-card-border); overflow: hidden; transition: all 0.4s ease; }
.card-top { padding: 0.875rem 1rem 0.5rem; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--gray-100); }
.tab-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.125rem 0.5rem; border-radius: 0.25rem; border: 1px solid transparent; }
.badge-morning { background: var(--amber-100); color: var(--amber-900); border-color: var(--amber-200); }
.badge-evening { background: var(--slate-200); color: var(--slate-800); border-color: var(--slate-300); }
.last-updated { font-size: 10px; color: var(--gray-500); font-family: ui-monospace, monospace; }

.card-title-sec { padding: 0.75rem 1rem; border-bottom: 1px solid var(--gray-100); display: flex; flex-direction: column; gap: 0.375rem; }
.origin-title { margin: 0; font-weight: 700; color: var(--gray-900); font-size: 0.875rem; line-height: 1.25; }
@media (min-width: 640px) { .origin-title { font-size: 1rem; } }
.dest-subtitle { font-size: 11px; color: var(--gray-700); line-height: 1.625; font-weight: 600; }
@media (min-width: 640px) { .dest-subtitle { font-size: 0.75rem; } }

.arrivals-container { min-height: 220px; display: flex; flex-direction: column; }
.no-buses { padding: 1.5rem; text-align: center; font-size: 0.75rem; color: var(--gray-500); }
.no-buses-sub { font-size: 10px; color: var(--gray-400); margin-top: 0.25rem; }

.visit-item {
    padding: 1rem;
    margin: 0.75rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}
.visit-item:last-child {
    margin-bottom: 0.75rem;
}
.visit-item:hover {
    background: var(--slate-200);
    border-color: var(--slate-400);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}
@media (min-width: 640px) {
    .visit-item {
        padding: 1.25rem;
        margin: 1rem;
    }
}

.visit-header { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: 100%; }
@media (min-width: 640px) { .visit-header { flex-direction: row; align-items: center; } }

.visit-left { display: flex; align-items: center; gap: 0.625rem; min-width: 0; flex-wrap: wrap; }
.bus-icon { width: 3rem; height: 2.5rem; border-radius: 0.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.bus-icon-bm5 { background: var(--blue-900); color: white; }
.bus-icon-qm15 { background: white; color: var(--gray-900); border: 1px solid var(--gray-300); }
.bus-icon-line { font-size: 0.75rem; font-weight: 900; line-height: 1; }
.bus-icon-num { font-size: 9px; opacity: 0.8; font-family: ui-monospace, monospace; font-weight: 600; margin-top: 2px;}

.bus-dest {
  margin: 0 0 0.5rem 0;
  font-weight: 800;
  color: var(--gray-900);
  font-size: 0.875rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  width: 100%;
  display: block;
}
@media (min-width: 640px) { .bus-dest { font-size: 0.9375rem; } }
.bus-badges { display: flex; align-items: center; gap: 0.375rem; flex-wrap: wrap; margin-top: 0.25rem; font-size: 0.75rem; }

.status-badge { font-size: 11px; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 0.25rem; border: 1px solid transparent; }
.status-live { background: var(--emerald-100); color: var(--emerald-900); border-color: var(--emerald-200); }
.status-sched { background: var(--amber-100); color: var(--amber-900); border-color: var(--amber-200); }
.status-term { background: var(--blue-100); color: var(--blue-900); border-color: var(--blue-200); }
.status-stale { background: var(--red-100); color: var(--red-900); border-color: var(--red-200); }
.status-stalled { background: #fef08a; color: #713f12; border-color: #fde047; }

.conf-badge { font-size: 10px; font-weight: 800; padding: 0.125rem 0.375rem; border-radius: 0.25rem; text-transform: none; }
.conf-high { background: var(--emerald-50); color: var(--emerald-900); border: 1px solid var(--emerald-200); }
.conf-medium { background: var(--amber-50); color: var(--amber-900); border: 1px solid var(--amber-200); }
.conf-low { background: var(--red-50); color: var(--red-900); border: 1px solid var(--red-200); }

.occ-badge { font-size: 11px; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 0.25rem; border: 1px solid transparent; }
.occ-green { background: var(--emerald-50); color: var(--emerald-900); border-color: var(--emerald-200); }
.occ-yellow { background: var(--amber-50); color: var(--amber-900); border-color: var(--amber-200); }
.occ-red { background: var(--red-50); color: var(--red-900); border-color: var(--red-200); }
.occ-gray { background: var(--gray-100); color: var(--gray-700); border-color: var(--gray-200); }

.delta-badge { font-size: 10px; font-weight: 700; color: var(--emerald-600); margin-left: 0.25rem; }

.visit-right { text-align: left; flex-shrink: 0; margin-top: 0.25rem; }
@media (min-width: 640px) { .visit-right { text-align: right; margin-top: 0; } }

.wait-time { font-size: 1.125rem; font-weight: 900; line-height: 1; color: var(--theme-accent-text); display: inline-flex; align-items: baseline; gap: 0.2rem; }
@media (min-width: 640px) { .wait-time { font-size: 1.25rem; } }
.wait-unit { font-size: 0.85rem; font-weight: 600; text-transform: lowercase; }

.wait-just-dep { color: var(--gray-500); font-weight: 700; }
.wait-boarding { color: var(--emerald-600); font-weight: 900; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

.departs-time { font-size: 0.75rem; color: var(--gray-700); font-family: ui-monospace, monospace; font-weight: 600; margin-top: 0.25rem; white-space: nowrap; }
.departs-time span { font-size: 10px; color: var(--gray-500); font-weight: 400; }

.boarding-info { background: var(--gray-50); border-radius: 0.5rem; padding: 0.625rem; border: 1px solid rgba(229,231,235,0.8); font-size: 0.75rem; display: flex; flex-direction: column; gap: 0.375rem; justify-content: space-between; }
@media (min-width: 640px) { .boarding-info { flex-direction: row; align-items: center; } }
.boarding-name { color: var(--gray-900); font-weight: 800; }
.boarding-val { color: var(--gray-900); font-weight: 700; font-size: 0.8125rem; margin-top: 0.125rem; }
.boarding-dist { color: var(--gray-600); font-family: ui-monospace, monospace; font-size: 11px; white-space: nowrap; }
.proximity-text { color: var(--indigo-900); font-weight: 700; font-family: ui-sans-serif, system-ui; }

/* ZONE 3: INTENDED EXIT STOP STYLING */
.dropoff-info { background: var(--indigo-50); border-radius: 0.5rem; padding: 0.625rem; border: 1px solid var(--indigo-200); font-size: 0.75rem; display: flex; flex-direction: column; gap: 0.375rem; justify-content: space-between; }
@media (min-width: 640px) { .dropoff-info { flex-direction: row; align-items: center; } }
.dropoff-name { color: var(--indigo-950); font-weight: 800; }
.dropoff-val { color: var(--indigo-900); font-weight: 700; font-size: 0.8125rem; margin-top: 0.125rem; }

.wx-dashboard { background: white; border-radius: 1rem; padding: 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.05); border: 1px solid var(--gray-200); font-size: 0.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.wx-header-row { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.5rem; border-bottom: 1px solid var(--gray-100); color: var(--gray-800); font-weight: 700; }
.wx-title { font-size: 0.875rem; font-weight: 700; }
.wx-zips { font-size: 10px; color: var(--gray-400); font-family: ui-monospace, monospace; }

.wx-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 640px) { .wx-grid { grid-template-columns: repeat(2, 1fr); } }

.wx-card { border-radius: 0.75rem; padding: 0.875rem; cursor: pointer; transition: all 0.2s; display: flex; flex-direction: column; gap: 0.625rem; border: 1px solid transparent; }
.wx-card:active { transform: scale(0.99); }
.wx-card-header { display: flex; align-items: center; justify-content: space-between; font-weight: 700; padding-bottom: 0.375rem; border-bottom: 1px solid transparent; }
.wx-loc-title { font-size: 0.75rem; }
.wx-type-badge { font-family: ui-monospace, monospace; font-size: 9px; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.wx-now-bar { background: rgba(255,255,255,0.9); border-radius: 0.5rem; padding: 0.5rem; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; box-shadow: 0 1px 1px rgba(0,0,0,0.05); border: 1px solid transparent; }
.wx-now-badge { font-size: 9px; font-weight: 900; padding: 0.125rem 0.375rem; border-radius: 0.25rem; letter-spacing: 0.05em; white-space: nowrap; }
.wx-window-box { border-radius: 0.5rem; padding: 0.5rem; font-size: 0.75rem; border: 1px solid transparent; }
.wx-window-header { display: flex; justify-content: space-between; align-items: center; font-size: 10px; font-weight: 700; margin-bottom: 0.25rem; }
.wx-window-header span { white-space: nowrap; font-family: ui-monospace, monospace; }
.wx-full-summary { font-size: 11px; color: var(--gray-600); line-height: 1.625; padding-top: 0.375rem; border-top: 1px solid var(--gray-100); }

.wx-work-active { background: rgba(254,243,199,0.9); border: 2px solid var(--amber-500); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.wx-work-active .wx-card-header { color: var(--amber-950); border-bottom-color: rgba(253,230,138,0.6); }
.wx-work-active .wx-now-bar { border-color: rgba(253,230,138,0.6); }
.wx-work-active .wx-window-box { background: rgba(255,251,235,0.9); border-color: rgba(253,230,138,0.7); color: var(--amber-950); }
.wx-work-active .wx-window-header { color: var(--amber-900); }
.wx-work-active .wx-window-sub { color: rgba(120,53,15,0.8); }

.wx-work-inactive { background: rgba(255,251,235,0.5); border: 1px solid rgba(253,230,138,0.7); opacity: 0.75; }
.wx-work-inactive:hover { background: rgba(254,243,199,0.8); opacity: 1; }
.wx-work-inactive .wx-card-header { color: var(--amber-950); border-bottom-color: rgba(253,230,138,0.6); }
.wx-work-inactive .wx-now-bar { border-color: rgba(253,230,138,0.6); }
.wx-work-inactive .wx-window-box { background: rgba(255,251,235,0.9); border-color: rgba(253,230,138,0.7); color: var(--amber-950); }
.wx-work-inactive .wx-window-header { color: var(--amber-900); }
.wx-work-inactive .wx-window-sub { color: rgba(120,53,15,0.8); }

.wx-badge-morning { background: var(--amber-100); color: var(--amber-900); }
.wx-now-morning { background: var(--amber-600); color: white; }

.wx-home-active { background: rgba(224,231,255,0.9); border: 2px solid var(--indigo-500); box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.wx-home-active .wx-card-header { color: var(--indigo-950); border-bottom-color: rgba(199,210,254,0.6); }
.wx-home-active .wx-now-bar { border-color: rgba(199,210,254,0.6); }
.wx-home-active .wx-window-box { background: rgba(238,242,255,0.9); border-color: rgba(199,210,254,0.7); color: var(--indigo-950); }
.wx-home-active .wx-window-header { color: var(--indigo-900); }
.wx-home-active .wx-window-sub { color: rgba(49,46,129,0.8); }

.wx-home-inactive { background: rgba(238,242,255,0.5); border: 1px solid rgba(199,210,254,0.7); opacity: 0.75; }
.wx-home-inactive:hover { background: rgba(224,231,255,0.8); opacity: 1; }
.wx-home-inactive .wx-card-header { color: var(--indigo-950); border-bottom-color: rgba(199,210,254,0.6); }
.wx-home-inactive .wx-now-bar { border-color: rgba(199,210,254,0.6); }
.wx-home-inactive .wx-window-box { background: rgba(238,242,255,0.9); border-color: rgba(199,210,254,0.7); color: var(--indigo-950); }
.wx-home-inactive .wx-window-header { color: var(--indigo-900); }
.wx-home-inactive .wx-window-sub { color: rgba(49,46,129,0.8); }

.wx-badge-evening { background: var(--indigo-100); color: var(--indigo-900); }
.wx-now-evening { background: var(--slate-800); color: white; }

.wx-current-box { text-align: right; line-height: 1.25; width: 100%; }
.wx-temp-row { font-weight: 900; color: var(--gray-900); font-size: 0.875rem; letter-spacing: -0.025em; text-align: right; }
@media (min-width: 640px) { .wx-temp-row { font-size: 1rem; } }
.wx-temp-row span { font-size: 10px; color: var(--gray-500); font-weight: 400; white-space: nowrap; }
.wx-humidity { font-size: 11px; color: var(--blue-800); font-weight: 700; white-space: nowrap; }
.wx-wind-row { font-size: 11px; margin-top: 0.125rem; color: var(--gray-700); text-align: right; }
.wx-wind-str { font-weight: 900; color: var(--gray-900); }
.wx-wind-sub { font-size: 10px; color: var(--gray-500); font-weight: 400; white-space: nowrap; }

.forecast-hl { color: var(--gray-900); font-weight: 700; }
.forecast-sub { font-size: 10px; font-weight: 400; color: var(--gray-500); white-space: nowrap; }

.app-footer { padding: 0.75rem; text-align: center; font-size: 11px; color: var(--gray-400); border-top: 1px solid var(--gray-200); background: white; margin-top: auto; }

@keyframes pulse { 50% { opacity: .5; } }

.version-popup-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8); z-index: 9999; display: none;
    justify-content: center; align-items: center; opacity: 0; transition: opacity 0.2s ease-in-out;
}
.version-popup-overlay.active { display: flex; opacity: 1; }
.popup-content { background-color: transparent; padding: 30px; border-radius: 10px; max-width: 90vw; max-height: 90vh; display: flex; justify-content: center; align-items: center; }
.popup-content img { width: 350px; height: 350px; object-fit: contain; cursor: pointer; }