:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#193c35;background:#f8faf7;font-size:15px}*{box-sizing:border-box}body{margin:0;display:grid;grid-template-columns:340px 1fr;height:100dvh}aside{padding:32px 28px;overflow:auto;border-right:1px solid #dce5db}header{margin-bottom:30px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:750;color:#6b8177}h1{font-size:32px;letter-spacing:-1.5px;margin:8px 0}h1 span{color:#e0884b}header p,.hint,footer{color:#697b71;font-size:12px;line-height:1.6}header p{font-size:14px;margin:0}label{display:block;font-size:12px;font-weight:650;margin:0 0 17px}input,select{display:block;width:100%;font:inherit;font-size:14px;color:#193c35;background:#fff;border:1px solid #cdd9cd;border-radius:7px;padding:11px;margin-top:7px;min-height:44px}input:focus,select:focus,button:focus-visible,summary:focus-visible{outline:3px solid #a7ccbb;outline-offset:2px}details{border-top:1px solid #dce5db;margin:22px 0;padding-top:17px}summary{cursor:pointer;font-size:12px;font-weight:650}.hours{display:grid;grid-template-columns:1fr 1fr;gap:12px}.hours label{margin-bottom:0}button{width:100%;padding:14px 16px;display:flex;justify-content:space-between;background:#234f42;color:#fff;border:0;border-radius:7px;font:inherit;font-weight:650;cursor:pointer}button:hover{background:#173e32}button:disabled{opacity:.5;cursor:wait}#status{font-size:13px;line-height:1.6;padding:20px 0;color:#62776a}#status.error{color:#a23c24}#results{border-top:1px solid #dce5db;padding-top:20px}#summary{font-size:17px;font-weight:650;line-height:1.5}footer{margin-top:28px;border-top:1px solid #dce5db;padding-top:18px}main{position:relative;min-width:0;min-height:0}#map{height:100%;background:#e8eee5}.map-label{position:absolute;top:20px;right:20px;z-index:500;background:#fff;padding:10px 14px;border-radius:7px;box-shadow:0 2px 12px #193c3515;font-size:12px;font-weight:650;pointer-events:none}.map-label span{display:inline-block;width:7px;height:7px;border-radius:100%;background:#438868;margin-right:7px}.leaflet-container{font-family:inherit}.point-popup{line-height:1.7}@media(max-width:700px){body{height:auto;grid-template-columns:1fr}aside{padding:22px;border-right:0}header{margin-bottom:20px}main{height:60dvh;min-height:350px}footer{margin-top:16px}.map-label{top:12px;right:12px}#filters{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}#filters>label:first-child,#availability,details,button{grid-column:1/-1}input{min-width:0}#results{padding-top:12px}}

[hidden] { display: none !important; }
.error { color: #a23c24; }
body.login-page { display: grid; place-items: center; min-height: 100dvh; height: auto; padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: radial-gradient(ellipse at top right, #e1ece2, transparent 65%), #f8faf7; }
.login-card { width: min(100%, 410px); height: auto; min-height: 0; padding: 32px; border: 1px solid #dce5db; border-radius: 18px; background: #fdfefb; box-shadow: 0 12px 60px #193c350b; }
.app-icon { border-radius: 15px; margin-bottom: 24px; }
.login-card header { margin-bottom: 28px; }
.remember { display: flex; align-items: center; gap: 10px; line-height: 1.5; margin-bottom: 0; cursor: pointer; }
.remember input { width: 18px; height: 18px; min-height: 18px; margin: 0; accent-color: #234f42; flex: 0 0 auto; }
.login-card .hint { margin: 10px 0 18px; }
#login-status { min-height: 1.6em; margin-bottom: 0; }
.secondary { display: block; width: auto; padding: 9px 12px; font-size: 12px; font-weight: 600; background: transparent; color: #234f42; border: 1px solid #cdd9cd; }
.secondary:hover { background: #e5eee5; }
.app-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.login-card > .secondary { margin-top: 24px; }
.button-link { display: block; text-decoration: none; color: white; background: #234f42; padding: 14px; border-radius: 7px; text-align: center; font-weight: 650; }
@media (max-width: 700px) { .login-card { padding: 26px 22px; } aside { padding-top: max(22px, env(safe-area-inset-top)); padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); } }

.timeline { position: absolute; z-index: 800; bottom: 28px; left: 20px; right: 20px; max-width: 620px; margin: auto; padding: 16px 18px 10px; border: 1px solid #d3dfd4; border-radius: 12px; background: #fdfefbf7; box-shadow: 0 6px 30px #193c3520; }
.timeline-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.timeline-heading strong { display: block; font-size: 14px; margin-top: 5px; }
.timeline-heading .secondary { flex-shrink: 0; }
.timeline-controls { display: flex; align-items: center; gap: 12px; margin: 10px 0 4px; }
.timeline-controls button { flex: 0 0 36px; min-height: 36px; padding: 6px; font-size: 17px; }
.timeline-controls input { flex: 1; width: 100%; min-width: 0; min-height: 30px; padding: 0; margin: 0; border: 0; background: transparent; accent-color: #267258; }
.timeline-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: #697b71; margin: 0 0 10px; }
.route-key { display: inline-block; height: 3px; width: 14px; background: #267258; vertical-align: middle; margin-right: 4px; }
#timeline-list { height: 144px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; border: 1px solid #dce5db; border-radius: 7px; scrollbar-color: #a0b5a8 #f0f4ed; }
#timeline-list:focus-visible { outline: 3px solid #a7ccbb; outline-offset: 2px; }
#timeline-spacer { position: relative; }
.timeline-row { position: absolute; left: 0; right: 0; height: 64px; padding: 12px 12px 10px 22px; display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; border-bottom: 1px solid #e8eee5; cursor: pointer; }
.timeline-row::before { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #a1b6a8; top: 19px; left: 9px; }
.timeline-row strong { font-size: 12px; font-weight: 600; }
.timeline-row span { font-size: 12px; }
.timeline-row small { grid-column: 1 / -1; font-size: 10px; color: #697b71; }
.timeline-row[aria-selected="true"] { background: #e6f0e7; box-shadow: inset 3px 0 #267258; }
.timeline-row[aria-selected="true"]::before { background: #d7773e; }
.timeline-help { font-size: 10px; color: #697b71; margin: 8px 0 0; }
.point-fields { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(0, 1.3fr); gap: 6px 12px; font-size: 12px; margin-bottom: 0; }
.point-fields dt { color: #697b71; }
.point-fields dd { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
@media (max-width: 700px) { #map-main { height: 90dvh; min-height: 600px; } .timeline { left: 8px; right: 8px; padding: 12px; bottom: max(24px, env(safe-area-inset-bottom)); } .timeline-heading strong { font-size: 12px; } .timeline-meta { font-size: 10px; } #timeline-list { height: 128px; } .timeline-help { line-height: 1.4; } }
@media (max-width: 700px) { #filters { grid-template-columns: minmax(0, 1fr); } #filters > label { min-width: 0; } aside { min-width: 0; } }
.point-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 11px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.point-toggle input { width: 15px; height: 15px; min-height: 15px; padding: 0; margin: 0; accent-color: #267258; }
.route-warning { position: absolute; top: 62px; left: 20px; right: 20px; z-index: 800; max-width: 620px; margin: 0 auto; padding: 10px 12px; border: 1px solid #d8bc77; border-radius: 8px; background: #fff6df; color: #735116; font-size: 12px; line-height: 1.5; }
.vehicle-picker { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; min-width: 0; }
.vehicle-picker legend { padding: 0 0 8px; font-size: 12px; font-weight: 650; }
#vehicle { max-height: 190px; overflow-y: auto; border: 1px solid #cdd9cd; border-radius: 7px; padding: 4px 0; background: #fff; }
.vehicle-option { display: flex; align-items: center; gap: 9px; min-height: 40px; margin: 0; padding: 8px 11px; cursor: pointer; font-size: 12px; }
.vehicle-option:hover { background: #eef4eb; }
.vehicle-option input { margin: 0; padding: 0; width: 16px; height: 16px; min-height: 16px; flex: 0 0 16px; accent-color: var(--vehicle-color); }
.vehicle-option span { border-left: 3px solid var(--vehicle-color); padding-left: 8px; overflow-wrap: anywhere; }
.vehicle-legend { display: flex; gap: 6px; flex-wrap: wrap; max-height: 84px; overflow-y: auto; margin: 0 0 10px; }
.vehicle-route { display: block; width: auto; border: 1px solid #dce5db; border-left: 4px solid var(--vehicle-color); padding: 7px 9px; background: #f5f8f1; color: #193c35; font-size: 11px; font-weight: 500; text-align: left; }
.vehicle-route:hover { background: #e5eee5; }
.vehicle-route[aria-pressed="true"] { border-color: var(--vehicle-color); font-weight: 750; background: #e8f0e5; }
#timeline-vehicle { max-width: 360px; overflow-wrap: anywhere; letter-spacing: 1px; }
.timeline-controls input { accent-color: var(--active-route-color, #267258); }
.timeline-row[aria-selected="true"] { box-shadow: inset 3px 0 var(--active-route-color, #267258); }
.timeline-heading > div { min-width: 0; }
.vehicle-route { max-width: 100%; overflow-wrap: anywhere; }