@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');

:root { --ink:#15332d; --pine:#12342e; --mint:#b9eab4; --acid:#d8ff67; --paper:#f7f5ef; --clay:#e9794e; --muted:#6e7b74; --border:#dce1da; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--paper); font-family:'DM Sans',system-ui,sans-serif; }
.topbar { position:fixed; z-index:1000; top:0; left:0; right:0; height:70px; display:flex; align-items:center; gap:26px; padding:0 26px; background:rgba(247,245,239,.96); border-bottom:1px solid rgba(21,51,45,.12); backdrop-filter:blur(12px); }
.brand { display:flex; align-items:center; gap:9px; color:var(--ink); text-decoration:none; font-weight:700; letter-spacing:-.06em; font-size:22px; }.brand > span:last-child span { color:#78953c; }.brand-mark { display:grid; place-items:center; width:31px; height:31px; border-radius:10px 10px 10px 2px; background:var(--acid); font-family:Fraunces,serif; font-size:20px; }
.tagline { margin:0; color:#647068; font-size:14px; }.locate { margin-left:auto; border:1px solid var(--border); border-radius:999px; background:white; color:var(--ink); padding:9px 14px; font:500 13px 'DM Sans'; cursor:pointer; }.locate:hover { border-color:var(--pine); }
main { display:grid; grid-template-columns:410px 1fr; height:100vh; padding-top:70px; }.panel { position:relative; z-index:5; overflow:auto; padding:38px 32px 24px; background:var(--paper); }.eyebrow { display:flex; align-items:center; gap:8px; color:#69823d; font:500 11px 'DM Mono',monospace; letter-spacing:.08em; text-transform:uppercase; }.eyebrow span { width:8px; height:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 4px rgba(216,255,103,.35); }
h1 { max-width:290px; margin:15px 0 10px; font:700 47px/.98 Fraunces,serif; letter-spacing:-.055em; } h1 em { color:#6d9236; font-style:italic; }.intro { max-width:315px; margin:0 0 23px; color:#637168; font-size:15px; line-height:1.5; }
.search { display:flex; align-items:center; height:47px; padding:0 14px; gap:10px; background:white; border:1px solid var(--border); border-radius:12px; }.search span { font-size:23px; color:#637168; transform:rotate(-18deg); }.search input { width:100%; border:0; outline:0; font:14px 'DM Sans'; background:transparent; color:var(--ink); }.route-planner { display:grid; gap:8px; margin-top:21px; padding:14px; border:1px solid var(--border); border-radius:15px; background:#fff; }.route-planner-heading { color:#69823d; font:500 10px 'DM Mono'; letter-spacing:.09em; text-transform:uppercase; }.route-field { display:grid; grid-template-columns:43px 1fr; align-items:center; min-height:43px; padding:0 11px; border:1px solid var(--border); border-radius:9px; background:#fff; }.route-field > span { color:#587a4b; font:600 11px 'DM Mono'; text-transform:uppercase; }.route-field input { min-width:0; width:100%; border:0; outline:0; color:var(--ink); background:transparent; font:13px 'DM Sans'; }.route-field:focus-within { border-color:#79b878; outline:2px solid rgba(121,184,120,.24); }.route-results { margin:0; }.route-filter { display:flex; align-items:center; gap:7px; margin-top:2px; color:#526159; font:500 12px 'DM Sans'; cursor:pointer; }.route-filter input { accent-color:var(--pine); }.find-route { border:0; border-radius:9px; padding:11px 12px; color:var(--pine); background:var(--acid); font:700 13px 'DM Sans'; cursor:pointer; }.find-route:hover { background:#c8ed59; }.route-planner-status { min-height:16px; margin:0; color:#65726a; font-size:11px; line-height:1.35; }.results:empty { display:none; }.results { margin-top:8px; padding:4px; background:#fff; border:1px solid var(--border); border-radius:12px; max-height:190px; overflow:auto; }.result { display:block; width:100%; padding:9px 10px; text-align:left; border:0; background:transparent; color:var(--ink); border-radius:8px; font:14px 'DM Sans'; cursor:pointer; }.result:hover { background:#eef5e7; }
.guide { margin-top:29px; border-radius:18px; overflow:hidden; background:var(--pine); color:white; }.guide-kicker { padding:14px 18px 0; color:var(--acid); font:500 10px 'DM Mono'; letter-spacing:.09em; text-transform:uppercase; }.kilo-tip { display:flex; align-items:flex-end; min-height:130px; padding:0 14px 12px; }.kilo-tip img { align-self:flex-end; width:124px; height:124px; margin:-2px -8px -13px -14px; object-fit:contain; }.kilo-tip p { position:relative; margin:0 0 7px; font-size:13px; line-height:1.45; }.kilo-tip strong { color:var(--acid); }
.selection { margin-top:22px; }.selection.is-hidden { display:none; }.selection h2 { margin:16px 0 5px; font:700 28px/1.06 Fraunces,serif; letter-spacing:-.04em; }.selection .sub { margin:0 0 12px; color:var(--muted); font-size:13px; }.route-progress { border:1px solid var(--border); border-radius:12px; background:#fff; overflow:hidden; }.route-progress .guide-kicker { padding:10px 12px 4px; color:#69823d; }.route-steps { display:flex; gap:5px; overflow:auto; padding:4px 9px 10px; }.route-step { display:flex; flex:none; align-items:center; gap:5px; max-width:150px; padding:5px 8px 5px 5px; border:0; border-radius:999px; background:#edf3e9; color:#4d694a; cursor:pointer; font:500 11px 'DM Sans'; white-space:nowrap; overflow:hidden; }.route-step::after { content:'›'; margin-left:2px; color:#7d9677; }.route-step:last-child::after { display:none; }.route-step > span:first-child { display:grid; place-items:center; flex:none; width:17px; height:17px; border-radius:50%; background:#b9eab4; color:#17342e; font:500 10px 'DM Mono'; }.route-step span:last-child { overflow:hidden; text-overflow:ellipsis; }.route-step.current { background:var(--pine); color:#fff; }.route-step.current > span:first-child { background:var(--acid); }.back-step { margin:0 0 16px; padding:0; border:0; background:transparent; color:#527c45; font:600 12px 'DM Sans'; cursor:pointer; }.back-step:hover { color:var(--pine); text-decoration:underline; }.next-heading { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:7px; margin:0 0 8px; }.next-heading > span { width:8px; height:8px; border-radius:50%; background:var(--acid); box-shadow:0 0 0 4px rgba(216,255,103,.35); }.next-heading strong { font-size:13px; }.next-heading small { grid-column:2; margin-top:2px; color:#79847e; font-size:10px; }.connection-list { display:grid; gap:8px; }.connection { width:100%; border:1px solid var(--border); background:#fff; border-left:4px solid #79b878; border-radius:10px; color:var(--ink); overflow:hidden; transition:border-color .15s, transform .15s; }.connection.bridge { border-left-color:#5c78b5; }.connection.outside { border-left-color:var(--clay); }.connection.transit { border-left-color:#d52f2b; }.connection:hover { border-color:var(--pine); transform:translateX(2px); }.connection-choose { display:block; width:100%; padding:11px 12px 8px; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }.connection-head { display:flex; justify-content:space-between; gap:8px; align-items:start; font-size:14px; font-weight:600; }.connection-badges { display:flex; flex:none; flex-wrap:wrap; justify-content:flex-end; gap:4px; }.badge { flex:none; padding:3px 6px; background:#edf8eb; color:#477644; border-radius:99px; font:500 9px 'DM Mono'; letter-spacing:.03em; text-transform:uppercase; }.connection.bridge .badge { background:#e9effb; color:#506aa2; }.connection.outside .badge { background:#fff0e9; color:#b94f29; }.connection.transit .badge { background:#fff0ef; color:#b52826; }.connection p { margin:6px 0 0; color:#65726a; font-size:12px; line-height:1.35; }.connection-report { margin:0 12px 10px; padding:0; border:0; border-top:1px solid #edf0eb; background:transparent; color:#587a4b; font:600 11px 'DM Sans'; cursor:pointer; }.connection-report:hover { color:var(--pine); text-decoration:underline; }.warning { display:inline-flex; gap:5px; align-items:center; margin:3px 0 8px; color:#a74725; background:#fff0e9; padding:5px 8px; border-radius:7px; font:600 11px 'DM Sans'; }.empty-connections { margin:2px 0; padding:12px; border:1px dashed var(--border); border-radius:10px; color:#6d7871; font-size:13px; }.data-note { margin:24px 0 0; padding-top:17px; border-top:1px solid var(--border); color:#7b857e; font-size:11px; line-height:1.45; }
.map-shell { position:relative; min-width:0; }.map-shell, #map { height:100%; }.map-title, .legend, .reset { position:absolute; z-index:500; background:rgba(255,255,255,.94); box-shadow:0 4px 18px rgba(24,57,44,.10); }.map-title { top:22px; left:22px; padding:10px 12px; border-radius:9px; color:var(--ink); font-weight:600; font-size:13px; }.map-title small { margin-left:5px; color:#879087; font:10px 'DM Mono'; }.live-dot { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#75ad6c; }.legend { right:22px; bottom:23px; display:flex; gap:13px; padding:10px 12px; border-radius:9px; color:#526159; font-size:11px; }.legend span { display:flex; align-items:center; gap:5px; }.line { width:17px; height:3px; display:inline-block; border-radius:3px; background:#4c994e; }.line.transit { background:#d52f2b; }.line.bridge { background:#5c78b5; }.line.outside { background:var(--clay); }.reset { right:22px; top:22px; padding:9px 12px; border:0; border-radius:9px; color:var(--ink); font:500 12px 'DM Sans'; cursor:pointer; }.reset:hover { background:var(--acid); }
.building-pin { position:relative; display:grid; place-items:center; width:18px; height:18px; border:2px solid white; border-radius:5px; background:var(--pine); box-shadow:0 2px 6px rgba(0,0,0,.25); transition:.15s transform,.15s background,.15s box-shadow; }.building-pin:hover, .building-pin.active, .building-pin.available, .building-pin.requested-start, .building-pin.requested-end, .building-pin.requested-both { transform:scale(1.45); z-index:1000; }.building-pin.active { background:var(--clay); }.building-pin.route-stop { background:#78953c; }.building-pin.requested-start, .building-pin.requested-end, .building-pin.requested-both { border-radius:50%; color:#fff; font:700 9px 'DM Mono'; }.building-pin.requested-start { background:#2d7a48; }.building-pin.requested-end { background:#c94035; }.building-pin.requested-both { width:23px; background:#6651a5; font-size:8px; }.building-pin.requested-start::after { content:'A'; }.building-pin.requested-end::after { content:'B'; }.building-pin.requested-both::after { content:'A/B'; }.building-pin.available { border-radius:50%; background:#a9d75b; box-shadow:0 0 0 4px rgba(216,255,103,.38),0 2px 6px rgba(0,0,0,.25); }.building-pin.available::after { content:''; width:5px; height:5px; border-radius:50%; background:var(--pine); }.building-pin.available.preview { transform:scale(1.8); background:var(--acid); box-shadow:0 0 0 7px rgba(216,255,103,.34),0 3px 8px rgba(0,0,0,.25); }
.issue-dialog { width:min(460px,calc(100vw - 32px)); border:0; border-radius:18px; padding:0; color:var(--ink); background:var(--paper); box-shadow:0 24px 70px rgba(18,52,46,.28); }.issue-dialog::backdrop { background:rgba(18,52,46,.42); backdrop-filter:blur(2px); }.issue-dialog form { padding:25px; }.issue-dialog-head { display:flex; justify-content:space-between; gap:18px; align-items:start; }.issue-dialog .guide-kicker { padding:0; color:#69823d; }.issue-dialog h2 { margin:5px 0 0; font:700 30px/1 Fraunces,serif; letter-spacing:-.04em; }.issue-close { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--border); border-radius:50%; background:#fff; color:var(--ink); font:400 24px/1 sans-serif; cursor:pointer; }.issue-connection { margin:18px 0; padding:10px 12px; border-radius:9px; background:#e9f3e4; color:#486a43; font:600 12px 'DM Sans'; }.issue-dialog label { display:block; margin:15px 0 6px; font:600 13px 'DM Sans'; }.issue-dialog select, .issue-dialog textarea { width:100%; border:1px solid var(--border); border-radius:9px; padding:10px; color:var(--ink); background:#fff; font:14px 'DM Sans'; }.issue-dialog textarea { resize:vertical; line-height:1.45; }.issue-dialog select:focus, .issue-dialog textarea:focus { outline:2px solid rgba(121,184,120,.42); border-color:#79b878; }.issue-note { margin:10px 0 0; color:#758078; font-size:11px; line-height:1.4; }.issue-status { min-height:20px; margin:10px 0 0; color:#477644; font-size:12px; }.issue-submit { width:100%; margin-top:3px; border:0; border-radius:9px; padding:12px; color:var(--pine); background:var(--acid); font:700 13px 'DM Sans'; cursor:pointer; }.issue-submit:disabled { opacity:.6; cursor:wait; }
.report-toast { position:fixed; z-index:2000; top:86px; left:50%; display:flex; align-items:center; gap:10px; width:min(390px,calc(100vw - 32px)); padding:12px 15px; border:1px solid rgba(21,51,45,.13); border-radius:13px; color:#fff; background:var(--pine); box-shadow:0 12px 30px rgba(18,52,46,.24); opacity:0; transform:translate(-50%,-14px); transition:opacity .18s ease,transform .18s ease; }.report-toast.is-visible { opacity:1; transform:translate(-50%,0); }.report-toast > span { display:grid; place-items:center; width:34px; height:34px; flex:none; border-radius:50%; background:var(--acid); font-size:18px; }.report-toast p { margin:0; font-size:12px; line-height:1.35; }.report-toast strong { color:var(--acid); font-size:13px; }.route-note { margin:0 0 13px; padding:9px 10px; border-radius:9px; color:#526159; background:#edf3e9; font-size:12px; line-height:1.4; }
.connection.street-transfer { border-left-color:#69726d; }.connection.street-transfer .badge { background:#edf0ed; color:#526159; }
.connection.transit-transfer { border-left-color:#cf8f2c; background:#fffaf1; }.connection.transit-transfer .badge { background:#fff0cf; color:#8b5a13; }
@media (max-width:800px) { .topbar { height:58px; padding:0 16px; }.tagline { display:none; } main { display:flex; flex-direction:column-reverse; height:auto; min-height:100vh; padding-top:58px; }.map-shell { height:53vh; flex:none; }.panel { padding:25px 20px; overflow:visible; }.locate { font-size:0; width:38px; height:38px; padding:0; }.locate:first-letter { font-size:15px; } h1 { font-size:38px; }.map-title { top:12px; left:12px; }.reset { top:12px; right:12px; }.legend { left:12px; right:auto; bottom:12px; gap:9px; }.legend span { font-size:10px; } }
@media (prefers-reduced-motion: reduce) { .report-toast { transition:none; } }