/* earthwatch.css - the map as an "Earth watch" (his order, 2026-10-30).
   Every rule needs .ew-on, which js/ui/earthwatch.js puts on the map's card
   only while EARTH_WATCH_ON is true - switched off, nothing here applies and
   the map is what it was. The app's own colour tokens only, so dark and light
   both follow. Three colours carry the warning levels: red act now, amber
   watch, grey for information. */

/* the heading over the map */
html[data-theme] .ew-on .ew-head{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; margin:0 0 10px; }
html[data-theme] .ew-on .ew-title{ font-size:16px; font-weight:600; letter-spacing:.01em; color:var(--dk-text); }
html[data-theme] .ew-on .ew-live{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--dk-text-2);
  padding:2px 9px; border-radius:999px; background:var(--dk-row); }
html[data-theme] .ew-on .ew-live-dot{ width:7px; height:7px; border-radius:50%; background:var(--dk-text);
  animation:ewBlink 2s ease-in-out infinite; }
html[data-theme] .ew-on .ew-clock{ margin-left:auto; font-size:12.5px; color:var(--dk-muted); font-variant-numeric:tabular-nums; }
html[data-theme] .ew-on .ew-count{ font-size:12px; font-weight:600; padding:3px 10px; border-radius:999px;
  background:var(--dk-row); color:var(--dk-text-2); }
html[data-theme] .ew-on .ew-count.ew-count-watch{ background:var(--dk-amber-bg); color:var(--dk-amber); }
html[data-theme] .ew-on .ew-count.ew-count-now{ background:var(--dk-red-bg); color:var(--dk-red); }
@keyframes ewBlink{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* the switches read in plain words */
html[data-theme] .ew-on .ml-chip-icon{ display:none; }

/* the old picture marks give way to the warning marks (they come back while
   rewinding, when the warnings - which are about now - are not shown) */
html[data-theme] .ew-on:not(.ew-rw) .ml-dis,
html[data-theme] .ew-on:not(.ew-rw) .ml-hot,
html[data-theme] .ew-on .ml-conflict{ display:none; }
html[data-theme] .ew-on.ew-rw .ew-marks{ display:none; }
/* sites: a small quiet ring, no picture */
html[data-theme] .ew-on .ml-site .ml-glyph{ display:none; }
html[data-theme] .ew-on .ml-site .ml-back{ r:3.4px; fill:var(--dk-page); stroke:var(--dk-text-2); stroke-width:1.5px; }

/* the warning marks: one shape, three colours */
html[data-theme] .ew-on .ew-mark{ cursor:pointer; }
html[data-theme] .ew-on .ew-hit{ fill:transparent; stroke:none; }
html[data-theme] .ew-on .ew-tri{ stroke-width:1.8px; stroke-linejoin:round; fill:var(--dk-page); }
html[data-theme] .ew-on .ew-now .ew-tri{ stroke:var(--dk-red); }
html[data-theme] .ew-on .ew-watch .ew-tri{ stroke:var(--dk-amber); }
html[data-theme] .ew-on .ew-info .ew-tri{ stroke:var(--dk-text-2); }
html[data-theme] .ew-on .ew-now .ew-dot{ fill:var(--dk-red); }
html[data-theme] .ew-on .ew-watch .ew-dot{ fill:var(--dk-amber); }
html[data-theme] .ew-on .ew-info .ew-dot{ fill:var(--dk-text-2); }
html[data-theme] .ew-on .ew-mark.ew-sel .ew-tri{ stroke-width:2.8px; }
html[data-theme] .ew-on .ew-pulse{ fill:none; stroke:var(--dk-red); stroke-width:1.5px; transform-origin:0 0;
  animation:ewPulse 1.8s ease-out infinite; }
@keyframes ewPulse{ 0%{ transform:scale(.8); opacity:.9; } 100%{ transform:scale(2.2); opacity:0; } }
@media (prefers-reduced-motion: reduce){
  html[data-theme] .ew-on .ew-pulse, html[data-theme] .ew-on .ew-live-dot{ animation:none; }
}

/* the map and its warnings side by side; under each other on a phone */
html[data-theme] .ew-on .globe-wrap.ew-grid{ display:grid; grid-template-columns:minmax(0,1.75fr) minmax(250px,1fr);
  gap:12px; align-items:start; }
html[data-theme] .ew-on .ew-grid > .globe-stage{ grid-column:1; grid-row:1; }
html[data-theme] .ew-on .ew-grid > .ew-list{ grid-column:2; grid-row:1; }
html[data-theme] .ew-on .ew-grid > .map-legend,
html[data-theme] .ew-on .ew-grid > .map-layer-note,
html[data-theme] .ew-on .ew-grid > .map-info{ grid-column:1 / -1; }
@media (max-width:900px){
  html[data-theme] .ew-on .globe-wrap.ew-grid{ grid-template-columns:minmax(0,1fr); }
  html[data-theme] .ew-on .ew-grid > .ew-list{ grid-column:1; grid-row:auto; }
}

/* the warnings list */
html[data-theme] .ew-on .ew-list{ display:flex; flex-direction:column; gap:8px; overflow-y:auto; min-width:0;
  scrollbar-width:thin; }
html[data-theme] .ew-on .ew-list-head{ display:flex; flex-direction:column; gap:6px; padding:2px 2px 4px; }
html[data-theme] .ew-on .ew-list-title{ font-size:12.5px; color:var(--dk-muted); }
html[data-theme] .ew-on .ew-key{ display:flex; flex-wrap:wrap; gap:4px 12px; font-size:11.5px; color:var(--dk-text-2); }
html[data-theme] .ew-on .ew-key-item{ display:inline-flex; align-items:center; gap:5px; }
html[data-theme] .ew-on .ew-key-tri{ width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
  border-bottom:9px solid var(--dk-text-2); flex:0 0 auto; display:inline-block; }
html[data-theme] .ew-on .ew-now .ew-key-tri{ border-bottom-color:var(--dk-red); }
html[data-theme] .ew-on .ew-watch .ew-key-tri{ border-bottom-color:var(--dk-amber); }
html[data-theme] .ew-on .ew-info .ew-key-tri{ border-bottom-color:var(--dk-text-2); }
html[data-theme] #screen-profile .ew-on .ew-row{ display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  width:100%; margin:0; padding:9px 11px; border:0; border-radius:8px; background:var(--dk-row);
  box-shadow:none; filter:none; text-align:left; cursor:pointer; font:inherit; text-transform:none; letter-spacing:0;
  color:var(--dk-text); }
html[data-theme] #screen-profile .ew-on .ew-row:hover{ background:var(--dk-hover); }
html[data-theme] #screen-profile .ew-on .ew-row.ew-sel{ box-shadow:inset 0 0 0 1.5px var(--dk-text-2); }
html[data-theme] .ew-on .ew-row-level{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  color:var(--dk-text-2); }
html[data-theme] .ew-on .ew-row.ew-now .ew-row-level{ color:var(--dk-red); }
html[data-theme] .ew-on .ew-row.ew-watch .ew-row-level{ color:var(--dk-amber); }
html[data-theme] .ew-on .ew-row-title{ font-size:13px; line-height:1.35; }
html[data-theme] .ew-on .ew-row-markets{ font-size:11.5px; color:var(--dk-muted); }
html[data-theme] .ew-on .ew-empty{ font-size:12.5px; color:var(--dk-muted); line-height:1.45; padding:10px 11px;
  border-radius:8px; background:var(--dk-row); }
html[data-theme] .ew-on .ew-foot{ font-size:11px; color:var(--dk-muted); line-height:1.4; padding:2px 2px 4px; }

/* the simpler list (2026-10-31): "Alerts", a coloured dot and a level word,
   "All calm" when there is nothing */
html[data-theme] .ew-on .ew-alerts-title{ font-size:15px; font-weight:600; color:var(--dk-text); padding:0 2px 2px; }
html[data-theme] .ew-on .ew-level-dot{ width:8px; height:8px; border-radius:50%; background:var(--dk-text-2);
  display:inline-block; flex:0 0 auto; }
html[data-theme] .ew-on .ew-now .ew-level-dot{ background:var(--dk-red); }
html[data-theme] .ew-on .ew-watch .ew-level-dot{ background:var(--dk-amber); }
html[data-theme] .ew-on .ew-row-level{ font-size:12px; }
html[data-theme] .ew-on .ew-row-markets{ font-size:12px; color:var(--dk-text-2); }
html[data-theme] .ew-on .ew-calm{ padding:16px 12px; border-radius:8px; background:var(--dk-row); }
html[data-theme] .ew-on .ew-calm-title{ font-size:15px; font-weight:600; color:var(--dk-text); }
html[data-theme] .ew-on .ew-calm-sub{ font-size:12.5px; color:var(--dk-muted); margin-top:3px; }

/* full screen (2026-10-31): the whole map box fills the screen. The map and
   its alerts first; the events bar, the title and the market sessions under
   them (the box scrolls). */
html[data-theme] .ew-on .ew-full-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: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] .ew-on .ew-full-btn:hover{ background:var(--dk-hover); }
html.ew-noscroll, html.ew-noscroll body{ overflow:hidden; }
/* the profile screen is its own layer, under the news bar: while the map is full
   screen it is lifted above it, so nothing from the page sits on the map */
html.ew-noscroll #screen-profile{ position:relative; z-index:9500; }
html[data-theme] #screen-profile .pcard.globe-card.ew-on.ew-full{ position:fixed; inset:0; z-index:9000; margin:0; border-radius:0;
  padding:12px 16px 16px; background:var(--dk-page); overflow-y:auto; display:flex; flex-direction:column; }
html[data-theme] .ew-on.ew-full > .ew-head{ order:1; }
html[data-theme] .ew-on.ew-full > .map-layers{ order:2; }
html[data-theme] .ew-on.ew-full > .ml-rw{ order:3; }
html[data-theme] .ew-on.ew-full > .globe-wrap{ order:4; }
html[data-theme] .ew-on.ew-full > .map-eventbar{ order:5; margin-top:12px; }
html[data-theme] .ew-on.ew-full > .pcard-title{ order:6; margin-top:14px; }
html[data-theme] .ew-on.ew-full > .map-sessions{ order:7; }
html[data-theme] .ew-on.ew-full > .map-events{ order:8; }
html[data-theme] .ew-on.ew-full .ew-grid > .globe-stage{ aspect-ratio:auto; height:calc(100vh - 150px); min-height:320px;
  max-width:none; }
@media (max-width:900px){
  html[data-theme] .ew-on.ew-full .ew-grid > .globe-stage{ height:62vh; min-height:260px; }
}

/* the button on the map, and full screen = the buttons and the map only
   (his order, 2026-10-31) */
html[data-theme] .ew-on .ew-clock-row{ margin-left:auto; align-self:center; padding:0 2px; white-space:nowrap; }
html[data-theme] .ew-on .globe-stage > .ew-full-btn{ position:absolute; right:10px; bottom:10px; z-index:30;
  background:var(--dk-panel); box-shadow:var(--dk-shadow), 0 2px 10px rgba(0,0,0,.25); }
html[data-theme] .ew-on .globe-stage > .ew-full-btn:hover{ background:var(--dk-hover); }
html[data-theme] .ew-on.ew-full > .ew-head,
html[data-theme] .ew-on.ew-full > .map-eventbar,
html[data-theme] .ew-on.ew-full > .pcard-title,
html[data-theme] .ew-on.ew-full > .map-sessions,
html[data-theme] .ew-on.ew-full > .map-events,
html[data-theme] .ew-on.ew-full .ew-grid > .ew-list,
html[data-theme] .ew-on.ew-full .ew-grid > .map-legend,
html[data-theme] .ew-on.ew-full .ew-grid > .map-layer-note{ display:none; }
html[data-theme] .ew-on.ew-full .globe-wrap.ew-grid{ grid-template-columns:minmax(0,1fr); }
html[data-theme] .ew-on.ew-full .ew-grid > .globe-stage{ height:calc(100vh - 76px); }
@media (max-width:900px){
  html[data-theme] .ew-on.ew-full .ew-grid > .globe-stage{ height:calc(100vh - 120px); min-height:260px; }
}