/*
  /tools/satellite-area-calculator — the free satellite area/distance
  measuring tool. Namespaced .xrt-calc-*. Relies on the --xrt-* tokens
  defined on .xrt-scope in layout.css. Mobile-first: sidebar stacks below
  the map under 960px.
*/

/* ---- hero (no photo — the tool itself is the hero) ------------------- */
.xrt-calc-hero{background:var(--xrt-deep);color:#fff;padding:40px 20px 32px}
.xrt-calc-hero__inner{max-width:1200px;margin:0 auto}
.xrt-calc-hero__eyebrow{font-family:var(--xrt-font-h);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--xrt-lime);margin:0 0 10px}
.xrt-calc-hero__title{font-family:var(--xrt-font-h);font-weight:800;font-size:clamp(26px,4vw,42px);letter-spacing:-.02em;line-height:1.1;margin:0 0 14px;color:#fff}
.xrt-calc-hero__desc{font-size:15.5px;line-height:1.6;color:rgba(255,255,255,.82);max-width:760px;margin:0 0 18px}
.xrt-calc-badges{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 4px}
.xrt-calc-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:rgba(255,255,255,.9)}
.xrt-calc-badge svg{width:14px;height:14px;color:var(--xrt-lime)}

/* "Quick answer" callout — a snippet/AI-Overview-style direct answer meant
   to sit right under the hero, before the tool itself. Light-theme sibling
   of blog.css's dark .xrt-quick-answer (this page isn't on the blog's dark
   reading theme, so it reuses this page's own --xrt-* light tokens). */
.xrt-calc-quick-answer{background:var(--xrt-cream);border:1px solid var(--xrt-border);border-radius:var(--xrt-r-md);padding:18px 22px;margin:20px 0 0}
.xrt-calc-quick-answer__label{font-family:var(--xrt-font-h);font-weight:800;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--xrt-teal);margin:0 0 8px}
.xrt-calc-quick-answer p:last-child{margin:0;font-size:15px;line-height:1.6;color:var(--xrt-ink)}

/* ---- layout: map + sidebar ------------------------------------------- */
.xrt-calc-wrap{max-width:1280px;margin:0 auto;padding:28px 20px 64px}
.xrt-calc-layout{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:960px){
  .xrt-calc-layout{grid-template-columns:1fr 340px;align-items:start}
}

.xrt-calc-map-col{min-width:0}
.xrt-calc-map-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px;align-items:stretch}
.xrt-calc-search{position:relative;flex:1 1 240px;min-width:200px}
.xrt-calc-search__input{width:100%;height:44px;border:1px solid var(--xrt-border);border-radius:var(--xrt-r-sm);padding:0 14px;font-family:var(--xrt-font-b);font-size:14.5px;color:var(--xrt-ink);background:#fff}
.xrt-calc-search__input:focus{outline:none;border-color:var(--xrt-teal);box-shadow:0 0 0 3px rgba(47,107,92,.14)}
.xrt-calc-search__results{position:absolute;left:0;right:0;top:48px;background:#fff;border:1px solid var(--xrt-border);border-radius:var(--xrt-r-sm);box-shadow:var(--xrt-shadow-md);z-index:1000;max-height:260px;overflow-y:auto}
.xrt-calc-search__item{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--xrt-border-light);padding:10px 14px;font-size:13.5px;color:var(--xrt-ink);cursor:pointer;font-family:var(--xrt-font-b)}
.xrt-calc-search__item:last-child{border-bottom:none}
.xrt-calc-search__item:hover{background:var(--xrt-cream)}
.xrt-calc-search__empty{padding:10px 14px;font-size:13.5px;color:#8a948f}
.xrt-calc-locate-btn,.xrt-calc-basemap{height:44px;border:1px solid var(--xrt-border);border-radius:var(--xrt-r-sm);background:#fff;font-family:var(--xrt-font-b);font-size:13.5px;color:var(--xrt-ink);padding:0 14px;cursor:pointer;white-space:nowrap}
.xrt-calc-locate-btn{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.xrt-calc-locate-btn:hover{border-color:var(--xrt-teal)}
.xrt-calc-locate-btn svg{width:16px;height:16px}

/* draw/undo/clear toolbar — sits above the map, reuses .xrt-calc-btn so no
   new colors are introduced; "is-active" marks whichever draw tool is live */
.xrt-calc-draw-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}
.xrt-calc-draw-toolbar .xrt-calc-btn svg{width:15px;height:15px;flex:0 0 auto}
.xrt-calc-toolbar-sep{width:1px;align-self:stretch;background:var(--xrt-border);margin:0 2px}
.xrt-calc-tool-btn.is-active{background:var(--xrt-lime);color:var(--xrt-lime-ink);border-color:transparent}

.xrt-calc-map-wrap{position:relative;border-radius:var(--xrt-r-lg);overflow:hidden;box-shadow:var(--xrt-shadow-md);border:1px solid var(--xrt-border)}
#xrt-calc-map{height:clamp(360px,58vh,620px);width:100%;background:#dfe6e0}
.xrt-calc-map-caption{font-size:12.5px;color:#8a948f;margin:10px 2px 0;line-height:1.5}
.xrt-calc-status{font-size:13px;color:#5c6a63;margin:8px 2px 0;min-height:18px}
.xrt-calc-status--error{color:#a3322d}
.xrt-calc-status--ok{color:#1f6b2b}
.xrt-calc-disclaimer{font-size:12.5px;line-height:1.6;color:#5c6a63;background:var(--xrt-cream);border:1px solid var(--xrt-border);border-radius:var(--xrt-r-sm);padding:10px 14px;margin:14px 2px 0}
.xrt-calc-disclaimer strong{color:var(--xrt-ink)}
.xrt-calc-disclaimer a{color:var(--xrt-teal);font-weight:600}

/* Leaflet's own panes/controls default to z-index 200-1000, already well
   under this site's sticky header (z-index up to 5999 — layout.css), but
   pin them explicitly and keep them inside the rounded map box so nothing
   drawn or dragged (edit handles, tooltips) can escape above the header or
   get clipped by the box's border-radius. */
#xrt-calc-map .leaflet-pane{z-index:200}
#xrt-calc-map .leaflet-tile-pane{z-index:200}
#xrt-calc-map .leaflet-overlay-pane{z-index:300}
#xrt-calc-map .leaflet-shadow-pane{z-index:350}
#xrt-calc-map .leaflet-marker-pane{z-index:360}
#xrt-calc-map .leaflet-tooltip-pane{z-index:380}
#xrt-calc-map .leaflet-popup-pane{z-index:390}
#xrt-calc-map .leaflet-map-pane{z-index:200}
#xrt-calc-map .leaflet-top,#xrt-calc-map .leaflet-bottom{z-index:400}
/* the small "click to continue" label that follows the cursor while a
   polygon/line draw is in progress — still rendered by Leaflet.draw even
   though we don't add its stock toolbar control to the map */
.leaflet-draw-tooltip{font-family:var(--xrt-font-b)}
.xrt-calc-tooltip{background:var(--xrt-deep);color:#fff;border:none;font-family:var(--xrt-font-h);font-weight:700;font-size:12px;padding:3px 8px;border-radius:5px;box-shadow:none}
.xrt-calc-tooltip::before{display:none}

/* ---- sidebar cards ----------------------------------------------------*/
.xrt-calc-panel{background:#fff;border:1px solid var(--xrt-border);border-radius:var(--xrt-r-md);padding:18px;margin-bottom:16px;box-shadow:var(--xrt-shadow-sm)}
.xrt-calc-panel__title{font-family:var(--xrt-font-h);font-weight:800;font-size:14.5px;color:var(--xrt-ink);margin:0 0 4px;display:flex;align-items:center;gap:8px}
.xrt-calc-panel__sub{font-size:12.5px;color:#8a948f;margin:0 0 14px;line-height:1.5}
.xrt-calc-unit-row{display:flex;gap:8px;margin-bottom:10px}
.xrt-calc-unit-row label{flex:1;font-size:12px;font-weight:700;color:#5c6a63;display:block;margin-bottom:4px}
.xrt-calc-select{width:100%;height:38px;border:1px solid var(--xrt-border);border-radius:var(--xrt-r-sm);padding:0 10px;font-family:var(--xrt-font-b);font-size:13.5px;color:var(--xrt-ink);background:#fff}

.xrt-calc-shape-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto}
.xrt-calc-shape{display:flex;align-items:center;gap:10px;background:var(--xrt-cream);border-radius:var(--xrt-r-sm);padding:9px 10px;cursor:pointer;border:1.5px solid transparent}
.xrt-calc-shape--active{border-color:var(--xrt-teal)}
.xrt-calc-shape__icon{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--xrt-teal);color:#fff;display:grid;place-items:center}
.xrt-calc-shape__icon svg{width:14px;height:14px}
.xrt-calc-shape__body{flex:1;min-width:0}
.xrt-calc-shape__type{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#8a948f}
.xrt-calc-shape__value{font-family:var(--xrt-font-h);font-weight:700;font-size:13.5px;color:var(--xrt-ink)}
.xrt-calc-shape__actions{flex:0 0 auto;display:flex;gap:4px}
.xrt-calc-shape__action{width:26px;height:26px;border-radius:50%;border:none;background:#fff;color:var(--xrt-teal);cursor:pointer;display:grid;place-items:center}
.xrt-calc-shape__action:hover{background:#fff;filter:brightness(.95)}
.xrt-calc-shape__del{flex:0 0 auto;width:26px;height:26px;border-radius:50%;border:none;background:#fff;color:#a3322d;cursor:pointer;display:grid;place-items:center}
.xrt-calc-shape__del:hover{background:#fdf0ee}
.xrt-calc-empty{font-size:13px;color:#8a948f;text-align:center;padding:16px 8px}

.xrt-calc-totals{display:flex;flex-direction:column;gap:8px}
.xrt-calc-totals__row{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:#5c6a63}
.xrt-calc-totals__row b{font-family:var(--xrt-font-h);font-size:16px;color:var(--xrt-ink)}

.xrt-calc-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 14px;border-radius:var(--xrt-r-sm);font-family:var(--xrt-font-h);font-weight:700;font-size:13px;cursor:pointer;border:1px solid var(--xrt-border);background:#fff;color:var(--xrt-ink);transition:filter .15s ease}
.xrt-calc-btn:hover{filter:brightness(.97)}
.xrt-calc-btn--primary{background:var(--xrt-lime);color:var(--xrt-lime-ink);border-color:transparent}
.xrt-calc-btn--dark{background:var(--xrt-deep);color:#fff;border-color:transparent}
.xrt-calc-btn:disabled{opacity:.5;cursor:default}
.xrt-calc-export-row{display:flex;flex-wrap:wrap;gap:8px}
.xrt-calc-export-row .xrt-calc-btn{flex:1 1 auto}

.xrt-calc-converter__row{display:flex;gap:8px;align-items:flex-end;margin-bottom:10px;flex-wrap:wrap}
.xrt-calc-converter__field{flex:1 1 90px}
.xrt-calc-converter__field label{display:block;font-size:11.5px;font-weight:700;color:#5c6a63;margin-bottom:4px}
.xrt-calc-converter__input{width:100%;height:38px;border:1px solid var(--xrt-border);border-radius:var(--xrt-r-sm);padding:0 10px;font-size:13.5px;font-family:var(--xrt-font-b)}
.xrt-calc-converter__arrow{flex:0 0 auto;color:#8a948f;padding-bottom:9px}
.xrt-calc-converter__arrow svg{width:16px;height:16px}
.xrt-calc-converter__result{background:var(--xrt-cream);border-radius:var(--xrt-r-sm);padding:10px 12px;font-family:var(--xrt-font-h);font-weight:700;font-size:15px;color:var(--xrt-ink);text-align:center}

/* ---- import / saved projects / request-imagery panels ---------------- */
.xrt-calc-upload{border:1.5px dashed var(--xrt-border);border-radius:var(--xrt-r-sm);padding:16px;text-align:center;background:var(--xrt-cream)}
.xrt-calc-upload input[type=file]{width:100%;font-size:13px;margin-top:8px}
.xrt-calc-upload__hint{font-size:12px;color:#8a948f;margin:0}

.xrt-calc-projects{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:200px;overflow-y:auto}
.xrt-calc-project{display:flex;align-items:center;gap:8px;background:var(--xrt-cream);border-radius:var(--xrt-r-sm);padding:8px 10px}
.xrt-calc-project__name{flex:1;font-size:13px;font-weight:600;color:var(--xrt-ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xrt-calc-project__actions{display:flex;gap:4px}
.xrt-calc-project__actions button{border:none;background:#fff;border-radius:6px;width:26px;height:26px;cursor:pointer;display:grid;place-items:center;color:var(--xrt-teal)}
.xrt-calc-project__actions button.xrt-calc-project__del{color:#a3322d}

.xrt-calc-request-field{margin-bottom:10px}
.xrt-calc-request-field label{display:block;font-size:12px;font-weight:700;color:#5c6a63;margin-bottom:4px}
.xrt-calc-request-field input{width:100%;height:40px;border:1px solid var(--xrt-border);border-radius:var(--xrt-r-sm);padding:0 12px;font-size:13.5px;font-family:var(--xrt-font-b)}

/* Full detail table reuses .xrt-location-table (location.css) */
.xrt-calc-table-wrap{margin-top:8px;overflow-x:auto}

/* ---- /tools index cards (grid wrapper reuses .xrt-location-grid from
   location.css, same pattern as the /satellite-imagery location index) -- */
.xrt-tools-card{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--xrt-border);border-radius:var(--xrt-r-lg);padding:26px;box-shadow:var(--xrt-shadow-sm);text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease}
@media(hover:hover) and (pointer:fine){.xrt-tools-card:hover{transform:translateY(-4px);box-shadow:var(--xrt-shadow-md)}}
.xrt-tools-card__icon{width:48px;height:48px;border-radius:50%;background:var(--xrt-cream);color:var(--xrt-teal);display:grid;place-items:center;margin-bottom:14px}
.xrt-tools-card__icon svg{width:24px;height:24px}
.xrt-tools-card__title{font-family:var(--xrt-font-h);font-weight:800;font-size:19px;color:var(--xrt-ink);margin:0 0 8px}
.xrt-tools-card__desc{font-size:14px;line-height:1.6;color:#5c6a63;margin:0 0 16px;flex:1}
.xrt-tools-card__cta{font-family:var(--xrt-font-h);font-weight:700;font-size:13.5px;color:var(--xrt-teal)}
.xrt-tools-card--soon{opacity:.65}
.xrt-tools-card--soon:hover{transform:none!important;box-shadow:var(--xrt-shadow-sm)!important}

/* ---- converter tool section: visually separated from article content
   below it, so the interactive tool never blends into the SEO copy ---- */
.xrt-conv-tool-section{background:var(--xrt-cream);border-top:3px solid var(--xrt-lime);border-bottom:1px solid var(--xrt-border);padding:32px 20px}
.xrt-conv-tool-section__inner{max-width:720px;margin:0 auto}
.xrt-conv-tool-section__title{font-family:var(--xrt-font-h);font-weight:800;font-size:20px;color:var(--xrt-ink);margin:0 0 4px;display:flex;align-items:center;gap:8px}
.xrt-conv-tool-section__title svg{width:20px;height:20px;color:var(--xrt-teal)}
.xrt-conv-upload-icon{width:40px;height:40px;margin:0 auto 8px;color:var(--xrt-teal)}
.xrt-conv-result-label{font-family:var(--xrt-font-h);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--xrt-teal);margin:16px 0 8px;display:flex;align-items:center;gap:6px}
.xrt-conv-tool-section--bordered{border:2px solid var(--xrt-lime);border-top:none;box-shadow:var(--xrt-shadow-md)}

/* ---- /tools/shapefile-viewer ---------------------------------------- */
#xrt-view-map{height:clamp(320px,55vh,560px);width:100%;background:#dfe6e0}
.xrt-view-table-wrap{max-height:260px;overflow:auto;margin-top:10px;border:1px solid var(--xrt-border);border-radius:var(--xrt-r-sm)}
.xrt-view-table-wrap table{margin:0;font-size:12.5px}
.xrt-view-industry-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:0 0 8px}
@media(max-width:700px){.xrt-view-industry-grid{grid-template-columns:1fr}}
.xrt-view-industry{background:#fff;border:1px solid var(--xrt-border);border-radius:var(--xrt-r-md);padding:16px}
.xrt-view-industry__title{font-family:var(--xrt-font-h);font-weight:800;font-size:14.5px;color:var(--xrt-ink);margin:0 0 4px}
.xrt-view-industry__desc{font-size:13px;line-height:1.5;color:#5c6a63;margin:0}

/* ---- /tools/kml-to-geojson-converter (reuses .xrt-calc-panel/btn/upload/
   status from above) ------------------------------------------------- */
.xrt-conv-toggle{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.xrt-conv-toggle button{flex:1 1 160px;height:42px;border-radius:var(--xrt-r-sm);border:1px solid var(--xrt-border);background:#fff;font-family:var(--xrt-font-h);font-weight:700;font-size:13px;color:var(--xrt-ink);cursor:pointer}
.xrt-conv-toggle button.is-active{background:var(--xrt-deep);color:#fff;border-color:transparent}
.xrt-conv-output{background:var(--xrt-cream);border:1px solid var(--xrt-border);border-radius:var(--xrt-r-sm);padding:14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.5;color:var(--xrt-ink);max-height:340px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:0}
.xrt-conv-stats{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.xrt-conv-stat{background:var(--xrt-cream);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:600;color:var(--xrt-teal)}

@media(max-width:480px){
  .xrt-calc-wrap{padding:20px 14px 48px}
  .xrt-calc-panel{padding:14px}
  .xrt-calc-hero{padding:28px 14px 24px}
}