/* ============================================================
   Pipezoom - css/leadmap.css, the Map view of the Leads page.

   The strip over the map, the frame whose canvas js/leadmap.js sizes to the window's bottom, the lasso box
   over its top right corner, the pins in their score band's color with white or dark ink (the confidence
   chip tokens of css/leadrow.css, and gray for a row not read yet), the planned pins in gold, the pins inside
   the lasso ringed and the ones outside dimmed, and the table row Open row lands on.
   Defines the --lm- tokens, the classes under .lmap and .lmap-lit on a table row.
   Notes: docs/notes/app.pipezoom.com/css/leadmap.css.md
   ============================================================ */

.lmap{
  --lm-sure:var(--lead-sure-green);
  --lm-likely:var(--lead-sure-blue);
  --lm-maybe:var(--lead-sure-grey);
  --lm-none:var(--hue-grey-btn);
  --lm-plan:var(--gold);
  --lm-white:var(--ink-inverse);
  --lm-dark:var(--brand-grey);
  --lm-c:var(--lm-none);
  --lm-ink:var(--lm-dark);
  margin:0 0 16px;
}
/* 1 fill and 1 ink per band, read by the pin heads and the swatches beside the boxes. */
.lmap .cal-pin-lm-sure,.lmap .lmap-sw-sure{--lm-c:var(--lm-sure);--lm-ink:var(--lm-white);}
.lmap .cal-pin-lm-likely,.lmap .lmap-sw-likely{--lm-c:var(--lm-likely);--lm-ink:var(--lm-white);}
.lmap .cal-pin-lm-maybe,.lmap .lmap-sw-maybe{--lm-c:var(--lm-maybe);--lm-ink:var(--lm-white);}
.lmap .cal-pin-lm-plan,.lmap .lmap-sw-plan{--lm-c:var(--lm-plan);--lm-ink:var(--lm-dark);}

/* The strip: the 2 selects, the band boxes with their counts, then the count of pins. */
.lmap-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  padding:9px 12px;
  background:var(--surface-raised);
  border:1px solid var(--line);border-bottom:0;
  border-radius:var(--radius) var(--radius) 0 0;
}
.lmap-bar .lds-sel{min-width:0;}
.lmap-bands{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;}
.lmap-band{
  display:inline-flex;align-items:center;gap:6px;margin:0;
  font-size:.82rem;font-weight:600;color:var(--ink);white-space:nowrap;
}
label.lmap-band{cursor:pointer;}
.lmap-band input{width:16px;height:16px;margin:0;accent-color:var(--accent-strong);}
.lmap-band b{font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums;}
.lmap-sw{
  flex:none;width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--lm-c);color:var(--lm-ink);
  font-size:.6rem;font-style:normal;font-weight:700;line-height:1;
}
.lmap-count{display:flex;flex-wrap:wrap;gap:2px 12px;margin:0 0 0 auto;font-size:.82rem;color:var(--ink-soft);}
.lmap-count b{color:var(--ink);font-variant-numeric:tabular-nums;}

/* The frame: the canvas is its own stacking context, and the lasso box stacks over every Leaflet pane. */
.lmap-frame{
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--surface-sunken);
  border:1px solid var(--line);
  border-radius:0 0 var(--radius) var(--radius);
}
.lmap-canvas{position:relative;z-index:0;height:60vh;min-height:320px;}
.lmap .leaflet-container{background:var(--surface-sunken);font:inherit;}
.lmap .leaflet-popup-content-wrapper,.lmap .leaflet-popup-tip{background:var(--surface-high);color:var(--ink);}
.lmap .leaflet-popup-content a{color:var(--accent);}

.lmap-lasso{
  position:absolute;z-index:1;top:10px;right:10px;
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  max-width:calc(100% - 64px);
}
.lmap-lasso-do{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;}
.lmap-lasso .btn{box-shadow:0 1px 4px var(--scrim);}
.lmap-say{
  margin:0;padding:6px 10px;max-width:300px;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--ink);font-size:.82rem;line-height:1.4;
  box-shadow:0 1px 4px var(--scrim);
}
.lmap-err{margin:8px 0 0;}

/* Pins: a round head in the band's color with its letter inside, the origin in ink. */
.lmap .cal-pin.cal-pin-n{display:block;font-size:12px;line-height:1;}
.lmap .cal-pin-n > span{
  position:absolute;left:1px;top:1px;width:28px;height:28px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--lm-c);border:2px solid var(--lm-white);
  box-shadow:0 1px 4px var(--scrim);
  transition:transform .12s;
}
.lmap .cal-pin-n b{transform:rotate(45deg);color:var(--lm-ink);font-weight:700;}
.lmap .cal-pin-start{color:var(--ink);}
.lmap .lmap-in > span{transform:rotate(-45deg) scale(1.2);box-shadow:0 0 0 3px var(--accent-strong);}
.lmap .lmap-out{opacity:.3;}

/* Tap mode: the taps reach the map through the pins, and the area's edge is dashed until Close. */
.lmap .lmap-drawing.leaflet-container{cursor:crosshair;}
.lmap .lmap-drawing .leaflet-marker-icon{pointer-events:none;}
.lmap .lmap-shape{stroke:var(--accent-strong);stroke-width:3;fill:none;}
.lmap .lmap-drawing .lmap-shape{stroke-dasharray:6 6;}
.lmap .lmap-vx{stroke:var(--ink-inverse);stroke-width:2;fill:var(--accent-strong);fill-opacity:1;}

.lmap-pop{display:flex;flex-direction:column;gap:3px;min-width:190px;font-size:.85rem;}
.lmap-pop-l{color:var(--ink-soft);}
.lmap-pop-go{display:inline-flex;align-items:center;gap:5px;margin-top:5px;font-weight:600;}

/* The table row Open row lands on, in the hover color of the page. */
.lds-tbl tr.lmap-lit > td{background:var(--surface-hover);}

@media (max-width:699px){
  .lmap-bar{padding:8px 10px;}
  .lmap-count{margin-left:0;flex-basis:100%;}
  .lmap-say{max-width:220px;}
}