:root{--ink:#152622;--muted:#65726e;--line:#dce7e1;--accent:#13866c;--accent2:#00b894;--panel:#f8faf9;--dark:#132622}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}
button,input{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #00a88d;outline-offset:3px}
a{color:inherit}.shell{display:flex;flex-direction:column;min-height:100dvh;height:100dvh;overflow:hidden}
.topbar{height:61px;min-height:61px;display:flex;align-items:center;padding:0 26px;gap:19px;background:var(--dark);color:#eef8f3;border-bottom:1px solid #30463f}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-size:20px;font-weight:730;letter-spacing:-.045em}
.brand img{display:block;object-fit:contain}.top-divider{height:22px;width:1px;background:#4d625a}.tool-name{font-size:13px;font-weight:650;color:#d1e5dc}.top-nav{margin-left:auto;display:flex;gap:16px}.top-nav a{font-size:12px;text-decoration:none;color:#c7dbd3}.top-nav a:hover{text-decoration:underline}
.body{display:grid;grid-template-columns:354px minmax(0,1fr);min-height:0;flex:1}
.sidebar{min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--panel);border-right:1px solid var(--line);padding:28px 26px 20px;scrollbar-width:thin}
.eyebrow{font-size:10px;letter-spacing:.12em;color:#15846e;font-weight:800;display:flex;align-items:center;gap:8px}.dot,.live-dot{width:7px;height:7px;border-radius:50%;background:#18ba8d;box-shadow:0 0 0 3px #18ba8d22}
h1{font-weight:710;line-height:1.12;letter-spacing:-.045em;font-size:31px;margin:13px 0 10px}
.intro{font-size:13px;line-height:1.6;color:#61746b;margin:0 0 23px}
.metric{border-radius:15px;background:#153b33;color:white;padding:19px 18px 18px;box-shadow:0 8px 24px #0c42291a}
.metric-top{display:flex;align-items:center;gap:8px;justify-content:space-between}.metric-top>span:first-child{letter-spacing:.075em;font-size:9px;font-weight:740;color:#a3d7c9}
.small-pill{font-size:10px;font-weight:690;color:#b9efe2;border:1px solid #49836e;border-radius:100px;padding:3px 7px;white-space:nowrap}.small-pill.ready{background:#0e694f;border-color:#2f9977}.small-pill.error{color:#ffcfbc;border-color:#a96f61}
.metric-number{font-size:clamp(39px,4vw,51px);font-weight:770;letter-spacing:-.055em;line-height:1.08;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;margin-top:14px}
.metric-hint{color:#c7dfd7;font-size:11px;line-height:1.5;margin-top:9px;min-height:16px}
.settings,.locations{padding:22px 0 18px;border-bottom:1px solid var(--line)}
.setting-title{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:13px;font-weight:730}
.setting-title small{font-size:10px;font-weight:500;color:var(--muted)}.setting-title strong{font-size:16px;font-variant-numeric:tabular-nums;color:#166b55}
input[type=range]{width:100%;height:26px;margin:12px 0 0;accent-color:#168e6e;cursor:ew-resize}.range-hints{display:flex;justify-content:space-between;margin-top:-2px;font-size:10px;color:#8b9991}
.quick-radii{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:15px}
.quick-radii button,.city-buttons button{border:1px solid #d5dfd9;background:#fff;border-radius:7px;color:#40594e;font-size:11px;min-height:34px;padding:7px 3px;font-weight:600}
.quick-radii button:hover,.city-buttons button:hover{background:#e5f6ee}.quick-radii button.active{border-color:#118168;background:#e0f6eb;color:#11664d}
.city-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:13px}
.center-details{display:flex;justify-content:space-between;gap:10px;padding:20px 0;border-bottom:1px solid var(--line)}
.center-details div{display:flex;flex-direction:column;gap:4px}.center-details div:last-child{text-align:right}
.center-details span{font-size:10px;color:#7a9186}.center-details strong{font-size:12px;font-variant-numeric:tabular-nums}
.lock-button{width:100%;background:#fff;border:1px solid #c2d7ca;border-radius:9px;margin-top:16px;min-height:40px;color:#126d55;font-size:12px;font-weight:680}
.lock-button[aria-pressed=true]{background:#e0f6ea;border-color:#168768}
.method{padding:28px 0 8px}.method h2{font-size:13px;margin:0 0 9px}
.method p{font-size:11px;line-height:1.6;color:#65776d;margin:0 0 11px}.method a{font-size:11px;font-weight:670;color:#137458}
.sidebar-footer{padding-top:19px;border-top:1px solid var(--line);font-size:11px;color:#81948a}.sidebar-footer a{color:#11694f}
.map-panel{position:relative;overflow:hidden;min-width:0;background:#d5dfdb;isolation:isolate}
#map{position:absolute;inset:0;z-index:1;background:#dce8e4;cursor:crosshair}
#map .leaflet-container{cursor:crosshair}#map.leaflet-grab{cursor:crosshair}
.map-top{position:absolute;z-index:450;top:19px;left:20px;border:1px solid #e1e9e7;background:#ffffffef;backdrop-filter:blur(8px);border-radius:8px;padding:10px 13px;display:flex;gap:9px;align-items:center;color:#53685f;box-shadow:0 2px 10px #243c3510;font-size:10px}
.map-top strong{letter-spacing:.08em;color:#163c32;font-size:10px}.map-sep{color:#c2cfc6}
.map-instruction{position:absolute;z-index:440;top:19px;right:20px;padding:10px 13px;border:1px solid #dfeae4;border-radius:8px;background:#ffffffea;font-size:11px;color:#4c6559;max-width:240px;text-align:center}
.circle-caption{position:absolute;z-index:460;pointer-events:none;min-width:180px;max-width:240px;display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 18px 13px;border-radius:10px;background:#163d33f4;color:#fff;box-shadow:0 5px 25px #143d3540;text-align:center;white-space:nowrap;transform:translate(-50%,0);left:50%;top:50%}
.circle-caption:before{content:"";position:absolute;border:7px solid transparent;border-bottom-color:#163d33f4;top:-13px;left:calc(50% - 7px)}
.caption-kicker{font-size:9px;font-weight:760;letter-spacing:.09em;color:#a8e5cf}
.circle-caption strong{font-size:27px;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.035em}.circle-caption>span:last-child{font-size:10px;color:#b6d7c9}
.map-bottom{pointer-events:none;position:absolute;z-index:445;bottom:11px;left:16px;right:18px;display:flex;align-items:center;gap:12px;justify-content:space-between;font-size:10px;color:#34554b}
.map-bottom span{background:#ffffffea;border-radius:5px;padding:6px 9px}.map-bottom a{pointer-events:auto;text-decoration:none}
.leaflet-control-attribution{display:none!important}.leaflet-control-zoom{border:1px solid #b4c5b9!important;box-shadow:none!important;border-radius:9px!important;overflow:hidden;transform:translateY(46px)}
.leaflet-control-zoom a{color:#2c6252!important}
.leaflet-overlay-pane svg{pointer-events:none}
.mobile-metric{display:none}
@media(max-width:900px){.body{grid-template-columns:305px minmax(0,1fr)}.sidebar{padding:24px 19px}.map-instruction{max-width:180px;font-size:10px}.map-top{top:14px;left:14px}}
@media(max-width:660px){
 .shell{height:100dvh}.topbar{min-height:54px;height:54px;padding:0 14px;gap:11px}.brand{font-size:17px}.tool-name{font-size:11px}.top-nav a{font-size:11px}
 .body{display:flex;flex-direction:column-reverse}.map-panel{height:57dvh;min-height:260px;flex-shrink:0}.sidebar{flex:1;min-height:0;overflow-y:auto;border-right:0;border-top:1px solid var(--line);padding:17px 20px}
 .sidebar h1{font-size:23px;margin:9px 0 5px}.intro{margin-bottom:14px}.metric{padding:12px 14px}.metric-number{font-size:36px;margin-top:8px}
 .settings,.locations{padding:16px 0}.method{padding:20px 0 4px}
 .map-top{left:10px;top:8px;padding:7px 9px}.map-instruction{right:10px;top:8px;font-size:9px;max-width:145px;padding:6px 8px}
 .map-bottom{bottom:5px;left:5px;right:5px}.map-bottom span{font-size:9px}.circle-caption{padding:7px 11px;min-width:142px}.circle-caption strong{font-size:22px}
 .leaflet-control-zoom{transform:translateY(37px)}.mobile-metric{display:none}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Exact custom radius entry, with the existing slider and quick presets intact. */
.custom-radius{margin-top:18px}
.custom-radius-heading{display:flex;align-items:baseline;justify-content:space-between;gap:9px;margin-bottom:8px}
.custom-radius-heading label{font-size:12px;font-weight:700;color:#314b40}
.custom-radius-heading span{font-size:10px;color:#71897e;white-space:nowrap}
.custom-radius-controls{display:flex;gap:8px}
.custom-radius-input{position:relative;flex:1;min-width:0}
.custom-radius-input input{width:100%;height:41px;border:1px solid #c5d8cc;border-radius:8px;background:#fff;color:#193f31;padding:8px 38px 8px 12px;font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
.custom-radius-input input[aria-invalid="true"]{border-color:#bb433b;background:#fff7f5}
.custom-radius-input span{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:650;color:#6b8175;pointer-events:none}
.custom-radius-controls button{flex:0 0 auto;min-height:41px;border:1px solid #14775c;border-radius:8px;background:#14775c;color:white;padding:0 12px;font-size:11px;font-weight:700}
.custom-radius-controls button:hover{background:#0e624c}
.radius-error{font-size:11px;line-height:1.5;color:#aa3229;margin:6px 0 0}
.radius-error:empty{display:none}

/* Polygon draw mode. Radius controls are retired. */
.drawing-controls{padding:22px 0 20px;border-bottom:1px solid var(--line)}
.drawing-controls h2,.explore h2{font-size:13px;line-height:1.4;margin:0 0 8px;font-weight:750}
.drawing-controls>p{font-size:12px;line-height:1.55;color:#61766b;margin:0 0 14px;min-height:31px}
.primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.primary-actions button{border-radius:8px;padding:10px 8px;min-height:42px;font-size:11px;font-weight:750;border:1px solid #cbded2;background:#fff;color:#345e4e}
.primary-actions button.primary{grid-column:span 2;background:#13866c;border-color:#13866c;color:#fff;font-size:12px}
.primary-actions button.primary:hover:not(:disabled){background:#0d6954}
.primary-actions button:hover:not(:disabled){background:#e7f4ed}
.primary-actions button:disabled{opacity:.45;cursor:not-allowed}
.shape-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding-top:18px}
.shape-meta>div{min-width:0;display:flex;flex-direction:column;gap:7px}
.shape-meta span{font-size:9px;color:#768b7d;line-height:1.3}
.shape-meta strong{font-size:13px;line-height:1.3;color:#193f33;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.progress-track{margin-top:20px}
.progress-track[hidden],.result-overlay[hidden]{display:none}
.progress-bar{height:8px;background:#d7e7de;border-radius:20px;overflow:hidden}
.progress-bar span{display:block;height:100%;width:0;background:#0d9c75;transition:width .22s linear}
.progress-track p{font-size:11px;color:#657b6f;line-height:1.5;margin:7px 0 0}
.result-overlay{position:absolute;z-index:490;left:50%;bottom:60px;transform:translateX(-50%);background:#133a30ef;color:white;box-shadow:0 12px 40px #122f2a40;border:1px solid #4d7968;border-radius:13px;min-width:250px;max-width:calc(100% - 48px);padding:15px 22px 16px;text-align:center;pointer-events:none;display:flex;flex-direction:column;gap:5px;align-items:center}
.result-overlay>span{font-size:9px;color:#abe9d2;letter-spacing:.09em;font-weight:780}
.result-overlay strong{font-size:30px;line-height:1.1;font-weight:770;letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.result-overlay small{font-size:10px;line-height:1.4;color:#c5e4d5}
.map-instruction{max-width:340px}
#map.leaflet-container,#map .leaflet-interactive{cursor:crosshair}
@media(max-width:930px){.map-instruction{max-width:215px}}
@media(max-width:660px){
 .drawing-controls{padding:16px 0}
 .shape-meta{gap:7px}.shape-meta strong{font-size:12px}
  .map-instruction{max-width:175px;font-size:9px}
 .result-overlay{bottom:49px;min-width:200px;padding:10px 16px}
 .result-overlay strong{font-size:24px}
}


/* Freehand boundary drawing and immediate clearing. */
#map.freehand-mode{cursor:crosshair!important;touch-action:none!important}
#map.freehand-mode .leaflet-pane{cursor:crosshair!important}
#map.freehand-mode .leaflet-control{touch-action:auto}
#map:not(.freehand-mode){cursor:grab!important}
#map .leaflet-overlay-pane svg path{stroke-linecap:round;stroke-linejoin:round}
.mode-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:12px}
.mode-actions button{min-height:43px;border:1px solid #c6dacf;border-radius:9px;background:#fff;color:#2f5d4c;font-size:12px;font-weight:750}
.mode-actions button.mode-active{border-color:#128667;background:#daf6e9;color:#115f49;box-shadow:inset 0 0 0 1px #128667}
.mode-actions button:hover:not(.mode-active){background:#edf8f1}
.clear-sidebar{width:100%;min-height:40px;margin-top:11px;border:1px solid #cc9d98;border-radius:9px;background:#fff8f7;color:#9a342c;font-size:12px;font-weight:750}
.clear-sidebar:hover{background:#ffe8e5;border-color:#b55a50}
.map-instruction{top:15px;right:16px;max-width:300px;pointer-events:none;z-index:445}
@media(max-width:900px){@media(max-width:660px){
    .map-instruction{top:10px;right:8px;max-width:190px;font-size:9px}
  .mode-actions button{min-height:40px}
}