/* =========================================================================
   MAP LAYERS (his order, 2026-10-16) - js/ui/maplayers.js draws them.

   Disasters, news hotspots, currencies, energy & mines, each behind its own
   switch above the map. Theme tokens only, so dark and light both follow.
   The market dots keep their five colours and their one meaning; the layers
   stay out of their way:
     - hotspots and sites sit UNDER the dots, so a dot is always pressable;
     - hotspots are blue circles (no market state is blue-filled);
     - a site is a small neutral dot until zoomed in;
     - only the currency tint uses green / red - for money moving, as
       everywhere in the app - and it fills LAND, never a dot.
   ========================================================================= */

/* ---- the switches ---------------------------------------------------------- */
html[data-theme] .map-layers{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 10px; }
html[data-theme] #screen-profile .ml-chip{
  display:inline-flex; align-items:center; gap:7px; margin:0; width:auto;
  padding:6px 12px; border-radius:999px; border:0; cursor:pointer; filter:none;
  background:var(--dk-row); color:var(--dk-muted); box-shadow:none;
  font-family:Inter, system-ui, sans-serif; font-size:13px; font-weight:500;
  letter-spacing:0; text-transform:none; }
html[data-theme] #screen-profile .ml-chip:hover{ background:var(--dk-hover); color:var(--dk-text); filter:none; }
html[data-theme] #screen-profile .ml-chip[aria-pressed="true"]{
  background:var(--dk-text); color:var(--dk-page); font-weight:600; }
html[data-theme] .ml-chip-icon{ font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
  font-size:14px; line-height:1; }
html[data-theme] #screen-profile .ml-chip[aria-pressed="false"] .ml-chip-icon{ opacity:.55; }

/* what each switched-on layer shows, under the colour key */
html[data-theme] .map-layer-note{ display:flex; flex-direction:column; align-items:center; gap:3px;
  margin-top:6px; font-family:Inter, system-ui, sans-serif; font-size:12px; line-height:1.4;
  color:var(--dk-muted); text-align:center; }
html[data-theme] .map-layer-note:empty{ display:none; }

/* ---- on the map ------------------------------------------------------------- */
html[data-theme] .ml-off{ display:none; }
html[data-theme] .ml-back{ fill:var(--dk-panel); stroke:var(--dk-line); stroke-width:1px; }
html[data-theme] .ml-glyph{ font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif;
  pointer-events:none; }
html[data-theme] .ml-disaster, html[data-theme] .ml-site, html[data-theme] .ml-hotspot{ cursor:pointer; }

/* disasters: the ring says how serious (the alert system's own levels) */
html[data-theme] .ml-disaster .ml-back{ stroke-width:2.2px; }
html[data-theme] .ml-disaster.ml-red .ml-back{ stroke:var(--dk-red); }
html[data-theme] .ml-disaster.ml-orange .ml-back{ stroke:var(--dk-amber); }
html[data-theme] .ml-disaster.ml-green .ml-back{ stroke:var(--dk-text-2); }
html[data-theme] .ml-quake{ fill:var(--dk-text); }
html[data-theme] .ml-quake-ring{ fill:none; stroke:var(--dk-text); stroke-width:1.2px; }

/* news hotspots: blue, quiet, under the dots */
html[data-theme] .ml-hotspot circle{ fill:var(--dk-blue); fill-opacity:.16; stroke:var(--dk-blue);
  stroke-opacity:.55; stroke-width:1px; }
html[data-theme] .ml-hotspot:hover circle{ fill-opacity:.3; }

/* sites: a small HOLLOW ring at the whole-world view - the plain city dots are
   solid, so the two cannot be taken for each other - and the icon zoomed in */
html[data-theme] .ml-sites.ml-small .ml-glyph{ display:none; }
html[data-theme] .ml-sites.ml-small .ml-back{ r:3.2px; fill:var(--dk-page); stroke:var(--dk-text);
  stroke-width:1.6px; }
html[data-theme] .ml-site .ml-back{ fill-opacity:.92; }

/* ships: a small count beside a sea passage; with Energy & mines off, the
   passages alone stay on the map so their counts still have a place */
html[data-theme] .ml-shipcount rect{ fill:var(--dk-text); }
html[data-theme] .ml-shipcount text{ fill:var(--dk-page); font-family:Inter, system-ui, sans-serif;
  font-weight:700; pointer-events:none; }
html[data-theme] .ml-sites.ml-only-passages .ml-site:not(.passage){ display:none; }
/* ...and with Ships off the passages go: the anchors belong to Ships alone
   (his order, 2026-10-17) */
html[data-theme] .ml-sites.ml-no-passages .ml-site.passage{ display:none; }

/* currencies: the land itself, tinted by how far the currency moved */
html[data-theme] .fm-country.ml-cur-up{ fill:color-mix(in srgb, var(--dk-green) var(--mag, 30%), var(--dk-map-land)); }
html[data-theme] .fm-country.ml-cur-down{ fill:color-mix(in srgb, var(--dk-red) var(--mag, 30%), var(--dk-map-land)); }
html[data-theme] .fm-country.ml-cur-base{ fill:color-mix(in srgb, var(--dk-text-2) 22%, var(--dk-map-land)); }
html[data-theme] .fm-country.ml-cur{ cursor:pointer; }

/* ---- the panel ---------------------------------------------------------------- */
html[data-theme] .map-info{ position:absolute; top:12px; left:12px; z-index:5;
  width:272px; max-height:calc(100% - 24px); overflow-y:auto; box-sizing:border-box;
  background:var(--dk-panel); box-shadow:var(--dk-shadow), 0 6px 24px rgba(0,0,0,.28);
  border-radius:10px; padding:14px; font-family:Inter, system-ui, sans-serif; color:var(--dk-text); }
html[data-theme] .globe-wrap > .map-info{ position:relative; top:auto; left:auto; width:100%; max-height:none; }
html[data-theme] .mi-close{ position:absolute; top:8px; right:12px; cursor:pointer; color:var(--dk-muted);
  font-size:18px; line-height:1; }
html[data-theme] .mi-close:hover{ color:var(--dk-text); }
html[data-theme] .mi-kicker{ font-size:12px; color:var(--dk-muted); padding-right:20px; margin-bottom:2px; }
html[data-theme] .mi-title{ font-size:15px; font-weight:600; margin-bottom:8px; padding-right:20px; line-height:1.3; }
html[data-theme] .mi-row{ display:flex; justify-content:space-between; gap:12px; padding:4px 0;
  border-top:1px solid var(--dk-line); font-size:12px; }
html[data-theme] .mi-k{ color:var(--dk-muted); flex:none; }
html[data-theme] .mi-v{ text-align:right; font-variant-numeric:tabular-nums; }
html[data-theme] .mi-why{ font-size:12.5px; line-height:1.45; margin-top:8px; }
html[data-theme] .mi-sub{ font-size:12px; font-weight:600; margin:12px 0 4px; }
html[data-theme] .mi-sub.mi-warn{ color:var(--dk-red); }
html[data-theme] .mi-quiet, html[data-theme] .mi-empty{ font-size:12px; color:var(--dk-muted); margin-top:8px; line-height:1.4; }
html[data-theme] .mi-list{ margin:0; padding-left:16px; font-size:12px; line-height:1.5; }
html[data-theme] .mi-link{ display:inline-block; margin-top:10px; font-size:12.5px; font-weight:600;
  color:var(--dk-blue); text-decoration:none; }
html[data-theme] .mi-link:hover{ text-decoration:underline; }
html[data-theme] .mi-news{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--dk-muted); }
html[data-theme] .mi-story{ display:flex; flex-direction:column; gap:2px; text-decoration:none;
  padding:6px 0; border-top:1px solid var(--dk-line); }
html[data-theme] .mi-story-title{ color:var(--dk-text); font-size:12.5px; line-height:1.35; }
html[data-theme] a.mi-story:hover .mi-story-title{ text-decoration:underline; }
html[data-theme] .mi-story-src{ color:var(--dk-muted); font-size:11.5px; }

@media (max-width:600px){
  html[data-theme] #screen-profile .ml-chip{ padding:6px 10px; font-size:12.5px; }
}

/* ---- the switches' pop-ups (his order, 2026-10-17) ---------------------------
   Disasters, Energy & mines and Ships each open a small pop-up under their
   switch: show the layer or not, each of its kinds on or off, All / None, and
   a close button. It floats over the map; tokens only, so both modes follow. */
html[data-theme] .map-layers{ position:relative; }
html[data-theme] .ml-chip-more{ font-size:10px; opacity:.6; margin-left:-2px; }
html[data-theme] .ml-pop{ position:absolute; z-index:40; width:270px; max-width:calc(100% - 4px);
  background:var(--dk-panel); border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.35), var(--dk-shadow, 0 0 0 1px var(--dk-line));
  padding:10px 12px 10px; font-family:Inter, system-ui, sans-serif; color:var(--dk-text); }
html[data-theme] .ml-pop-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
html[data-theme] .ml-pop-title{ font-size:14px; font-weight:600; }
html[data-theme] #screen-profile .ml-pop-close{ width:28px; height:28px; margin:0; padding:0; border:0; border-radius:8px;
  background:var(--dk-row); color:var(--dk-text); font-size:18px; line-height:1; cursor:pointer; box-shadow:none; filter:none; }
html[data-theme] #screen-profile .ml-pop-close:hover{ background:var(--dk-hover); }
html[data-theme] .ml-pop-row{ display:flex; align-items:center; gap:9px; padding:6px 2px; font-size:13px; cursor:pointer;
  color:var(--dk-text); text-transform:none; letter-spacing:0; }
html[data-theme] .ml-pop-row input{ margin:0; width:16px; height:16px; flex:0 0 auto; cursor:pointer; }
html[data-theme] .ml-pop-master{ font-weight:600; border-bottom:1px solid var(--dk-line); padding-bottom:8px; margin-bottom:4px; }
html[data-theme] .ml-pop.ml-pop-off .ml-pop-list{ opacity:.5; }
html[data-theme] .ml-pop-dot{ width:11px; height:11px; border-radius:50%; background:var(--kc); flex:0 0 auto;
  box-shadow:0 0 0 1.5px var(--dk-page); }
html[data-theme] .ml-pop-icon{ width:16px; text-align:center; flex:0 0 auto;
  font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif; font-size:14px; }
html[data-theme] .ml-pop-foot{ display:flex; gap:8px; margin-top:6px; padding-top:8px; border-top:1px solid var(--dk-line); }
html[data-theme] #screen-profile .ml-pop-quick{ margin:0; width:auto; padding:4px 12px; border:0; border-radius:999px;
  background:var(--dk-row); color:var(--dk-text); font-size:12px; font-weight:500; cursor:pointer; box-shadow:none; filter:none;
  text-transform:none; letter-spacing:0; }
html[data-theme] #screen-profile .ml-pop-quick:hover{ background:var(--dk-hover); }

/* a ship in a storm's panel is a row that can be pressed */
html[data-theme] #screen-profile .mi-ship{ display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  width:100%; margin:0; padding:6px 0; border:0; border-top:1px solid var(--dk-line); background:none; box-shadow:none; filter:none;
  text-align:left; cursor:pointer; font:inherit; text-transform:none; letter-spacing:0; }
html[data-theme] #screen-profile .mi-ship:hover .mi-story-title{ text-decoration:underline; }

/* a ship's photo (Wikimedia Commons), at the top of its panel */
html[data-theme] .mi-photo{ margin:8px 0 6px; }
html[data-theme] .mi-photo img{ display:block; width:100%; max-height:170px; object-fit:cover; border-radius:8px;
  background:var(--dk-row); }
html[data-theme] .mi-photo-credit{ margin-top:4px; font-size:11px; color:var(--dk-muted); }
html[data-theme] .mi-photo-credit a{ color:var(--dk-muted); }
html[data-theme] .mi-photo-wait{ font-size:12px; color:var(--dk-muted); padding:6px 0; }
html[data-theme] .mi-photo-none{ margin:4px 0; }

/* a glowing country's big events (flatmap.js fmShowCountryEvents, 2026-10-18) */
html[data-theme] .mi-econ{ padding:7px 0; border-top:1px solid var(--dk-line); }
html[data-theme] .mi-econ-what{ font-size:13px; font-weight:600; line-height:1.35; }
html[data-theme] .mi-econ-when{ font-size:12px; color:var(--dk-amber); margin-top:2px; font-variant-numeric:tabular-nums; }
html[data-theme] .mi-econ-fig{ font-size:12px; color:var(--dk-muted); margin-top:2px; font-variant-numeric:tabular-nums; }

/* ---- what the map remembers (2026-10-30) ---------------------------------- */
/* a ship's trail: a thin line in the page's own text colour, the same width at
   every zoom, with a hollow ring where it starts */
html[data-theme] .ml-trail{ pointer-events:none; }
html[data-theme] .ml-trail-line{ fill:none; stroke:var(--dk-text); stroke-opacity:.85; stroke-width:1.8px;
  stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
html[data-theme] .ml-trail-start circle{ fill:var(--dk-page); stroke:var(--dk-text); stroke-width:1.8px; }
html[data-theme] .ml-trail-start{ pointer-events:all; }
html[data-theme] .mi-trail-btns{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 4px; }
html[data-theme] #screen-profile .mi-trail-btn{ margin:0; width:auto; padding:5px 12px; border:0; border-radius:999px;
  background:var(--dk-row); color:var(--dk-text); font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  box-shadow:none; filter:none; text-transform:none; letter-spacing:0; }
html[data-theme] #screen-profile .mi-trail-btn:hover{ background:var(--dk-hover); }
html[data-theme] #screen-profile .mi-trail-btn[aria-pressed="true"]{ background:var(--dk-text); color:var(--dk-page); }
html[data-theme] .mi-tight{ margin-top:4px; }

/* a news hotspot whose coverage is rising wears a stronger ring */
html[data-theme] .ml-hotspot.ml-rising circle{ stroke-opacity:1; stroke-width:2px; fill-opacity:.24; }
html[data-theme] .ml-hotspot.ml-calming circle{ stroke-dasharray:3 2; }
html[data-theme] .mi-trend{ font-size:12.5px; font-weight:600; margin-top:2px; }

/* the currency switch's period choice */
html[data-theme] .ml-pop-hint{ font-size:12px; color:var(--dk-muted); padding:2px 2px 4px; line-height:1.4; }

/* one bar a day (a passage's ships, a country's articles) */
html[data-theme] .mi-week{ font-size:12px; color:var(--dk-muted); }
html[data-theme] .mi-chart-title{ font-size:12px; color:var(--dk-muted); margin:2px 0 4px; }
html[data-theme] .mi-bars{ display:flex; align-items:stretch; gap:4px; height:92px; margin:6px 0 8px; }
html[data-theme] .mi-bar-col{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; min-width:0; cursor:default; }
html[data-theme] .mi-bar-num{ font-size:10.5px; height:14px; line-height:14px; color:var(--dk-text);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
html[data-theme] .mi-bar-track{ flex:1 1 auto; width:100%; display:flex; align-items:flex-end; justify-content:center; }
html[data-theme] .mi-bar{ width:72%; max-width:22px; background:var(--dk-blue); border-radius:4px 4px 0 0; }
html[data-theme] .mi-bar-col:hover .mi-bar{ filter:brightness(1.18); }
html[data-theme] .mi-bar-col.mi-today .mi-bar{ opacity:.6; }
html[data-theme] .mi-bar-col.mi-weak .mi-bar{ opacity:.35; }
html[data-theme] .mi-bar-day{ font-size:10.5px; height:15px; line-height:15px; color:var(--dk-muted); white-space:nowrap; }

/* ---- the six added on 2026-10-30 ------------------------------------------ */
/* storm paths: where it went (solid), where it is forecast to go (dashed) */
html[data-theme] .ml-paths{ pointer-events:none; }
html[data-theme] .ml-path-past, html[data-theme] .ml-path-future{ fill:none; stroke:var(--dk-text);
  stroke-width:1.6px; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; }
html[data-theme] .ml-path-past{ stroke-opacity:.55; }
html[data-theme] .ml-path-future{ stroke-opacity:.9; stroke-dasharray:5 4; }
html[data-theme] .ml-path-dot{ pointer-events:all; cursor:default; }
html[data-theme] .ml-path-dot circle{ fill:var(--dk-page); stroke:var(--dk-text); stroke-width:1.4px; }
html[data-theme] .mi-warn-li{ font-weight:600; }

/* conflict: crossed swords on a quiet ring, a stronger ring when rising */
html[data-theme] .ml-conf{ cursor:pointer; }
html[data-theme] .ml-conf .ml-back{ stroke:var(--dk-text-2); stroke-width:1.4px; }
html[data-theme] .ml-conf.ml-rising .ml-back{ stroke:var(--dk-text); stroke-width:2.4px; }

/* the rewind bar, under the switches */
html[data-theme] .ml-rw{ margin:2px 0 10px; padding:10px 12px; border-radius:10px; background:var(--dk-panel);
  box-shadow:var(--dk-shadow); }
html[data-theme] .ml-rw[hidden]{ display:none; }
html[data-theme] .ml-rw-top{ display:flex; align-items:center; gap:10px; }
html[data-theme] .ml-rw-slider{ flex:1 1 auto; min-width:0; accent-color:var(--dk-text); }
html[data-theme] #screen-profile .ml-rw-btn{ margin:0; width:auto; padding:6px 12px; border:0; border-radius:999px;
  background:var(--dk-row); color:var(--dk-text); font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  box-shadow:none; filter:none; text-transform:none; letter-spacing:0; flex:0 0 auto; }
html[data-theme] #screen-profile .ml-rw-btn:hover{ background:var(--dk-hover); }
html[data-theme] #screen-profile .ml-rw-play{ min-width:40px; }
html[data-theme] .ml-rw-under{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin-top:6px; }
html[data-theme] .ml-rw-when{ font-size:14px; font-weight:600; font-variant-numeric:tabular-nums; }
html[data-theme] .ml-rw-note{ font-size:12px; color:var(--dk-muted); }