/* tools */
#panel-tools{padding:12px;gap:8px}
.tc-card{background:var(--navy-mid);border:1px solid var(--divider);border-radius:var(--radius);padding:12px 14px}
.tc-card-hdr{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.tc-card-icon{width:30px;height:30px;background:var(--teal-dim);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--t-xl);color:var(--teal)}
/* Emoji were the only pictograms left in Define, sitting directly beneath a method chooser
   whose six tiles are stroked SVGs — two icon languages a few pixels apart. Each card now
   carries the SAME path as the tile that opens it, so the card reads as that tile's content
   rather than as a separate thing. Emoji also render per-platform, so they were the one
   graphic in the panel the design could not actually specify. */
.tc-card-icon svg{width:16px;height:16px}
.tc-card-title{font-size:var(--t-base);font-weight:600}
.tc-card-desc{font-size:var(--t-sm);color:var(--text-dim);line-height:1.5;margin-bottom:10px}
.lot-result-item{padding:7px 10px;font-size:var(--t-sm);color:var(--text-muted);cursor:pointer;border-radius:var(--r-sm);display:flex;align-items:center;gap:7px}
.lot-result-item:hover{background:rgba(29,158,117,.1);color:var(--text)}
.lot-result-item .lr-icon{font-size:var(--t-sm);color:var(--text-faint);flex-shrink:0}
/* lot search mode tabs */
.lf-tabs{display:flex;gap:4px;background:var(--navy-dark);border-radius:var(--radius);padding:3px;margin-bottom:10px}
.lf-tab{flex:1;text-align:center;padding:6px 4px;font-size:var(--t-xs);font-weight:500;color:var(--text-dim);border-radius:var(--r-sm);cursor:pointer;transition:all .15s}
.lf-tab:hover{color:var(--text-muted)}
.lf-tab.active{background:var(--brand-grad);color:#fff}
.lf-hint{font-size:var(--t-xs);color:var(--text-faint);margin-bottom:8px;line-height:1.4}
#sketch-tools{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
/* Icons, not text glyphs. These four sat directly under the six stroked-SVG method tiles
   still reading "⬡ 〰 ⬜ 📍" — the one place in Define where two icon languages met, and the
   only pictograms left whose shape the design could not specify (a glyph renders per font,
   an emoji per platform). display:flex rather than the old text-align:center, so the icon
   and label align on a baseline instead of the icon riding wherever the font puts it. */
.sm-btn{flex:1 1 60px;min-width:60px;padding:7px 6px;background:var(--navy);border:1px solid var(--divider);border-radius:var(--r-sm);font-size:var(--t-sm);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .15s}
.sm-btn svg{width:13px;height:13px;flex-shrink:0}
.sm-btn.active{background:var(--teal-dim);border-color:var(--teal);color:var(--teal)}
.meas-result{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--navy);border-radius:var(--r-sm);font-size:var(--t-base)}
.meas-val{font-weight:600;color:var(--teal)}
/* floating map address search — a collapsed button matching the Map tools launcher exactly
   (same .mt-launcher class), sitting above it in the same toolbar column; expands in place on
   click into the actual search field. Mirrors the Tools tab "Find lot" address search (same
   runAddressSearch/selectAddressSuggestion/findLotAtPoint logic, see _lotSearchTarget) so
   there's a quick entry point without switching tabs, rather than a separate implementation. */
#map-search-expanded{position:relative;z-index:8;width:260px;background:var(--glass-bg);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid var(--divider);border-radius:var(--r-lg);box-shadow:var(--e2);animation:mapSearchOpen .15s cubic-bezier(.2,.8,.2,1) both}
@keyframes mapSearchOpen{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
.map-search-row{display:flex;align-items:center;gap:7px;padding:0 6px 0 10px;height:34px}
.map-search-ic{font-size:var(--t-base);color:var(--text-faint);flex-shrink:0}
#map-search-input{flex:1;min-width:0;padding:9px 0;background:transparent;border:none;color:var(--text);font-size:var(--t-base);font-family:inherit;outline:none}
#map-search-input::placeholder{color:var(--text-faint)}
.map-search-close{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sm);color:var(--text-faint);font-size:var(--t-sm);cursor:pointer}
.map-search-close:hover{background:var(--teal-dim);color:var(--teal)}
#map-search-results{max-height:220px;overflow-y:auto;border-top:1px solid var(--divider)}
#map-search-results:empty{border-top:none}
#map-search-status{font-size:var(--t-xs);color:var(--text-faint);padding:0 10px 8px}
#map-search-status:empty{display:none}

/* map toolbar */
#map-toolbar{position:absolute;top:12px;right:12px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.mt-launcher{display:flex;align-items:center;gap:7px;height:34px;padding:0 11px;background:var(--navy-dark);border:1px solid var(--divider);border-radius:var(--r-lg);color:var(--text-muted);font-size:var(--t-base);font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s;box-shadow:var(--e2)}
.mt-launcher:hover{border-color:var(--teal);color:var(--teal)}
.mt-launcher.open{border-color:var(--teal);color:var(--teal)}
.mt-launcher-ic{display:flex;align-items:center;justify-content:center;color:currentColor}
.mt-launcher-ic svg{width:15px;height:15px;display:block}
.mt-launcher-lbl{white-space:nowrap}
.mt-launcher-chev{font-size:var(--t-xs);color:var(--text-faint);transition:transform .15s}
.mt-launcher.open .mt-launcher-chev{transform:rotate(180deg)}
.mt-launcher.pulse{animation:mtPulse 1.6s ease-out infinite}
@keyframes mtPulse{0%{box-shadow:var(--e2),0 0 0 0 rgba(29,158,117,.55)}70%{box-shadow:var(--e2),0 0 0 11px rgba(29,158,117,0)}100%{box-shadow:var(--e2),0 0 0 0 rgba(29,158,117,0)}}
#map-tools-menu{display:none;position:absolute;top:40px;right:0;z-index:9;width:256px;background:var(--glass-bg);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid var(--divider);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--e4)}
#map-tools-menu.open{display:block;animation:fIn .2s cubic-bezier(.2,.8,.2,1) both}
.mt-sec{font-size:var(--t-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint);padding:10px 14px 5px}
.mt-sec:not(:first-child){margin-top:2px;border-top:1px solid var(--divider);padding-top:10px}
.mt-row{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;transition:background .12s,border-color .12s;border-left:2px solid transparent}
.mt-row:hover{background:var(--navy-light)}
.mt-row-ic{width:19px;height:19px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-dim);transition:color .12s}
.mt-row-ic svg{width:15px;height:15px;display:block}
.mt-row:hover .mt-row-ic{color:var(--text-muted)}
.mt-row-lbl{font-size:var(--t-base);color:var(--text-muted);flex:1;line-height:1.3}
.mt-row-dot{width:7px;height:7px;border-radius:50%;background:transparent;flex-shrink:0;transition:background .12s,box-shadow .12s}
.mt-row.active{background:var(--teal-dim);border-left-color:var(--teal)}
.mt-row.active .mt-row-lbl{color:var(--teal);font-weight:600}
.mt-row.active .mt-row-ic{color:var(--teal)}
.mt-row.active .mt-row-dot{background:var(--brand-grad);box-shadow:0 0 6px rgba(29,158,117,.65)}
/* first-open coach-mark pointing at the launcher */
#maptools-coach{display:none;position:absolute;top:54px;right:12px;z-index:6;width:204px;background:var(--teal-dim);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid var(--teal-border);border-radius:var(--r-lg);padding:10px 12px;box-shadow:var(--e3)}
#maptools-coach.visible{display:block;animation:fIn .2s cubic-bezier(.2,.8,.2,1) both}
#maptools-coach::before{content:'';position:absolute;top:-7px;right:30px;width:12px;height:12px;background:var(--teal-dim);border-left:1px solid var(--teal-border);border-top:1px solid var(--teal-border);transform:rotate(45deg)}
.tip-reset-link{font-size:var(--t-sm);color:var(--text-dim);cursor:pointer;text-decoration:underline;background:none;border:none;padding:0;margin:2px 0 10px;display:inline-block;font-family:inherit;transition:color .15s ease}
.tip-reset-link:hover{color:var(--teal)}
.mtc-title{font-size:var(--t-base);font-weight:700;color:var(--teal);margin-bottom:4px;background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.mtc-text{font-size:var(--t-sm);color:var(--teal);line-height:1.5;margin-bottom:9px}
.mtc-btn{font-size:var(--t-sm);font-weight:600;color:#fff;background:var(--brand-grad);border:none;border-radius:var(--r-md);padding:4px 13px;cursor:pointer;font-family:inherit}
.mtc-btn:hover{filter:brightness(1.08)}
/* swipe compare panel */
#swipe-panel{display:none;position:absolute;top:58px;left:12px;z-index:6;width:288px;max-height:calc(100% - 110px);overflow-y:auto;background:var(--glass-bg);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid var(--divider);border-radius:var(--r-lg);box-shadow:var(--e4)}
#swipe-panel.visible{display:block;animation:fIn .2s cubic-bezier(.2,.8,.2,1) both}
.swp-hdr{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--divider);background:var(--navy-dark);border-radius:var(--r-lg) 8px 0 0}
.swp-title{font-size:var(--t-base);font-weight:600;color:var(--text);flex:1}
.swp-orient{font-size:var(--t-xs);color:var(--teal);background:var(--teal-dim);border:1px solid var(--teal-border);border-radius:var(--r-sm);padding:2px 7px;cursor:pointer;white-space:nowrap}
.swp-close{font-size:var(--t-md);color:var(--text-faint);cursor:pointer;padding:0 2px}
.swp-close:hover{color:var(--text)}
.swp-colhdr{display:flex;align-items:center;padding:6px 12px;font-size:var(--t-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-faint);border-bottom:1px solid var(--divider)}
.swp-colhdr-name{flex:1}
.swp-colhdr-side{width:42px;text-align:center}
.swp-row{display:flex;align-items:center;padding:6px 12px;font-size:var(--t-sm);color:var(--text-muted);border-bottom:1px solid rgba(255,255,255,.04)}
.swp-row-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:6px}
.swp-row-side{width:42px;display:flex;justify-content:center}
.swp-row-side input{accent-color:var(--teal);cursor:pointer}
.swp-note{font-size:var(--t-xs);color:var(--text-faint);padding:8px 12px;line-height:1.5}
/* radar-sweep scan animation — centered on the study area's real screen position via
   view.toScreen(), set once when a scan starts (see runCheck()); purely decorative, sits
   under floating panels like #elev-panel but above the base map. */
.sweep-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:300px;pointer-events:none;opacity:0;transition:opacity .4s;z-index:4}
.sweep-overlay.on{opacity:1}
.sweep-rot{transform-origin:150px 150px;animation:sweepspin 2.1s linear infinite}
@keyframes sweepspin{to{transform:rotate(360deg)}}
.pulse-ring{transform-origin:150px 150px}
.pulse-ring.go{animation:pulsecirc 2.1s ease-out infinite}
@keyframes pulsecirc{0%{r:8px;opacity:.7}100%{r:140px;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .sweep-rot{animation:none}
  .pulse-ring.go{animation:none}
}

/* elevation profile panel */
#elev-panel{display:none;position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:7;width:min(760px,86%);background:var(--glass-bg);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid var(--divider);border-radius:var(--r-lg);box-shadow:var(--e4);overflow:hidden}
#elev-panel.visible{display:block;animation:fInUp .2s cubic-bezier(.2,.8,.2,1) both}
.elev-hdr{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid var(--divider);background:var(--navy-dark)}
.elev-title{font-size:var(--t-base);font-weight:600;color:var(--text);flex:1}
.elev-close{font-size:var(--t-md);color:var(--text-faint);cursor:pointer;padding:0 2px}
.elev-close:hover{color:var(--text)}
#elev-profile-widget{min-height:200px}
/* imagery over time panel */
#imagery-panel{display:none;position:absolute;top:58px;left:12px;z-index:6;width:270px;max-height:calc(100% - 110px);overflow-y:auto;background:var(--glass-bg);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid var(--divider);border-radius:var(--r-lg);box-shadow:var(--e4)}
#imagery-panel.visible{display:block;animation:fIn .2s cubic-bezier(.2,.8,.2,1) both}
/* Persistent attribution for a dated image pinned as the background (no Esri attribution
   widget on this map; the panel's own #img-attr is gone once the tool closes). Wayback/Esri
   licensing requires the credit stay visible while the imagery is shown. */
/* Pin-the-current-image-as-background action (was an inline style blob). */
.img-setbase-btn{width:100%;margin-top:9px;padding:7px 8px;font-size:var(--t-base);font-weight:600;background:var(--teal);color:#fff;border:none;border-radius:var(--radius);cursor:pointer}
.img-setbase-btn:hover{filter:brightness(1.08)}
/* Placed into the ArcGIS bottom-right corner by map-init.js so it stacks with the Legend
   widget instead of sitting on top of it — no positioning here, only looks. The high
   `order` keeps this attribution hard against the map edge, below anything else in that
   stack: the Legend is added at runtime and would otherwise push it around. */
#map-imagery-credit{display:none;order:9;max-width:min(64%,540px);padding:4px 9px;background:var(--glass-bg);backdrop-filter:blur(9px) saturate(140%);-webkit-backdrop-filter:blur(9px) saturate(140%);border:1px solid var(--divider);border-radius:var(--radius);color:var(--text-muted);font-size:var(--t-xs);line-height:1.45;letter-spacing:.1px;box-shadow:0 2px 10px rgba(0,0,0,.32);pointer-events:none}
/* Then-vs-now Wayback time compare — the in-panel launch button + the floating status/exit pill */
.wb-compare-btn{width:100%;margin-top:8px;padding:7px 8px;font-size:var(--t-base);font-weight:600;background:transparent;color:var(--teal);border:1px solid var(--teal);border-radius:var(--radius);cursor:pointer;transition:background .15s,color .15s}
.wb-compare-btn:hover,.wb-compare-btn.active{background:var(--teal);color:#fff}
#wayback-compare-bar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:12px;padding:6px 8px 6px 14px;background:var(--glass-bg);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid var(--divider);border-radius:var(--r-pill);box-shadow:var(--e3);font-size:var(--t-base)}
.wb-cmp-grp{display:flex;align-items:center;gap:6px}
.wb-cmp-lbl{font-size:var(--t-xs);font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-faint)}
.wb-cmp-date{font-weight:600;color:var(--text)}
.wb-cmp-sep{font-size:var(--t-xs);color:var(--teal);letter-spacing:1px}
#wb-compare-exit{border:none;background:transparent;color:var(--text-faint);font-size:var(--t-lg);cursor:pointer;padding:2px 5px;border-radius:var(--r-sm);line-height:1}
#wb-compare-exit:hover{color:var(--text);background:rgba(255,255,255,.08)}
.img-hdr{display:flex;align-items:center;padding:9px 12px;border-bottom:1px solid var(--divider);background:var(--navy-dark);border-radius:var(--r-lg) 8px 0 0}
.img-title{font-size:var(--t-base);font-weight:600;color:var(--text);flex:1}
.img-close{font-size:var(--t-md);color:var(--text-faint);cursor:pointer;padding:0 2px}
.img-close:hover{color:var(--text)}
.img-body{padding:11px 12px}
#dea-mode{width:100%;padding:7px 8px;background:var(--navy-dark);border:1px solid var(--divider);border-radius:var(--r-md);color:var(--text);font-size:var(--t-base);cursor:pointer;margin-bottom:10px}
.img-year-row{display:flex;align-items:center;gap:6px}
.img-year-row #dea-year{flex:1;min-width:0;accent-color:var(--teal)}
.img-step{width:26px;height:24px;flex-shrink:0;background:var(--navy-dark);border:1px solid var(--divider);border-radius:var(--r-sm);color:var(--text-muted);font-size:var(--t-xs);cursor:pointer;display:flex;align-items:center;justify-content:center}
.img-step:hover{border-color:var(--teal);color:var(--teal)}
.img-step.active{background:var(--brand-grad);border-color:transparent;color:#fff}
.img-year-label{font-size:var(--t-sm);color:var(--text-muted);text-align:center;margin-top:6px}
.img-year-label span{color:var(--teal);font-weight:600}
#dea-legend{margin-top:10px}
#dea-legend img{max-width:100%;background:#fff;border-radius:var(--r-sm);padding:4px}
.img-attr{font-size:var(--t-2xs);color:var(--text-faint);margin-top:10px;line-height:1.5}
#qimg-year{padding:7px 8px;background:var(--navy-dark);border:1px solid var(--divider);border-radius:var(--r-md);color:var(--text);font-size:var(--t-sm);cursor:pointer}
.qimg-cir-row{display:flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--text-muted);margin-top:8px;cursor:pointer}
.qimg-cir-row input{accent-color:var(--teal)}
/* Basemap toggle row inside Map tools menu */
.mt-basemap-row{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:6px 14px 10px}
.mt-bm-toggle{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.mt-bm-btn{flex:1;font-size:var(--t-xs);padding:5px 4px;border:1px solid var(--divider);border-radius:var(--r-md);background:transparent;color:var(--text-dim);cursor:pointer;font-family:inherit;transition:all .15s;display:flex;align-items:center;justify-content:center;text-align:center;min-height:36px;line-height:1.25}
.mt-bm-btn:hover{border-color:var(--teal-b)}
.mt-bm-btn.active{background:var(--brand-grad);color:#fff;border-color:transparent}
/* Measure and Coordinate readout panels. #qbuffer-panel was here too, until the
   Buffer/setback check was absorbed by the Explore area of interest. */
#measure-panel,#coord-panel{display:none;position:absolute;top:58px;left:12px;z-index:6;width:280px;max-height:calc(100% - 110px);overflow-y:auto;background:var(--glass-bg);backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid var(--divider);border-radius:var(--r-lg);box-shadow:var(--e4)}
#measure-panel.visible,#coord-panel.visible{display:block;animation:fIn .2s cubic-bezier(.2,.8,.2,1) both}
.coord-hint{font-size:var(--t-sm);color:var(--text-faint);line-height:1.5}
.coord-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid var(--divider)}
.coord-row:last-of-type{border-bottom:none}
.coord-label{font-size:var(--t-xs);color:var(--text-faint)}
.coord-val{font-size:var(--t-base);color:var(--text);font-weight:600;font-family:'Consolas',monospace}
.coord-copy-btn{margin-top:10px;width:100%;padding:6px;background:transparent;border:1px solid var(--divider);border-radius:var(--r-md);color:var(--text-dim);font-size:var(--t-sm);cursor:pointer;font-family:inherit;transition:all .15s}
.coord-copy-btn:hover{border-color:var(--teal);color:var(--teal)}
/* .qbuffer-* removed with the Buffer/setback panel it styled. */
/* Map Composer modal */
#mapmaker-overlay{display:none;position:fixed;inset:0;z-index:15200;background:rgba(6,12,20,.8);align-items:flex-start;justify-content:center;overflow-y:auto;padding:24px 16px}
#mapmaker-overlay.visible{display:flex;animation:fadeBg .22s ease both}
.mm-box{width:min(560px,96vw);background:var(--navy-mid);border:1px solid var(--divider);border-top:3px solid var(--teal);border-radius:var(--r-xl);box-shadow:var(--e5);margin:auto;padding-bottom:16px;animation:fInModal .28s .04s cubic-bezier(.2,.8,.2,1) both}
.mm-hdr{display:flex;align-items:flex-start;gap:10px;padding:15px 20px;border-bottom:1px solid var(--divider)}
.mm-hdr-ic{font-size:19px;line-height:1.2}
.mm-hdr-t{font-size:var(--t-xl);font-weight:700;color:var(--text);flex:1}
.mm-hdr-t small{display:block;font-size:var(--t-sm);font-weight:400;color:var(--text-dim);margin-top:2px}
.mm-close{background:none;border:none;color:var(--text-faint);font-size:17px;cursor:pointer;line-height:1}
.mm-body{padding:14px 20px 0}
.mm-tip{display:flex;gap:8px;font-size:var(--t-sm);color:var(--teal);background:var(--teal-dim);border:1px solid var(--teal-border);border-radius:var(--radius);padding:9px 11px;margin-bottom:14px;line-height:1.5}
.mm-field{margin-bottom:12px}
.mm-label{display:block;font-size:var(--t-sm);font-weight:600;color:var(--text-muted);margin-bottom:4px}
.mm-hint{font-size:var(--t-xs);color:var(--text-faint);margin-top:3px;line-height:1.4}
.mm-input,.mm-textarea,.mm-select{width:100%;padding:8px 10px;background:var(--navy-dark);border:1px solid var(--divider);border-radius:var(--r-md);color:var(--text);font-size:var(--t-base);font-family:inherit}
.mm-input::placeholder,.mm-textarea::placeholder{color:var(--text-faint)}
.mm-textarea{resize:vertical;min-height:46px}
.mm-row{display:flex;gap:12px}.mm-row .mm-field{flex:1}
.mm-seg{display:flex;border:1px solid var(--divider);border-radius:var(--radius);overflow:hidden}
.mm-seg-btn{flex:1;padding:7px 8px;background:var(--navy-dark);border:none;color:var(--text-dim);font-size:var(--t-sm);font-weight:600;cursor:pointer;font-family:inherit}
.mm-seg-btn.active{background:var(--brand-grad);color:#fff}
.mm-logo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mm-logo-btn{font-size:var(--t-sm);font-weight:600;color:var(--teal);background:var(--teal-dim);border:1px solid var(--teal-border);border-radius:var(--r-md);padding:7px 12px;cursor:pointer;font-family:inherit}
.mm-logo-clear{font-size:var(--t-xs);color:var(--red);background:none;border:none;cursor:pointer;text-decoration:underline;font-family:inherit}
.mm-checks{display:flex;flex-wrap:wrap;gap:9px 16px}
.mm-check{display:flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--text-muted);cursor:pointer}
.mm-check input{accent-color:var(--teal)}
.mm-actions{display:flex;justify-content:flex-end;gap:10px;padding:14px 20px 0;margin-top:6px;border-top:1px solid var(--divider)}
.mm-btn-cancel{padding:9px 16px;background:transparent;color:var(--text-dim);border:1px solid var(--divider);border-radius:var(--radius);font-size:var(--t-base);cursor:pointer;font-family:inherit}
.mm-btn-go{padding:9px 20px;background:var(--brand-grad);color:#fff;border:none;border-radius:var(--radius);font-size:var(--t-md);font-weight:600;cursor:pointer;font-family:inherit}
.mm-btn-go:hover{filter:brightness(1.08)}
.mm-btn-go:disabled{opacity:.6;cursor:not-allowed}
.mm-brand-row{display:flex;align-items:center;gap:10px}
.mm-color{width:42px;height:30px;padding:2px;background:var(--navy-dark);border:1px solid var(--divider);border-radius:var(--r-md);cursor:pointer;flex-shrink:0}
.mm-field-row{display:flex;gap:7px;margin-bottom:6px}
.mm-field-row .mm-f-label{flex:0 0 42%}
.mm-field-row .mm-f-value{flex:1}
.mm-f-del{flex-shrink:0;width:28px;background:var(--navy-dark);border:1px solid var(--divider);border-radius:var(--r-md);color:var(--text-faint);font-size:var(--t-base);cursor:pointer}
.mm-f-del:hover{color:var(--red);border-color:var(--red-border)}
.mm-addfield{font-size:var(--t-sm);font-weight:600;color:var(--teal);background:var(--teal-dim);border:1px solid var(--teal-border);border-radius:var(--r-md);padding:6px 12px;cursor:pointer;font-family:inherit;margin-top:2px}
.mm-addfield:hover{background:rgba(29,158,117,0.3)}

/* ── Define: method chooser ───────────────────────────────────────────────────
   One "how do you want to set it?" grid replaces three stacked method cards. The
   underlying #tc-find / #tc-draw / #tc-upload / #tc-promote cards are unchanged and keep
   their ids (the guided tour and kiosk wizard spotlight them); setDefineMethod() just
   shows one at a time. */
.method-label{font-size:var(--t-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);margin:var(--s3) 0 var(--s3)}
.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-bottom:var(--s6)}
.method-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);
  padding:var(--s5) var(--s2);background:var(--navy-mid);border:1px solid var(--divider);
  border-radius:var(--r-lg);color:var(--text-muted);font-family:inherit;font-size:var(--t-sm);
  cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.method-tile:hover{background:var(--navy-light);color:var(--text)}
.method-tile.active{background:var(--teal-dim);border-color:var(--teal);color:var(--text)}
.mt-ic{width:18px;height:18px;display:flex;color:var(--text-faint);transition:color .15s}
.mt-ic svg{width:100%;height:100%}
.method-tile.active .mt-ic{color:var(--teal)}
.mt-lbl{line-height:1.2}
/* The tile now names the method, so the card's own header would just repeat it. */
#tc-find>.tc-card-hdr,#tc-draw>.tc-card-hdr,#tc-upload>.tc-card-hdr,#tc-promote>.tc-card-hdr{display:none}
/* Shown when My data is chosen but nothing has been imported yet. */
.method-empty{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.me-txt{font-size:var(--t-sm);color:var(--text-dim);line-height:1.5}

/* ── Define: section labels, buffer slider, forward CTA ───────────────────────
   Matches the concept: an uppercase label above each control rather than a card header. */
.define-label{font-size:var(--t-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-faint);margin:var(--s6) 0 var(--s3)}
.buf-slider-row{display:flex;align-items:center}
.buf-range{width:100%;accent-color:var(--teal);cursor:pointer;background:transparent}
.buf-scale{display:flex;justify-content:space-between;align-items:baseline;
  font-size:var(--t-2xs);color:var(--text-faint);margin:var(--s1) 0 var(--s5)}
#buffer-readout{color:var(--teal);font-weight:700;font-size:var(--t-sm);font-variant-numeric:tabular-nums}
.define-note{display:flex;align-items:flex-start;gap:var(--s2);margin-top:var(--s4);
  padding:var(--s3) var(--s4);background:var(--navy-dark);border-radius:var(--r-md);
  font-size:var(--t-2xs);color:var(--text-faint);line-height:1.45}
.dn-ic{flex-shrink:0;color:var(--text-dim)}
/* The forward move out of Define — same weight as Review's "Set up your report". */
.define-cta{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--s3);
  padding:var(--s5) var(--s6);margin-top:var(--s6);background:var(--brand-grad);color:#fff;
  border:none;border-radius:var(--r-md);font-size:var(--t-md);font-weight:600;
  cursor:pointer;font-family:inherit;transition:filter .15s}
.define-cta:hover{filter:brightness(1.07)}
.dc-arr{opacity:.85;font-size:var(--t-lg)}
/* The chooser tile names the method and the panel header already explains the choice, so a
   per-method description underneath would just repeat it. Concept shows none. (Format support
   is still stated inside the upload drop zone itself.) */
#tc-find>.tc-card-desc,#tc-draw>.tc-card-desc,#tc-upload>.tc-card-desc,#tc-promote>.tc-card-desc{display:none}
/* Method bodies read as inline fields under the chooser, not as boxes within a box. */
#tc-find,#tc-draw,#tc-upload,#tc-promote{background:none;border:none;padding:0}

/* Density: tiles 63px -> ~52px, and tighter label rhythm between sections. */
.method-tile{padding:var(--s3) var(--s2);gap:var(--s1)}
.mt-ic{width:16px;height:16px}
.method-grid{margin-bottom:var(--s4)}
.buf-scale{margin:2px 0 var(--s3)}
.define-note{margin-top:var(--s3);padding:var(--s2) var(--s3)}
.define-cta{margin-top:var(--s4);padding:var(--s4) var(--s5)}
.buf-actions{display:flex;gap:var(--s2);margin-top:var(--s2)}
.buf-actions .btn{flex:1}

/* Buffer is a labelled control, not a card — the concept shows no box around it. Removing the
   .tc-card shell here is worth ~26px, and #tc-buffer was the single tallest block in Define. */
#tc-buffer{background:none;border:none;padding:0}
/* The Address / Lot-plan tiles already chose the mode, so the segmented control repeated it.
   Coordinates was the only sub-mode with no tile — hence the text link that replaces it. */
.lf-tabs{display:none}
.coord-link{background:none;border:none;padding:0;margin-top:var(--s2);color:var(--teal);
  font-size:var(--t-xs);font-family:inherit;cursor:pointer;text-decoration:underline}
.coord-link:hover{filter:brightness(1.15)}
/* Coordinates mode needs a way back to address entry. */
#lf-mode-coord::before{content:"Coordinates";display:block;font-size:var(--t-2xs);
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin-bottom:var(--s2)}
.define-note{padding:var(--s2) var(--s3);font-size:var(--t-2xs);line-height:1.4}
.panel-hdr .res-summary{line-height:1.35}
/* …and the last of the panel's own rhythm. */
/* No bottom margin of its own — the next section label supplies the step. */
#site-name-input{margin-bottom:0}
.buf-scale{margin:2px 0 var(--s2)}

/* Tiles read via their border and a faint lift on hover, not via a lighter fill. */
.method-tile{background:var(--navy)}
.method-tile:hover{background:var(--surface-tint)}
.define-note{background:var(--surface-tint)}

/* ── Buffer slider ────────────────────────────────────────────────────────────
   Custom-drawn to match the concept: a thin rounded track that fills teal up to the
   thumb, with a small light thumb. --fill is set from onBufferSlider() in study-area.js,
   because a range input cannot express "filled to here" in CSS alone.
   Keyed to .buf-range rather than #buffer-slider so Define's slider and the Explore area
   card's slider are the same control rather than two that drift — the alternative was
   extending seven id selectors, three of them with pseudo-elements. */
.buf-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;padding:0;
  border-radius:var(--r-pill);cursor:pointer;
  background:linear-gradient(90deg,var(--teal) 0%,var(--teal) var(--fill,0%),
                             var(--navy-dark) var(--fill,0%),var(--navy-dark) 100%)}
.buf-range:focus{outline:none}
.buf-range:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.buf-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;
  border-radius:50%;background:#fff;border:2px solid var(--teal);cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.45)}
.buf-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;
  border:2px solid var(--teal);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.45)}
.buf-range::-moz-range-track{height:4px;border-radius:var(--r-pill);background:transparent}

/* Apply/Remove are a secondary confirmation, not the panel's main move — that is the CTA
   at the bottom. Compact and auto-width rather than two full-width primary bars. */
.buf-actions{gap:var(--s2);margin-top:var(--s3)}
.buf-actions .btn{flex:0 0 auto;padding:4px var(--s5);font-size:var(--t-xs);font-weight:600;
  background:var(--surface-tint);border:1px solid var(--divider);color:var(--text-dim);
  background-image:none}
.buf-actions .btn:hover:not(:disabled){background:var(--teal-dim);border-color:var(--teal-border);color:var(--text)}
.buf-actions .btn:disabled{opacity:.45;cursor:default}
/* .btn carries width:100% by default (base.css) — these two sit side by side instead. */
.buf-actions .btn{width:auto}

/* CTA height must match the ordinary buttons above it — it reads as primary through full
   width and the gradient, not by being twice as tall. Declared HERE, not in base.css:
   tools.css loads after base.css, so the earlier .define-cta padding in this file wins over
   anything base.css says. */
.define-cta{padding:5px 12px;font-size:var(--t-sm);gap:var(--s2);margin-top:var(--s4)}
.dc-arr{font-size:var(--t-base)}

/* Sketch actions match the buffer's Apply/Remove — small and secondary. Two full-width
   primary bars here competed with the panel's actual CTA. */
#sketch-actions{gap:var(--s2);margin-top:var(--s3)}
#sketch-actions .btn{flex:0 0 auto;width:auto;padding:4px var(--s5);font-size:var(--t-xs);font-weight:600}
#sketch-actions .btn-p{background-image:none;background:var(--teal-dim);border:1px solid var(--teal-border);color:var(--teal)}
#sketch-actions .btn-p:hover{background:var(--teal-border);color:var(--text)}
#sketch-actions .btn-d{background:var(--surface-tint);border:1px solid var(--divider);color:var(--text-dim)}
/* Shape variants: compact chips, and only shown for Draw. */
#sketch-tools{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2)}
#sketch-tools .sm-btn{padding:3px var(--s4);font-size:var(--t-xs);border-radius:var(--r-pill);
  border:1px solid var(--divider);background:var(--navy);color:var(--text-dim);cursor:pointer}
#sketch-tools .sm-btn.active{background:var(--teal-dim);border-color:var(--teal);color:var(--text)}

/* The concept breathes between sections rather than stacking them tight. Now that the extra
   sketch controls are gone there is room for it again. */
/* ── Define panel rhythm — the single source ──────────────────────────────────
   tools.css had accumulated FOUR generations of margin overrides for these same few
   elements; only the last took effect, so the panel's spacing was whatever that last
   generation happened to say, and gaps between consecutive blocks measured 20 / 16 / 16 /
   22 / 16 / 14 / 22px — every one different. The earlier generations are now deleted and
   this block is the only place these margins are set. Two values, and only two:
     • a label sits SNUG (--s3) above the control it names — they are one unit
     • one section is separated from the next by a single step (--s8)
   Change spacing here; adding another override below will silently win and put the panel
   back to where it was. */
.method-label,.define-label{margin:var(--s8) 0 var(--s3)}
/* The first label answers to the panel header's padding, not a full section step. */
.method-label:first-child,.define-label:first-child{margin-top:var(--s3)}
.method-grid{margin-bottom:0}
.define-note{margin-top:var(--s3)}
.define-cta{margin-top:var(--s8)}

/* ── Add layers from an ArcGIS REST Services Directory ────────────────────────
   Same overlay idiom as #report-overlay: fixed scrim, centred box, .visible to show. */
#service-browser{display:none;position:fixed;inset:0;z-index:3000;background:rgba(6,12,20,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);align-items:center;justify-content:center;padding:var(--s5)}
#service-browser.visible{display:flex;animation:fIn .18s cubic-bezier(.2,.8,.2,1) both}
.sb-box{width:min(560px,96vw);max-height:86vh;display:flex;flex-direction:column;
  background:var(--navy);border:1px solid var(--divider);border-radius:var(--r-xl);box-shadow:var(--e4);overflow:hidden}
.sb-hdr{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);border-bottom:1px solid var(--divider)}
.sb-title{flex:1;font-size:var(--t-lg);font-weight:600}
.sb-x{background:none;border:none;color:var(--text-faint);font-size:var(--t-lg);cursor:pointer;line-height:1}
.sb-x:hover{color:var(--text)}
.sb-urlrow{display:flex;gap:var(--s2);padding:var(--s4) var(--s5) var(--s2)}
.sb-urlrow .eco-field{flex:1;min-width:0;font-size:var(--t-sm)}
.sb-crumb{display:flex;align-items:center;flex-wrap:wrap;gap:4px;padding:0 var(--s5) var(--s2);font-size:var(--t-sm)}
.sb-crumb-btn{background:none;border:none;color:var(--teal);cursor:pointer;font-family:inherit;font-size:var(--t-sm);padding:0}
.sb-crumb-btn:hover{text-decoration:underline}
.sb-crumb-sep{color:var(--text-faint)}
.sb-crumb-cur{color:var(--text-muted)}
#sb-status{padding:0 var(--s5) var(--s2)}
#sb-status.sb-err{color:var(--red)}
/* The list is the only scrolling region, so the URL row and the footer stay put while a
   56-folder server is being browsed. */
.sb-list{flex:1 1 auto;min-height:120px;overflow-y:auto;padding:0 var(--s5) var(--s3)}
.sb-row{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left;
  padding:8px 10px;background:none;border:1px solid transparent;border-radius:var(--r-md);
  color:var(--text-muted);font-family:inherit;font-size:var(--t-base);cursor:pointer}
.sb-row:hover{background:var(--surface-tint);border-color:var(--divider);color:var(--text)}
.sb-ic{flex-shrink:0;font-size:var(--t-base)}
.sb-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-type{flex-shrink:0;font-size:var(--t-3xs);font-weight:700;color:var(--text-faint);
  background:var(--navy-mid);border-radius:var(--r-xs);padding:1px 5px}
.sb-go{flex-shrink:0;color:var(--text-faint)}
.sb-pick{cursor:pointer}
.sb-cb{accent-color:var(--teal);flex-shrink:0}
.sb-foot{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5) var(--s4);border-top:1px solid var(--divider)}
.sb-note{flex:1;font-size:var(--t-2xs);color:var(--text-faint);line-height:1.4}
/* My data header now carries two buttons rather than one. */
.md-add-row{display:flex;gap:var(--s2)}
.md-add{font-size:10.5px;font-weight:600;color:var(--teal);background:var(--teal-dim);
  border:1px solid var(--teal-border);border-radius:5px;padding:3px 9px;cursor:pointer;font-family:inherit}
.md-add:hover{background:var(--teal-border)}
.sb-presets{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);padding:0 var(--s5) var(--s3)}
.sb-preset-lbl{font-size:var(--t-2xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-faint)}
.sb-preset{font-size:var(--t-xs);font-weight:600;color:var(--text-muted);background:var(--navy-mid);
  border:1px solid var(--divider);border-radius:var(--r-pill);padding:3px 10px;cursor:pointer;font-family:inherit}
.sb-preset:hover{border-color:var(--teal);color:var(--teal)}
/* .btn carries width:100% (base.css) which, inside the flex url row, let Browse take the whole
   line and squashed the input to a sliver. Scoped override rather than touching .btn itself. */
.sb-urlrow .btn{width:auto;flex:0 0 auto;padding:5px 16px}
/* Service rows became two lines once each carries its real name under its code. */
.sb-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;text-align:left}
.sb-main .sb-name{flex:none}
.sb-sub{font-size:var(--t-2xs);color:var(--text-faint);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-sub:empty{display:none}