:root{--ink:#182322;--muted:#70807c;--cream:#f6f7f2;--mint:#dcefe4;--green:#26735b;--lime:#c9f06b;--orange:#f29359;--line:#dce5df}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif}.topbar{height:78px;background:#fff;display:flex;align-items:center;padding:0 5.5%;border-bottom:1px solid #edf0eb}.brand{font:700 22px 'Space Grotesk';letter-spacing:-1px;color:var(--ink);text-decoration:none;display:flex;gap:9px;align-items:center}.brand span span{color:var(--green)}.brand-mark{background:var(--lime);height:29px;width:29px;border-radius:9px;display:grid;place-items:center;color:var(--green);font-size:22px}.topbar nav{display:flex;gap:32px;margin:auto;font-size:14px}.topbar nav a{color:var(--muted);text-decoration:none}.topbar nav .active{color:var(--ink);font-weight:700}.profile-btn{border:0;background:#e8f1eb;color:var(--green);font-weight:700;border-radius:50%;width:35px;height:35px}.hero{max-width:1250px;margin:0 auto;padding:70px 42px 45px;display:flex;justify-content:space-between;align-items:end}.eyebrow{color:var(--green);font-size:11px;letter-spacing:1.7px;font-weight:700;margin:0 0 17px}.hero h1,h2{font:700 54px/1.04 'Space Grotesk';letter-spacing:-2.5px;margin:0}.hero h1 em,h2 em{font-style:normal;color:var(--green)}.hero-copy{color:var(--muted);font-size:16px;margin:22px 0 0;max-width:450px;line-height:1.6}.status-pill{background:#fff;padding:12px 17px;border-radius:30px;color:var(--green);font-size:12px;font-weight:600;box-shadow:0 5px 20px #223b2410}.pulse{display:inline-block;background:#43b67e;width:8px;height:8px;border-radius:50%;margin-right:8px}.workspace{max-width:1250px;margin:0 auto;display:grid;grid-template-columns:330px 1fr;gap:18px;padding:0 42px}.sidebar{display:flex;flex-direction:column;gap:14px}.route-card,.filter-card{background:#fff;border:1px solid var(--line);border-radius:17px;padding:21px}.card-label,.card-heading{font-size:11px;font-weight:700;letter-spacing:1.2px;color:var(--muted)}.location-row{display:flex;gap:12px;align-items:center;margin:17px 0 8px}.location-row small{display:block;color:#9ca9a4;font-size:9px;letter-spacing:1px;margin-bottom:3px}.location-row strong{font-size:13px}.pin{font-size:12px}.pin.start{color:#5eb78b}.pin.end{color:#ee8f5a}.route-line{height:18px;border-left:1px dashed #b5c6bc;margin:-6px 0 -3px 5px}.route-btn,.submit-report{width:100%;border:0;border-radius:10px;background:var(--green);color:#fff;padding:13px;font-weight:700;margin-top:16px;cursor:pointer}.route-btn span,.submit-report span{float:right;font-size:18px;line-height:12px}.filter-card{padding-bottom:12px}.card-heading{display:flex;justify-content:space-between;color:var(--ink);font-size:13px;letter-spacing:0}.count{background:#edf5ee;color:var(--green);padding:3px 8px;border-radius:12px;font-size:11px}.search{display:flex;align-items:center;gap:8px;background:#f5f7f4;padding:9px 11px;border-radius:9px;margin:16px 0 11px;color:var(--muted)}.search input{border:0;background:transparent;outline:0;width:100%;font:12px 'DM Sans'}.filter{border:0;background:transparent;display:flex;align-items:center;width:100%;padding:9px 0;color:#6f7c77;font:500 12px 'DM Sans';text-align:left;cursor:pointer;border-radius:7px}.filter b{margin-left:auto;font-size:11px;font-weight:500;color:#a6b1ac}.filter.active{color:var(--ink);font-weight:700}.filter-icon{width:25px;height:25px;border-radius:7px;display:grid;place-items:center;margin-right:9px;font-weight:700;font-size:16px}.filter-icon.all{background:#e4f4e9;color:#398566}.filter-icon.pothole{background:#fff0e5;color:#ed945c}.filter-icon.flood{background:#e4f1f8;color:#609bc2}.filter-icon.construction{background:#f6f0de;color:#b89c52}.filter-icon.obstacle{background:#f9e7e7;color:#cf6666}.report-btn{border:0;background:var(--lime);color:#274431;padding:15px;border-radius:11px;font-weight:700;cursor:pointer}.report-btn span{font-size:20px;vertical-align:-2px;margin-right:5px}.safe-note{text-align:center;color:#93a09a;font-size:10px;line-height:1.5;margin:0}.map-panel{background:#fff;border:1px solid var(--line);border-radius:17px;overflow:hidden;min-height:535px}.map-toolbar{height:56px;display:flex;align-items:center;padding:0 18px;gap:6px;border-bottom:1px solid #e5ebe5}.map-tool,.locate{border:0;background:transparent;color:#8b9892;padding:8px 12px;border-radius:7px;font:600 11px 'DM Sans';cursor:pointer}.map-tool.selected{background:#edf5ee;color:var(--green)}.map-toolbar>span{flex:1}.locate{color:var(--green)}.map-canvas{height:479px;background:#dbe9d6;position:relative;overflow:hidden;background-image:radial-gradient(#c4d8bf 1px,transparent 1px);background-size:17px 17px}.road{position:absolute;background:#f7f7f1;box-shadow:0 0 0 2px #d6e1d1}.road-main{width:125%;height:54px;top:48%;left:-8%;transform:rotate(-12deg)}.road-cross{width:125%;height:37px;top:58%;left:-10%;transform:rotate(30deg)}.road-diag{width:120%;height:43px;top:26%;left:-5%;transform:rotate(11deg)}.road-small{height:18px;width:55%;position:absolute;background:#f7f7f1;box-shadow:0 0 0 2px #d6e1d1}.road-small.one{top:20%;left:-4%;transform:rotate(55deg)}.road-small.two{top:76%;left:36%;transform:rotate(-25deg)}.road-small.three{top:9%;right:-2%;transform:rotate(-35deg)}.map-label{position:absolute;color:#7b9b7e;font-size:10px;z-index:1;letter-spacing:.5px}.label-top{top:14%;left:44%}.label-left{top:60%;left:8%;transform:rotate(30deg)}.label-right{top:37%;right:7%}.park{position:absolute;left:10%;bottom:15%;width:110px;height:75px;border-radius:45% 55% 50% 40%;background:#b9d9b5;display:grid;place-content:center;text-align:center;color:#598a5d}.park span{font-size:22px}.park small{font-size:9px}.map-hazards{position:absolute;inset:0;z-index:3}.hazard-marker{position:absolute;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:4px solid #fff;box-shadow:0 3px 10px #263b2630;color:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:transform .2s}.hazard-marker:hover{transform:scale(1.2)}.hazard-marker.pothole{background:#ee9560}.hazard-marker.flood{background:#65a4ca}.hazard-marker.construction{background:#b49c56}.hazard-marker.obstacle{background:#d16b6b}.hazard-tip{position:absolute;transform:translate(-35%,35px);background:#fff;padding:8px 11px;border-radius:8px;font-size:10px;box-shadow:0 4px 15px #263b2630;white-space:nowrap;display:none}.hazard-marker:hover .hazard-tip{display:block}.you-are-here{position:absolute;top:47%;left:52%;z-index:4;text-align:center;color:var(--green);font-size:10px}.you-are-here span{display:block;width:15px;height:15px;border:4px solid #fff;background:#2e9b6e;border-radius:50%;box-shadow:0 0 0 5px #2e9b6e40}.you-are-here small{background:#fff;padding:2px 5px;border-radius:4px}.map-legend{position:absolute;bottom:15px;left:17px;background:#fff;padding:9px 12px;border-radius:7px;display:flex;gap:13px;font-size:9px;color:#77857d;box-shadow:0 3px 10px #263b2620}.legend-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}.danger{background:#ee9560}.watch{background:#b49c56}.clear{background:#55aa78}.map-zoom{position:absolute;right:16px;bottom:15px;display:grid;background:#fff;border-radius:7px;overflow:hidden;box-shadow:0 3px 10px #263b2620}.map-zoom button{border:0;background:#fff;color:#668076;width:30px;height:28px;cursor:pointer}.map-zoom button+button{border-top:1px solid #e7ece7}.insight-row{max-width:1250px;margin:20px auto 80px;padding:0 42px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.insight{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px;display:flex;align-items:center;gap:12px}.insight-icon{width:31px;height:31px;display:grid;place-items:center;border-radius:9px;font-weight:700}.green{background:#e3f4e9;color:#3b9a70}.orange{background:#fff0e7;color:#ed955b}.blue{background:#e8f2fa;color:#619dc3}.insight strong{font-size:12px}.insight p{font-size:10px;color:var(--muted);margin:5px 0 0}.text-btn{border:0;background:transparent;color:var(--green);font:700 10px 'DM Sans';margin-left:auto;white-space:nowrap}.how{background:#e8f2e7;padding:80px max(42px,calc((100% - 1166px)/2));text-align:center}.how h2{font-size:43px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;text-align:left;margin-top:55px}.steps b{color:#72a07d;font-size:12px}.steps h3{font:700 19px 'Space Grotesk';margin:12px 0 8px}.steps p{font-size:13px;line-height:1.6;color:#6d8274;max-width:230px}.dialog-copy{font-size:13px;color:var(--muted);line-height:1.5}dialog{border:0;border-radius:18px;padding:0;box-shadow:0 20px 70px #18342540;max-width:470px;width:calc(100% - 30px)}dialog::backdrop{background:#18342570}.dialog-copy,.hazard-options,.field-label,.submit-report,.report-form h2,.report-form .eyebrow{margin-left:29px;margin-right:29px}#reportForm{padding:30px 0}.close{position:absolute;right:18px;top:14px;border:0;background:transparent;font-size:25px;color:var(--muted);cursor:pointer}.report-form h2{font-size:30px}.hazard-options{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:22px}.hazard-options input{position:absolute;opacity:0}.hazard-options label span{display:grid;place-items:center;gap:6px;padding:12px 4px;border:1px solid var(--line);border-radius:9px;color:var(--green);font-size:20px;cursor:pointer}.hazard-options label input:checked+span{border-color:var(--green);background:#eff8f0}.hazard-options small{font-size:10px;color:var(--ink)}.field-label{display:block;font-size:11px;font-weight:700;margin-top:19px}.field-label textarea{display:block;width:100%;min-height:75px;border:1px solid var(--line);border-radius:8px;margin-top:8px;padding:10px;font:12px 'DM Sans';resize:vertical}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;background:#183a2d;color:#fff;padding:13px 18px;border-radius:9px;font-size:12px;transition:.25s;pointer-events:none}.toast.show{transform:translate(-50%,0);opacity:1}@media(max-width:850px){.hero{padding:45px 20px 30px;display:block}.hero h1{font-size:43px}.status-pill{display:inline-block;margin-top:28px}.workspace{grid-template-columns:1fr;padding:0 20px}.sidebar{order:2}.map-panel{order:1}.insight-row{grid-template-columns:1fr;padding:0 20px;margin-bottom:50px}.steps{grid-template-columns:1fr;gap:15px}.topbar{padding:0 20px}.topbar nav{display:none}.map-panel{min-height:440px}.map-canvas{height:384px}.insight-row{display:none}}
/* TomTom traffic controls and selectable traffic-aware alternatives. */
.traffic-toggle{border:1px solid var(--line);background:#fff;color:var(--green);padding:8px 11px;border-radius:7px;font:600 11px 'DM Sans';cursor:pointer;white-space:nowrap}.traffic-toggle[aria-pressed="true"]{background:#e8f3eb;border-color:#93bba4}.traffic-options{display:grid;gap:7px;margin-top:10px}.traffic-option{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 12px;text-align:left;color:var(--ink);font:500 12px 'DM Sans';cursor:pointer}.traffic-option[aria-pressed="true"]{border-color:var(--green);background:#f0f8f2}.traffic-option small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.traffic-option strong{color:var(--green);white-space:nowrap}.traffic-option:disabled{opacity:.55;cursor:wait}