/* The base reset caps every img/svg/canvas at `max-width:100%`. Leaflet's
   vector renderers are absolutely-positioned children of a pane that has no
   width of its own, so 100% of nothing is nothing: the canvas was sized 1533
   in its width ATTRIBUTE, drawn into correctly, and laid out zero pixels
   wide. Every zone, municipality, route and trail on this map is drawn on
   that canvas — this one line is the difference between the vector layers
   existing and being visible. */
.leaflet-container canvas,
.leaflet-container svg,
.leaflet-container img{max-width:none;max-height:none}

/* ==========================================================================
   MASAR — 7-map.css
   Leaflet skin, the marker vocabulary, HUD panels, legends and popups.

   The marker vocabulary, so a new one is never invented ad hoc:
     disc      something that MOVES        (a vehicle)
     teardrop  a PLACE                     (a facility, a depot, a weighbridge)
     circle    a static ASSET              (a bin, a collection point)
     diamond   an INCIDENT                 (an alarm, a breach)
     rounded-square  a REQUEST / job       (something to be done)
     bubble    a CLUSTER                   (a count, not a thing)
   ========================================================================== */

.m-map{
  position:absolute;inset:0;background:var(--map-bg);
  z-index:var(--z-map);isolation:isolate;
}
.m-map-host{position:relative;width:100%;height:100%;min-height:240px;overflow:hidden}
.leaflet-container{
  font-family:var(--font);background:transparent;
  isolation:isolate;                 /* Leaflet's 200–700 panes must not paint over app chrome */
}
/* Leaflet's panes MUST keep their own z-index ladder (tiles 200, overlay 400,
   shadow 500, marker 600, tooltip 650, popup 700). Flattening it to `auto`
   was meant to stop the map painting over the app chrome — `isolation:isolate`
   above already does that — and what it actually did was let every marker's
   inline z-index (Leaflet writes 600+ on each one) compete with the popup and
   the vector canvas in one shared stacking context. That is why an open popup
   came up with trucks drawn across it and the zone polygon showing through it. */
.leaflet-tile-pane{filter:saturate(.86) contrast(.97)}
.m-map[data-tiles="satellite"] .leaflet-tile-pane{filter:none}
/* NO inversion in dark. This rule dates from a build that faked a night map
   by inverting the light one; the basemap registry has served a genuine dark
   cartography (World_Dark_Gray_Base) since, and inverting THAT turned the
   peninsula white while the sea around it went dark — the exact opposite of
   what the theme asked for. The tiles are already the right ones. */
html[data-theme="dark"] .m-map[data-tiles="street"] .leaflet-tile-pane{
  filter:saturate(.9) contrast(1.02);
}
/* A popup that can only be closed by opening another one, or by finding the
   map underneath it, is a trap. It gets a close control. */
.leaflet-container a.leaflet-popup-close-button{
  display:grid;place-items:center;
  width:26px;height:26px;top:6px;right:6px;
  color:var(--text-3);font:400 17px/1 var(--font);
  border-radius:var(--r-sm);text-decoration:none;padding:0;
}
html[dir="rtl"] .leaflet-container a.leaflet-popup-close-button{right:auto;left:6px}
.leaflet-container a.leaflet-popup-close-button:hover{background:var(--surface-sunken);color:var(--text)}
.leaflet-control-attribution{
  background:var(--map-panel) !important;color:var(--text-3) !important;
  font:10px/1.5 var(--font) !important;padding:2px 7px !important;
  border-radius:var(--r-xs) 0 0 0 !important;
}
.leaflet-control-attribution a{color:var(--text-2) !important}
.leaflet-control-zoom{border:0 !important;box-shadow:var(--sh-map) !important;border-radius:var(--r-sm) !important;overflow:hidden}
.leaflet-control-zoom a{
  width:32px !important;height:32px !important;line-height:32px !important;
  background:var(--map-panel) !important;color:var(--text) !important;
  border:0 !important;border-bottom:1px solid var(--map-panel-line) !important;
  font-size:17px !important;font-weight:500 !important;
}
.leaflet-control-zoom a:last-child{border-bottom:0 !important}
.leaflet-control-zoom a:hover{background:var(--surface) !important;color:var(--accent) !important}

/* ============================================================== MARKERS */

.m-mk{background:none !important;border:0 !important}

/* -- vehicle: a disc. Channels are separated so none competes:
      glyph = class, fill = state, ring arc = payload, nose = heading. */
.m-veh{position:relative;filter:drop-shadow(var(--map-marker-shadow));transition:opacity var(--t-base) var(--ease)}
.m-veh.is-dim{opacity:.32;filter:none}
.m-veh.is-selected{z-index:700;filter:drop-shadow(0 3px 10px color-mix(in srgb,var(--vc,var(--accent)) 62%,transparent))}
.m-veh__nose{
  transform-box:view-box;transform-origin:center;
  transform:rotate(var(--hd,0deg));
  transition:transform var(--t-marker) linear;
}
.m-veh__halo{opacity:0;transition:opacity var(--t-base) var(--ease)}
.m-veh.is-selected .m-veh__halo{opacity:1}
.m-veh__badge{
  position:absolute;top:-3px;inset-inline-end:-3px;
  min-width:15px;height:15px;padding:0 4px;border-radius:var(--r-full);
  background:var(--crit-fill);color:#fff;
  font:700 9.5px/15px var(--font);text-align:center;
  box-shadow:0 0 0 1.5px var(--map-marker-ring);
}
.m-veh__lbl{
  position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);
  padding:1px 6px;border-radius:var(--r-full);white-space:nowrap;
  background:var(--map-panel);color:var(--text);
  font:600 10px/16px var(--font);font-variant-numeric:tabular-nums;
  border:1px solid var(--map-panel-line);box-shadow:var(--sh-xs);
  direction:ltr;
}
.m-veh.is-dim .m-veh__lbl{display:none}

/* -- place: a teardrop, anchored at the tip */
.m-place{filter:drop-shadow(var(--map-marker-shadow))}
.m-place__lbl{
  position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);
  padding:1px 6px;border-radius:var(--r-xs);white-space:nowrap;
  background:var(--map-panel);color:var(--text);border:1px solid var(--map-panel-line);
  font:550 10px/15px var(--font);
}
.m-map[data-zoom="far"] .m-place__lbl,.m-map[data-zoom="mid"] .m-place__lbl{display:none}

/* -- request / job: a rounded square, so it never reads as a facility */
.m-req{filter:drop-shadow(var(--map-marker-shadow))}
.m-req.is-breached{animation:m-breathe 2.6s var(--ease) infinite}

/* -- incident: a diamond */
.m-inc{filter:drop-shadow(var(--map-marker-shadow))}

/* -- cluster: a bubble carrying a count, not a thing */
.m-clu{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:transform var(--t-fast) var(--ease);
}
.m-clu__b{
  position:relative;width:var(--cs,32px);height:var(--cs,32px);
  display:grid;place-items:center;border-radius:var(--r-full);
  background:var(--cc,var(--accent));
  color:#fff;border:2px solid var(--map-marker-ring);
  box-shadow:var(--map-marker-shadow);
  font:700 12px/1 var(--font);font-variant-numeric:tabular-nums;
}
.m-clu:hover{transform:scale(1.06)}
/* the name sits on its own plate BELOW the disc, where it has room to be
   read — inside the disc it was clipped to a few characters */
.m-clu__sub{
  max-width:126px;padding:1px 6px;border-radius:var(--r-full);
  background:var(--map-panel);border:1px solid var(--map-panel-line);
  color:var(--text);font:600 10px/15px var(--font);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:var(--sh-xs);
}
.m-clu__alert{
  position:absolute;top:-3px;inset-inline-end:-3px;min-width:15px;height:15px;
  border-radius:var(--r-full);background:var(--crit-fill);color:#fff;
  font:700 9px/15px var(--font);text-align:center;padding:0 3px;
  box-shadow:0 0 0 1.5px var(--map-marker-ring);
}

/* -- zone label drawn at a polygon centroid ---------------------------
   Bare text with a text-shadow is legible over the grey canvas and
   illegible over a satellite photo, which is the ground this map opens on.
   The label is a plate, and it carries the zone's colour on its edge so it
   can be matched to the polygon it names. */
.m-zone-lbl{
  background:none !important;border:0 !important;
  display:flex;justify-content:center;pointer-events:none;
}
.m-zone-lbl__x{
  transform:translate(-50%,-50%);
  padding:2px 8px;border-radius:var(--r-full);
  background:var(--map-panel);
  border:1px solid var(--map-panel-line);
  border-inline-start:3px solid var(--zc,var(--accent));
  font:600 10.5px/1.35 var(--font);color:var(--text);
  text-align:center;white-space:nowrap;box-shadow:var(--sh-xs);
}
.m-zone-lbl small{display:block;font-weight:500;font-size:9px;color:var(--text-3)}

/* ============================================================== POPUP
   An operational card: what it is, where, whose, when last heard from,
   one number that matters, one primary action. Not every field it has. */

.leaflet-popup-content-wrapper{
  background:var(--surface);color:var(--text);
  border-radius:14px !important;box-shadow:0 10px 34px rgba(9,30,54,.16) !important;
  border:1px solid var(--line-subtle);padding:0 !important;
}
.leaflet-popup-content{margin:0 !important;width:320px !important;font:var(--ty-body-sm)}
.leaflet-popup-tip{background:var(--surface);box-shadow:none;border:1px solid var(--line)}

.m-pop{display:flex;flex-direction:column;min-width:0;overflow:hidden;border-radius:var(--r-lg)}
.m-pop__rule{height:3px;background:var(--pc,var(--accent));flex:0 0 auto}
/* the close button is an absolutely-positioned Leaflet child at the top end
   of the card, so the head reserves a gutter for it — without it the state
   pill sat underneath the ✕ in both directions */
.m-pop__head{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px 10px;padding-inline-end:34px;
}
.m-pop__ic{
  flex:0 0 auto;width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:color-mix(in srgb,var(--pc,var(--accent)) 13%,transparent);
  color:var(--pc,var(--accent));
}
.m-pop__ic svg{width:17px;height:17px}
.m-pop__id{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.m-pop__id b{font:var(--ty-h3);color:var(--text);font-size:14px}
.m-pop__id span{font:var(--ty-caption);color:var(--text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-pop__state{
  flex:0 0 auto;margin-top:2px;padding:2px 8px;border-radius:var(--r-full);
  font:600 10.5px/1.5 var(--font);white-space:nowrap;
  color:var(--sc,var(--pc));
  background:color-mix(in srgb,var(--sc,var(--pc)) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--sc,var(--pc)) 32%,transparent);
}
.m-pop__body{padding:0 14px 12px;display:flex;flex-direction:column;gap:10px}

/* one meter, read before the digits */
.m-pop__meter{display:flex;flex-direction:column;gap:5px}
.m-pop__meterhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font:var(--ty-caption)}
.m-pop__meterhead span{color:var(--text-3)}
.m-pop__meterhead b{font:var(--ty-metric-sm);font-size:15px;color:var(--text)}
/* "492 / 12,000 kg" is a latin run: in an Arabic card it must not be
   re-ordered into "kg 12,000 / 492" */
.m-pop__metersub{font:var(--ty-caption);color:var(--text-3);unicode-bidi:plaintext;text-align:start}
/* plaintext resolves "492 / 12,000 kg" as a latin run, so its own start edge
   is the left one — in Arabic the line still belongs on the reading edge */
[dir="rtl"] .m-pop__metersub{text-align:right}

/* the open alarm — a button, not a field */
.m-pop__alert{
  display:flex;align-items:center;gap:7px;width:100%;text-align:start;
  padding:7px 9px;border-radius:var(--r-sm);cursor:pointer;
  font:var(--ty-caption);font-weight:550;
  color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn-line);
}
.m-pop__alert svg{flex:0 0 auto;width:14px;height:14px}
.m-pop__alert span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-pop__alert u{flex:0 0 auto;text-decoration:none;opacity:.75;font-variant-numeric:tabular-nums}
.m-pop__alert:hover{filter:brightness(1.03)}
.m-pop__alert.is-critical{color:var(--critical);background:var(--crit-soft);border-color:var(--crit-line)}
.m-pop__alert.is-major{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)}
.m-pop__alert.is-info{color:var(--info);background:var(--info-soft);border-color:var(--info-line)}

.m-pop__kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font:var(--ty-caption)}
.m-pop__kv dt{color:var(--text-3);white-space:nowrap}
/* A contractor's name is longer than the column it is given. It wraps to a
   second line rather than being cut off mid-word — a popup exists to answer
   "what is this", and half an operator's name does not answer it. */
.m-pop__kv dd{
  margin:0;color:var(--text);text-align:end;font-weight:550;
  min-width:0;overflow-wrap:anywhere;unicode-bidi:plaintext;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.m-pop__metric{
  display:flex;align-items:baseline;gap:6px;padding:8px 10px;
  background:var(--surface-sunken);border-radius:var(--r-sm);
}
.m-pop__metric b{font:var(--ty-metric-sm);font-size:17px;color:var(--text)}
.m-pop__metric span{font:var(--ty-caption);color:var(--text-2)}
.m-pop__foot{display:flex;gap:7px;padding:10px 14px;border-top:1px solid var(--line-subtle);background:var(--surface-subtle)}
.m-pop__foot .m-btn{flex:1 1 auto}
/* the head doubles as the way into the record's page */
.m-pop__head--go{cursor:pointer;border-radius:10px 10px 0 0;
  transition:background var(--t-fast) var(--ease)}
.m-pop__head--go:hover{background:var(--surface-sunken)}
.m-pop__head--go:hover .m-pop__id b{color:var(--accent)}
.m-pop__head--go:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.m-pop__stale{font:var(--ty-caption);color:var(--warn);display:flex;align-items:flex-start;gap:5px}
.m-pop__stale svg{flex:0 0 auto;margin-top:2px}

/* the credit sits above the control column, in the map's own panel style */
.m-mapcredit{
  position:absolute;bottom:14px;inset-inline-end:58px;max-width:min(420px,60%);
  padding:7px 10px;border-radius:var(--r-sm);
  background:var(--map-panel);border:1px solid var(--map-panel-line);
  box-shadow:var(--sh-map);font:var(--ty-caption);color:var(--text-2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.m-mapcredit a{color:var(--text-2);text-decoration:underline}
.leaflet-control-attribution{display:none !important}

/* ============================================================== HUD */

/* Above the marker pane (600) so the legend is not drawn through by a truck,
   below the popup pane (700) so it never covers a popup footer. */
.m-map-hud{position:absolute;inset:0;z-index:680;pointer-events:none}
.m-map-hud > *{pointer-events:auto}
.m-hud{
  position:absolute;
  background:var(--map-panel);
  -webkit-backdrop-filter:blur(8px) saturate(1.3);backdrop-filter:blur(8px) saturate(1.3);
  border:1px solid var(--map-panel-line);
  border-radius:var(--r-md);box-shadow:var(--sh-map);
  max-height:calc(100% - 28px);display:flex;flex-direction:column;min-height:0;
}
.m-hud--tl{top:14px;inset-inline-start:14px}
/* the control column lives at the same end of the map, so a tall panel is
   parked clear of it rather than drawn over its buttons */
.m-hud--tr{top:14px;inset-inline-end:62px}
.m-hud--bl{bottom:14px;inset-inline-start:14px}
.m-hud--br{bottom:14px;inset-inline-end:14px}
.m-hud__head{
  display:flex;align-items:center;gap:8px;padding:9px 11px;
  border-bottom:1px solid var(--map-panel-line);font:var(--ty-label);color:var(--text);
}
.m-hud__body{padding:10px 11px;overflow:auto;min-height:0}
.m-hud__body--flush{padding:0}

/* Controls: ONE column at the bottom end of the map, in three groups —
   ground, tools, zoom. They used to be a wide labelled basemap bar plus a
   separate stack, which collided with each other on any map under 900px. */
.m-map-ctl{
  position:absolute;bottom:14px;inset-inline-end:14px;
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
}
.m-map-grp{
  display:flex;flex-direction:column;
  border-radius:var(--r-sm);overflow:hidden;
  background:var(--map-panel);border:1px solid var(--map-panel-line);
  box-shadow:var(--sh-map);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.m-map-grp + .m-map-grp{margin:0}
.m-map-btn{
  width:36px;height:36px;border-radius:0;display:grid;place-items:center;
  background:transparent;border:0;color:var(--text-2);
}
.m-map-grp .m-map-btn + .m-map-btn{border-top:1px solid var(--map-panel-line)}
.m-map-btn:hover{color:var(--accent);background:var(--surface-sunken)}
.m-map-btn[aria-pressed="true"]{background:var(--accent);color:#fff}
.m-map-btn svg{width:18px;height:18px}

/* A SHORT MAP GETS A SHORT COLUMN.
   The column is anchored to the bottom edge and grows upward, so on a map
   shorter than the column the first group is simply cut off by the top of
   the picture. Every control stays — they get smaller, in two steps, sized
   so the whole column clears the shortest map the layout can produce. */
.m-map-host.is-shortmap .m-map-ctl{bottom:10px;inset-inline-end:10px;gap:6px}
.m-map-host.is-shortmap .m-map-btn{width:30px;height:30px}
.m-map-host.is-shortmap .m-map-btn svg{width:16px;height:16px}
.m-map-host.is-tinymap .m-map-ctl{bottom:8px;inset-inline-end:8px;gap:5px}
.m-map-host.is-tinymap .m-map-btn{width:27px;height:27px}
.m-map-host.is-tinymap .m-map-btn svg{width:15px;height:15px}

/* legend */
.m-legend-box{min-width:172px;max-width:230px}
.m-legend-box .m-hud__body{display:flex;flex-direction:column;gap:7px}
.m-legend-row{display:flex;align-items:center;gap:9px;font:var(--ty-caption);color:var(--text-2);min-width:0}
.m-legend-row b{color:var(--text);font-weight:550;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-legend-row__n{color:var(--text-3);font-variant-numeric:tabular-nums}
.m-legend-key{flex:0 0 auto;width:16px;height:16px;display:grid;place-items:center}
.m-legend-key--dot i{display:block;width:9px;height:9px;border-radius:var(--r-full);background:var(--lk,var(--accent))}
.m-legend-key--line i{display:block;width:16px;height:3px;border-radius:2px;background:var(--lk,var(--accent))}
.m-legend-key--clu i{
  display:grid;place-items:center;width:16px;height:16px;border-radius:var(--r-full);
  background:var(--accent);color:#fff;font:700 9px/1 var(--font);font-style:normal;
}
.m-legend-key--area i{display:block;width:14px;height:11px;border-radius:3px;background:color-mix(in srgb,var(--lk,var(--accent)) 26%,transparent);border:1px solid var(--lk,var(--accent))}
.m-legend-scale{display:flex;height:9px;border-radius:var(--r-full);overflow:hidden;direction:ltr}
.m-legend-scale i{flex:1 1 0}
.m-legend-scale__x{display:flex;justify-content:space-between;font:var(--ty-caption);color:var(--text-3);margin-top:4px}

/* layer toggles */
.m-layers{display:flex;flex-direction:column;gap:1px;min-width:196px}
.m-layer{
  display:flex;align-items:center;gap:9px;padding:7px 11px;
  font:var(--ty-body-sm);color:var(--text);text-align:start;width:100%;
}
.m-layer:hover{background:var(--surface-sunken)}
.m-layer__ic{width:16px;height:16px;flex:0 0 auto;color:var(--text-3)}
.m-layer__t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the "what the map cannot do" card — named failure, plain sentence, one fix */
.m-map-diag{
  position:absolute;inset:0;z-index:calc(var(--z-map-hud) + 1);
  display:grid;place-items:center;padding:var(--s-6);background:var(--bg);
}
.m-map-diag__c{
  max-width:400px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:11px;
}
.m-map-diag__c .m-empty__ic{width:52px;height:52px}
.m-map-diag__c b{font:var(--ty-h2)}
.m-map-diag__c p{font:var(--ty-body-sm);color:var(--text-2)}

/* drill-down breadcrumb that lives on the map */
.m-drill{
  display:flex;align-items:center;gap:4px;padding:6px 10px;
  background:var(--map-panel);border:1px solid var(--map-panel-line);
  border-radius:var(--r-full);box-shadow:var(--sh-map);
  font:var(--ty-label-sm);color:var(--text-2);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.m-drill button{padding:2px 6px;border-radius:var(--r-xs);color:var(--text-2)}
.m-drill button:hover{background:var(--surface-sunken);color:var(--text)}
.m-drill b{padding:2px 6px;color:var(--text)}
.m-drill svg{width:12px;height:12px;opacity:.5}
html[dir="rtl"] .m-drill svg{transform:scaleX(-1)}

@media (max-width:900px){
  .m-hud--tr{inset-inline-end:14px;top:auto;bottom:62px;max-height:40%}
  .m-legend-box{display:none}
}

/* A zone name is only legible once the zone is the unit of work. At the
   country and municipality bands the cluster bubbles carry the counts, and
   thirty-five zone names stacked over Doha was an unreadable pile. The
   decision lives here, with the type that has to fit. */
.m-map[data-band="country"] .m-zone-lbl,
[data-band="country"] .m-zone-lbl{display:none !important}

/* The drill breadcrumb and the legend must not collide with a HUD panel
   that opens over them. */
.m-drill{max-width:min(46%,420px);overflow:hidden}
.m-drill b,.m-drill button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* `.m-hud` sets display:flex, which beats the browser's own [hidden] rule at
   equal specificity — so a HUD panel given `hidden` stayed on screen. The
   layer list is the one that mattered: it opened over a third of the map. */
.m-hud[hidden],.m-map-hud [hidden]{display:none !important}

/* THE LEGEND IS A KEY, NOT A PANEL.
   As a bordered card in the corner it took a fifth of the map to restate
   what the marker colours already say. One strip along the bottom edge,
   wrapping, and absent entirely when nothing is drawn. */
/* ONE LINE, THE WIDTH OF THE MAP.
   Capped at 620px the key wrapped onto three lines and became a panel
   again — a white block sitting on the imagery, tall enough to cover a
   municipality. Given the room it actually has, the same content is one
   strip along the bottom edge: the fleet's state counts read left to
   right like a tally, and the two keys that explain a symbol sit after
   them. It is also lighter than the other panels on purpose; a key is
   read once and then lived with, so it should sit ON the picture rather
   than over it. */
.m-legend-strip{
  /* the width exception lives with the rule it excepts, in 9-pages.css */
  inset-inline-end:auto;
  background:color-mix(in srgb,var(--map-panel) 82%,transparent);
}
.m-legend-strip .m-hud__body{
  display:flex;flex-wrap:wrap;align-items:center;gap:3px 13px;padding:6px 11px;
}
.m-legend-strip .m-legend-row{gap:5px;font-size:10.8px}
.m-legend-strip .m-legend-row b{font-weight:550;flex:0 0 auto}
/* the explanations are the quieter half of the key: they are read once */
.m-legend-strip .m-legend-row--note b{font-weight:450;color:var(--text-2)}
.m-legend-strip .m-legend-row--note{opacity:.9}
.m-legend-strip .m-legend-key{width:12px;height:12px}
.m-legend-strip .m-legend-scale{width:100%}
@media (max-width:900px){ .m-legend-strip{display:none} }