/* ========================================================================= LIVE GLOBAL MARKET ACTIVITY on the profile's map (his order, 2026-10-14) "Show more than whether a market is open or closed": five states, a live countdown, how busy each market is, and the trading session the world is in. The facts come from js/data/marketclock.js; js/ui/flatmap.js draws them. Loaded after theme-desk.css, so the five state colours below replace the two (green / red) the map had. Every colour is a theme token, so dark and light both follow. THE FIVE STATES, one colour each, the same everywhere on the map: open green trading now pre-market amber the exchange's own phase before the open after hours blue ... and after the close closed red nothing is trading holiday grey shut for the day - a strong neutral, so it is read neither as an ordinary closed market nor as one of the plain city dots HOW BUSY is shown twice, so it does not depend on motion: a pulse that beats faster and wider the busier the market, and a fuller, bigger dot. With "reduce motion" switched on in the system the pulse is still, and the dot alone carries it. ========================================================================= */ /* ---- the markers ---------------------------------------------------------- */ html[data-theme] .fm-marker.open{ fill:var(--dk-green); stroke:var(--dk-green); fill-opacity:calc(.2 + var(--lv, .4) * .7); } html[data-theme] .fm-marker.pre{ fill:var(--dk-amber); stroke:var(--dk-amber); fill-opacity:.32; } html[data-theme] .fm-marker.post{ fill:var(--dk-blue); stroke:var(--dk-blue); fill-opacity:.32; } html[data-theme] .fm-marker.closed{ fill:var(--dk-red); stroke:var(--dk-red); fill-opacity:.22; } /* a holiday is a strong neutral, not a faint one: at the whole-world zoom a pale grey ring was taken for one of the plain city dots */ html[data-theme] .fm-marker.holiday{ fill:var(--dk-text-2); stroke:var(--dk-text-2); fill-opacity:.25; stroke-dasharray:2.5 2; } html[data-theme] .fm-marker.open + .fm-marker-core{ fill:var(--dk-green); } html[data-theme] .fm-marker.pre + .fm-marker-core{ fill:var(--dk-amber); } html[data-theme] .fm-marker.post + .fm-marker-core{ fill:var(--dk-blue); } html[data-theme] .fm-marker.closed + .fm-marker-core{ fill:var(--dk-red); } html[data-theme] .fm-marker.holiday + .fm-marker-core{ fill:var(--dk-text-2); } html[data-theme] .fm-marker.selected{ stroke-width:2.5px; } /* the pulse: a ring that grows out of the marker and fades. --lv is how busy the market is, 0 to 1 - it sets both how fast and how far. */ html[data-theme] .fm-pulse{ fill:none; stroke:var(--dk-green); stroke-width:1.5px; vector-effect:non-scaling-stroke; opacity:0; pointer-events:none; transform-box:fill-box; transform-origin:center; } html[data-theme] .fm-pulse.pre{ stroke:var(--dk-amber); } html[data-theme] .fm-pulse.post{ stroke:var(--dk-blue); } html[data-theme] .fm-pulse.on{ animation:fmPulse calc(3.4s - var(--lv, .3) * 2.3s) ease-out infinite; } @keyframes fmPulse{ 0%{ transform:scale(1); opacity:calc(.3 + var(--lv, .3) * .55); } 100%{ transform:scale(calc(1.7 + var(--lv, .3) * 2.5)); opacity:0; } } /* ---- the trading session the world is in ---------------------------------- */ html[data-theme] .map-sessions{ display:flex; flex-direction:column; gap:10px; margin:0 0 12px; } html[data-theme] .ms-headline{ font-family:Inter, system-ui, sans-serif; font-size:15px; font-weight:600; color:var(--dk-text); font-variant-numeric:tabular-nums; min-height:20px; } html[data-theme] .ms-chips{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; } html[data-theme] #screen-profile .ms-chip{ position:relative; overflow:hidden; display:flex; flex-direction:column; gap:4px; text-align:left; cursor:pointer; margin:0; width:auto; background:var(--dk-panel); box-shadow:var(--dk-shadow); border:0; border-radius:8px; padding:10px 12px 13px; color:var(--dk-text); font-family:Inter, system-ui, sans-serif; font-variant-numeric:tabular-nums; } html[data-theme] #screen-profile .ms-chip:hover{ background:var(--dk-row); } html[data-theme] .ms-top{ display:flex; align-items:center; gap:8px; min-width:0; } html[data-theme] .ms-dot{ flex:none; width:8px; height:8px; border-radius:50%; background:var(--dk-red); } html[data-theme] .ms-chip.open .ms-dot{ background:var(--dk-green); animation:msBeat 2s ease-out infinite; } html[data-theme] .ms-chip.pre .ms-dot{ background:var(--dk-amber); } html[data-theme] .ms-name{ font-size:14px; font-weight:600; color:var(--dk-text); } html[data-theme] .ms-state{ margin-left:auto; font-size:12px; color:var(--dk-muted); white-space:nowrap; } html[data-theme] .ms-chip.open .ms-state{ color:var(--dk-green); } html[data-theme] .ms-chip.pre .ms-state{ color:var(--dk-amber); } html[data-theme] .ms-line{ font-size:12px; color:var(--dk-muted); min-height:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* how far through the session it is */ html[data-theme] .ms-bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--dk-row); } html[data-theme] .ms-bar i{ display:block; height:100%; width:0; background:var(--dk-green); } html[data-theme] .ms-chip:not(.open) .ms-bar{ background:transparent; } @keyframes msBeat{ 0%{ box-shadow:0 0 0 0 var(--dk-green-line); } 100%{ box-shadow:0 0 0 7px rgba(0,0,0,0); } } /* ---- what the colours mean ------------------------------------------------- */ html[data-theme] .map-legend{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px 16px; font-family:Inter, system-ui, sans-serif; font-size:12px; color:var(--dk-muted); } html[data-theme] .map-legend span{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; } html[data-theme] .ml-dot{ width:8px; height:8px; border-radius:50%; background:var(--dk-red); } html[data-theme] .ml-dot.open{ background:var(--dk-green); } html[data-theme] .ml-dot.pre{ background:var(--dk-amber); } html[data-theme] .ml-dot.post{ background:var(--dk-blue); } html[data-theme] .ml-dot.holiday{ background:var(--dk-text-2); } html[data-theme] .map-legend .ml-note{ flex-basis:100%; justify-content:center; white-space:normal; text-align:center; } /* ---- the panel of the market he pressed ----------------------------------- */ html[data-theme] .globe-panel{ width:256px; max-height:calc(100% - 24px); overflow-y:auto; box-sizing:border-box; background:var(--dk-panel); border:0; box-shadow:var(--dk-shadow), 0 6px 24px rgba(0,0,0,.28); border-radius:10px; padding:14px; backdrop-filter:none; font-family:Inter, system-ui, sans-serif; color:var(--dk-text); } html[data-theme] .gp-city{ font-size:14px; font-weight:600; margin-bottom:8px; padding-right:18px; } html[data-theme] .gp-status{ display:flex; align-items:center; gap:7px; font-family:Inter, system-ui, sans-serif; font-size:12px; font-weight:600; margin-bottom:2px; } html[data-theme] .gp-status::before{ content:""; flex:none; width:8px; height:8px; border-radius:50%; background:currentColor; } html[data-theme] .gp-status.open{ color:var(--dk-green); } html[data-theme] .gp-status.pre{ color:var(--dk-amber); } html[data-theme] .gp-status.post{ color:var(--dk-blue); } html[data-theme] .gp-status.closed{ color:var(--dk-red); } html[data-theme] .gp-status.holiday{ color:var(--dk-text-2); } /* the countdown - the one number in the panel that moves */ html[data-theme] .gp-count{ display:flex; flex-direction:column; margin:8px 0 10px; } html[data-theme] .gp-count-k{ font-size:12px; color:var(--dk-muted); } html[data-theme] .gp-count-v{ font-size:22px; font-weight:600; line-height:1.2; color:var(--dk-text); font-variant-numeric:tabular-nums; white-space:nowrap; } html[data-theme] .gp-hours{ font-family:Inter, system-ui, sans-serif; font-size:12px; color:var(--dk-text); line-height:1.35; opacity:1; } html[data-theme] .gp-row{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-top:1px solid var(--dk-line); } html[data-theme] .gp-k{ color:var(--dk-muted); flex:none; } html[data-theme] .gp-v{ text-align:right; font-variant-numeric:tabular-nums; } /* how busy: five bars and a sentence that says whether it was measured */ html[data-theme] .gp-activity{ margin-top:10px; padding-top:10px; border-top:1px solid var(--dk-line); } html[data-theme] .gp-meter{ display:flex; gap:3px; margin-bottom:6px; } html[data-theme] .gp-meter i{ flex:1; height:5px; border-radius:2px; background:var(--dk-row); } html[data-theme] .gp-activity.open .gp-meter i.on{ background:var(--dk-green); } html[data-theme] .gp-activity.pre .gp-meter i.on{ background:var(--dk-amber); } html[data-theme] .gp-activity.post .gp-meter i.on{ background:var(--dk-blue); } html[data-theme] .gp-act-words{ font-size:12px; color:var(--dk-muted); line-height:1.4; } html[data-theme] .gp-activity.measured .gp-act-words{ color:var(--dk-text); } html[data-theme] .gp-note{ margin-top:10px; font-size:11.5px; line-height:1.4; color:var(--dk-amber); background:var(--dk-amber-bg); border-radius:6px; padding:7px 9px; } html[data-theme] #screen-profile .gp-trade{ margin-top:12px; width:100%; background:var(--dk-row); color:var(--dk-text); border:0; border-radius:6px; padding:9px; font-family:Inter, system-ui, sans-serif; font-size:13px; font-weight:600; cursor:pointer; filter:none; } html[data-theme] #screen-profile .gp-trade:hover{ background:var(--dk-hover); filter:none; } html[data-theme] .gp-close{ top:10px; right:12px; color:var(--dk-muted); font-size:18px; } html[data-theme] .gp-close:hover{ color:var(--dk-text); } /* ---- the big economic events (his order, 2026-10-15) ------------------------ A "!" badge beside a market's dot while its country has a big event within 24 hours. A SQUARE in the page's own ink, not a coloured dot: the five state colours keep their one meaning, and a badge cannot be taken for a market. flatmap.js draws it in screen pixels, so it is the same size at any zoom. */ html[data-theme] .fm-econ{ display:none; cursor:pointer; } html[data-theme] .fm-econ.on{ display:inline; } html[data-theme] .fm-econ-box{ fill:var(--dk-text); stroke:var(--dk-page); stroke-width:1px; } html[data-theme] .fm-econ-mark{ fill:var(--dk-page); font-family:Inter, system-ui, sans-serif; font-weight:800; pointer-events:none; } html[data-theme] .ml-econ{ display:inline-flex; align-items:center; justify-content:center; width:11px; height:11px; border-radius:2.5px; background:var(--dk-text); color:var(--dk-page); font-style:normal; font-size:9px; font-weight:800; line-height:1; } /* "Coming up" at the bottom of a market's panel */ html[data-theme] .gp-econ{ margin-top:10px; padding-top:10px; border-top:1px solid var(--dk-line); } html[data-theme] .gp-econ-title{ font-size:12px; font-weight:600; color:var(--dk-text); margin-bottom:6px; } html[data-theme] .gp-econ-row{ padding:5px 0; } html[data-theme] .gp-econ-row + .gp-econ-row{ border-top:1px solid var(--dk-line); } html[data-theme] .gp-econ-what{ font-size:12px; color:var(--dk-text); line-height:1.35; } html[data-theme] .gp-econ-when{ font-size:12px; color:var(--dk-muted); font-variant-numeric:tabular-nums; margin-top:2px; } html[data-theme] .gp-econ-fig{ font-size:11.5px; color:var(--dk-muted); line-height:1.35; } /* "Next big events", under the map */ html[data-theme] .map-events{ margin-top:14px; font-family:Inter, system-ui, sans-serif; color:var(--dk-text); } html[data-theme] .me-head{ display:flex; align-items:baseline; gap:10px; margin-bottom:8px; } html[data-theme] .me-title{ font-size:14px; font-weight:600; color:var(--dk-text); } html[data-theme] .me-note, html[data-theme] .me-empty{ font-size:12px; color:var(--dk-muted); line-height:1.4; margin-bottom:8px; } html[data-theme] .me-list{ display:flex; flex-direction:column; gap:6px; } html[data-theme] .me-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; background:var(--dk-panel); box-shadow:var(--dk-shadow); border-radius:8px; padding:10px 12px; } html[data-theme] .me-main{ min-width:0; flex:1; } html[data-theme] .me-top{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; } html[data-theme] .me-country{ font-size:12px; font-weight:600; color:var(--dk-muted); white-space:nowrap; } html[data-theme] .me-what{ font-size:13px; font-weight:600; color:var(--dk-text); line-height:1.35; } html[data-theme] .me-fig{ font-size:12px; color:var(--dk-muted); line-height:1.4; margin-top:2px; font-variant-numeric:tabular-nums; } html[data-theme] .me-side{ flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px; text-align:right; font-variant-numeric:tabular-nums; } html[data-theme] .me-when{ font-size:12px; color:var(--dk-muted); white-space:nowrap; } html[data-theme] .me-count{ font-size:14px; font-weight:600; color:var(--dk-text); white-space:nowrap; } html[data-theme] .me-row.released .me-count{ color:var(--dk-blue); } html[data-theme] #screen-profile .me-more{ margin-top:8px; width:100%; background:var(--dk-row); color:var(--dk-text); border:0; border-radius:6px; padding:8px; font-family:Inter, system-ui, sans-serif; font-size:13px; font-weight:600; cursor:pointer; filter:none; } html[data-theme] #screen-profile .me-more:hover{ background:var(--dk-hover); filter:none; } /* ---- a phone --------------------------------------------------------------- The panel is moved UNDER the map (flatmap.js fmPlacePanel): there the map is barely taller than the panel, and a panel on top would hide the market he pressed. The three session boxes go one under another. */ /* (relative, not static: the panel's own close button is placed against it) */ html[data-theme] .globe-wrap > .globe-panel{ position:relative; width:100%; max-height:none; top:auto; right:auto; } @media (max-width:600px){ html[data-theme] .ms-chips{ grid-template-columns:1fr; gap:8px; } html[data-theme] .ms-headline{ font-size:14px; } html[data-theme] .me-row{ gap:10px; padding:9px 10px; } html[data-theme] .me-count{ font-size:13px; } } /* ---- "reduce motion" ------------------------------------------------------- No pulse and no beating dot. How busy a market is still shows in the size and fullness of its dot, and in the panel's five bars. */ @media (prefers-reduced-motion: reduce){ html[data-theme] .fm-pulse.on{ animation:none; opacity:0; } html[data-theme] .ms-chip.open .ms-dot{ animation:none; } } /* ---- moving the map smoothly (his report, 2026-10-17: "a little bit laggy") The wrapper is what moves while a hand is on the map: the browser slides and scales a picture it has already drawn, and js/ui/flatmap.js draws it sharp once the hand stops. It is twice the frame in each direction (and centred on it), so what slides into view during a drag is already there. Inside it: the still land, the ships, then everything that changes. */ .fm-world{ position:absolute; left:-50%; top:-50%; width:200%; height:200%; transform-origin:50% 50%; will-change:transform; touch-action:none; user-select:none; } .fm-world > .flatmap-svg, .fm-world > canvas{ position:absolute; left:0; top:0; width:100%; height:100%; } .fm-world > canvas{ pointer-events:none; } .fm-world{ cursor:grab; } .fm-world.grabbing, .fm-world.grabbing .flatmap-svg{ cursor:grabbing; } /* the land and the ships: drawn sharp into the wrapper (twice the frame) so a drag slides them; while zooming, painted sharp every frame on .fm-zoom (frame-sized, under the wrapper) instead. Presses go through all three. */ .fm-land, .ml-ship-canvas, .fm-zoom{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; } /* the top drawing lets a press through to the land, except on what can be pressed */ .fm-over{ pointer-events:none; } .fm-over .fm-markers, .fm-over .fm-econs, .fm-over .ml-hot, .fm-over .ml-sites, .fm-over .ml-dis{ pointer-events:auto; } /* ---- the countries' names (his order, 2026-10-18) --------------------------- Quiet, spaced capitals under everything else, edged in the land's own colour so a border line never cuts through a letter. A country with a big event within 24 hours has its name in the accent (flatmap.js fmCountryNames). */ html[data-theme] .fm-country-name{ fill:var(--dk-muted); opacity:.8; font-family:Inter, system-ui, sans-serif; font-weight:600; letter-spacing:.12em; paint-order:stroke; stroke:var(--dk-map-land); stroke-width:3px; stroke-linejoin:round; pointer-events:none; } html[data-theme] .fm-country-name.glow{ fill:var(--dk-amber); opacity:1; } .fm-countries{ pointer-events:none; } /* ---- the next big event, under the map (his choice, 2026-10-18; first above it, moved under it the same day - "it was better") "my eye couldn't catch easily what's the big events". One strip: the next event large with its countdown, the few after it, the week on a press. Within the hour the strip turns loud. */ html[data-theme] .map-eventbar{ margin:14px 0 0; padding:10px 12px 8px; border-radius:8px; background:var(--dk-row); border-left:3px solid var(--dk-amber-fill); box-shadow:var(--dk-shadow); font-family:Inter, system-ui, sans-serif; color:var(--dk-text); } html[data-theme] .map-eventbar.soon{ background:var(--dk-amber-bg); } html[data-theme] .eb-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px; } html[data-theme] .eb-k{ font-size:12px; font-weight:600; color:var(--dk-amber); } html[data-theme] #screen-profile .eb-week{ background:var(--dk-panel); color:var(--dk-text); border:0; border-radius:6px; padding:4px 10px; font-family:inherit; font-size:12px; cursor:pointer; } html[data-theme] #screen-profile .eb-week:hover{ background:var(--dk-hover); filter:none; } html[data-theme] #screen-profile .eb-next-main, html[data-theme] #screen-profile .eb-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:4px 12px; width:100%; background:none; border:0; border-radius:6px; padding:6px 4px; margin:0; text-align:left; color:var(--dk-text); font-family:inherit; cursor:pointer; } html[data-theme] #screen-profile .eb-next-main:hover, html[data-theme] #screen-profile .eb-row:hover{ background:var(--dk-wash-hi); filter:none; } html[data-theme] .eb-cur{ font-size:11px; font-weight:700; letter-spacing:.04em; padding:2px 6px; border-radius:4px; background:var(--dk-amber-bg); color:var(--dk-amber); } html[data-theme] .eb-what{ min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; } html[data-theme] .eb-who{ font-size:12px; font-weight:600; color:var(--dk-muted); white-space:nowrap; } html[data-theme] .eb-title{ font-size:13px; font-weight:600; line-height:1.35; } html[data-theme] .eb-when{ font-size:12px; color:var(--dk-muted); white-space:nowrap; font-variant-numeric:tabular-nums; } html[data-theme] .eb-count{ font-size:13px; font-weight:600; white-space:nowrap; text-align:right; min-width:64px; font-variant-numeric:tabular-nums; } /* the next one: bigger, so the eye goes there first */ html[data-theme] .eb-next-main .eb-cur{ font-size:13px; padding:3px 8px; } html[data-theme] .eb-next-main .eb-title{ font-size:16px; } html[data-theme] .eb-next-main .eb-when{ font-size:13px; } html[data-theme] .eb-next-main .eb-count{ font-size:22px; font-weight:700; min-width:120px; } html[data-theme] .map-eventbar.soon .eb-next-main .eb-count{ color:var(--dk-amber); } html[data-theme] .eb-row.released .eb-count{ color:var(--dk-blue); } html[data-theme] .eb-then{ margin-top:4px; padding-top:4px; border-top:1px solid var(--dk-line); display:flex; flex-direction:column; } html[data-theme] .eb-all{ max-height:280px; overflow-y:auto; overscroll-behavior:contain; } html[data-theme] .eb-note{ font-size:12px; color:var(--dk-muted); line-height:1.4; padding:4px 4px 2px; } @media (max-width:600px){ html[data-theme] #screen-profile .eb-next-main, html[data-theme] #screen-profile .eb-row{ grid-template-columns:auto minmax(0,1fr) auto; } html[data-theme] .eb-when{ grid-column:2; } html[data-theme] .eb-count{ grid-column:3; grid-row:1; } html[data-theme] .eb-next-main .eb-count{ font-size:18px; min-width:0; } html[data-theme] .eb-next-main .eb-title{ font-size:15px; } /* a phone: two after the next one, not three (the week is one press away) */ html[data-theme] .eb-then:not(.eb-all) .eb-row:nth-child(n+3){ display:none; } }