/* CrowdFx — «الان چه خبر است؟», the heatmap's now card (map-now-card.js).
   The page's own tokens and fonts; no new page token. The side words and the
   spike use the skin's ink colours, so a sentence keeps 4.5:1 on both skins.
   .mn-compact is the page's own isCompact() (width < 900), set by the card
   from its first paint: body.compact arrives only after the data has loaded. */
.map-now {
  --mn-buy:var(--bull-ink); --mn-sell:#FF6B6B;
  --mn-warn:#FF8A00; --mn-loud:#FF5A5A; --mn-stop:#C62828; --mn-stop-ink:#FF6B6B;
  --mn-link:var(--brand);
  flex:none; position:relative; direction:rtl; text-align:right;
  padding:6px 10px 5px; background:var(--card-soft); color:var(--text);
  border-bottom:1px solid var(--border);
  font-family:'IRANSans', Tahoma, sans-serif;
}
:root[data-theme="light"] .map-now { --mn-sell:var(--bear-ink); --mn-warn:#A04A00; --mn-loud:#B71C1C; --mn-stop-ink:#B71C1C;
  --mn-link:#07707D; }   /* the light --brand #0A8A99 is 3.6:1 on --card-soft; this teal is 5.1:1 */
/* Before map-now-card.js runs the card's height is already held, so the chart
   does not drop when it mounts (CLS). The numbers are the mounted card's own
   heights (measured for map-bar's layout, 28 Oct 2026, loading state
   included; map-bar-1028 tests/browser run_bar.py group H checks them): phone
   129 (one height with or without a spike), collapsed on a short screen 58;
   once the page is in its phone layout (body.compact) its strip shows below
   the held space until the card takes it inside, so the hold is less the
   strip (34px, 28px under 600px tall). Desktop 48.8 from 1180px wide, 57.8 from 900 to 1179 (a spike adds its row;
   no strip on a desktop since 29 Oct). Only the loading card holds this: once the data says there is
   nothing for the strip (the weekend, no signal) the card is shorter (v3,
   .mn-strip-off). A viewer who stored «collapsed» still sees one move. If
   the script never runs, the hold lets go after 20 s; if it finds the page
   unfit, .mn-dead. */
.map-now[hidden] { display:none !important; }
/* map-mobile-compact (31 Oct 2026): a phone's card starts as its pill row (below), one height on every phone screen:
   45px (4 + the 36px pill + 4, and the card's line), whatever the screen's height; the page keeps its own strip out of
   sight meanwhile (backtest.html), so nothing is «less the strip» any more. A phone held sideways: 0, as before. */
@media (max-width:899px) {
  #mapNow.map-now[hidden] { display:block !important; visibility:hidden; box-sizing:border-box; height:45px;
    animation:mn-let-go 0s linear 20s forwards; }
}
@media (max-width:899px) and (orientation:landscape) and (max-height:459px) {
  #mapNow.map-now[hidden], body.compact #mapNow.map-now[hidden] { height:0; }
}
@media (min-width:900px) {
  #mapNow.map-now[hidden] { display:block !important; visibility:hidden; box-sizing:border-box; height:57.8px;
    animation:mn-let-go 0s linear 20s forwards; }
}
@media (min-width:1180px) { #mapNow.map-now[hidden] { height:48.8px; } }
#mapNow.map-now.mn-dead { display:none !important; }
@keyframes mn-let-go { to { height:0; } }
.map-now p, .map-now h2 { margin:0; }

/* --------------------------------------------------------------- the header
   map-bar (the owner, 28 Oct 2026: «خیلی منظم‌تر»): a header (the title, the
   symbol, the freshness, the collapse), then two blocks: the window with its
   verdict and the green/red bar, and «تجمع حد ضرر» with «نمایش ناحیه». Each
   block is a label (.mn-k) and its value, the values on one start edge. */
.map-now .mn-head { display:flex; align-items:center; gap:8px; min-height:18px; line-height:18px; }
.map-now .mn-title {
  display:flex; align-items:center; gap:6px; flex:none;
  font-size:11.5px; font-weight:700; color:var(--text); white-space:nowrap;
}
.map-now .mn-chip {
  font-size:10px; font-weight:700; line-height:16px; padding:0 7px; color:var(--text);
  border:1px solid var(--border); border-radius:9px; background:var(--card);
}
.map-now .mn-fresh {
  flex:1; min-width:0; font-size:10.5px; color:var(--muted); text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Desktop: a 32px hit area; the negative margin keeps the row at 18px. Phones: 44px (below). */
.map-now .mn-toggle {
  flex:none; display:inline-flex; align-items:center; gap:4px; min-width:32px; min-height:32px; justify-content:center;
  padding:7px 8px; margin:-7px -8px -7px -6px; border-radius:7px;
  color:var(--muted); font-size:11px; font-weight:700; line-height:18px;
}
.map-now .mn-toggle:hover { color:var(--text); }
.map-now .mn-toggle:focus-visible {
  outline:2px solid var(--brand); outline-offset:1px;
}
.map-now .mn-chev { font-size:13px; line-height:1; }

/* --------------------------------------------------------------- the blocks */
.map-now .mn-k {
  flex:none; color:var(--muted); font-size:11px; font-weight:700; line-height:1.6; white-space:nowrap;
}
.map-now .mn-k[hidden] { display:none; }
.map-now .mn-headline {
  display:flex; align-items:baseline; gap:10px; margin:0;
  font-size:13px; font-weight:700; line-height:1.6; color:var(--text);
}
.map-now .mn-v { flex:1; min-width:0; }
.map-now .mn-win { font-weight:400; }
.map-now .mn-fig { white-space:nowrap; unicode-bidi:isolate; }
.map-now .mn-side.buy { color:var(--mn-buy); }
.map-now .mn-side.sell { color:var(--mn-sell); }
.map-now .mn-spike.warn, .map-now .mn-spike-chip.warn, .map-now .mn-spike-row:has(.warn) .mn-bolt { color:var(--mn-warn); }
.map-now .mn-spike.loud, .map-now .mn-spike-chip.loud, .map-now .mn-spike-row:has(.loud) .mn-bolt { color:var(--mn-loud); }
.map-now .mn-bolt { flex:none; font-size:12px; }

/* The spike on a phone: a badge after the verdict; a tap opens today's
   sentence under the headline, over the strip, so nothing below moves. */
.map-now .mn-spike-chip {
  position:relative; display:inline-flex; align-items:center; gap:3px; vertical-align:1px;
  margin-inline-start:6px; padding:0 8px; height:20px; box-sizing:border-box; border:1px solid currentColor; border-radius:10px;
  background:var(--card); font:700 11.5px/18px 'IRANSans', Tahoma, sans-serif; white-space:nowrap; cursor:pointer;
}
.map-now .mn-spike-chip::after { content:''; position:absolute; inset:-12px -4px; }   /* a 44px tap target */
.map-now .mn-spike-chip[hidden], .map-now .mn-spike-row[hidden] { display:none; }
.map-now .mn-spike-chip[aria-expanded="true"] { background:var(--card-soft); }
.map-now .mn-spike-chip:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.map-now:not(.mn-compact) .mn-spike-chip { display:none; }
/* Closed on a phone the sentence is out of the text (the badge's description reads it). */
.map-now.mn-compact .mn-spike-row { display:none; }
.map-now.mn-compact.mn-spike-open .mn-spike-row:not([hidden]) {
  position:absolute; left:8px; right:8px; z-index:8;
  display:flex; align-items:flex-start; gap:6px; padding:8px 10px; cursor:pointer;
  background:var(--card); border:1px solid var(--border); border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,.28);
  font-size:12.5px; line-height:1.6; font-weight:700;
}

/* The page's own strip, moved in: its numbers unchanged, framed as part of the
   card (since map-bar on a desktop too, under the verdict). Its row is held
   while the page is still loading (the page turns its phone layout on only
   once the data is in), so the card keeps one height. */
.map-now .mn-strip-slot:empty { display:none; }
.map-now .cons-strip {
  display:flex; align-items:center; gap:8px; height:22px; padding:0 8px;
  border:1px solid var(--border); border-radius:7px; background:var(--card);
}
.map-now .cons-strip .cs-track { height:8px; }
.map-now .cons-strip .cs-total { font-size:10px; color:var(--muted); white-space:nowrap; }
.map-now.mn-compact .mn-strip-slot { min-height:30px; margin-top:3px; }
.map-now.mn-compact .cons-strip { border:1px solid var(--border); border-radius:8px; background:var(--card); }
.map-now.mn-compact:not(.mn-off) .cons-strip { height:30px; }
.map-now.mn-compact .cons-strip .cs-track { height:11px; }
/* Read right to left, as the sentence above it: «خرید ۶۱٪» with the green
   part beside it on the right, the red beside «فروش» (the page's track is LTR
   and its labels LTR-isolated, which drew «٪خرید 61» beside the red part). */
.map-now .cons-strip .cs-side { direction:rtl; }
.map-now .cons-strip .cs-track { direction:rtl; }
/* The strip never says what the sentence contradicts or already says: not its
   own empty sentence (Latin digits, «اخیر» about old data), not a share beside
   «کم است», not a number while the card shows none. Its height is kept. */
.map-now .cons-strip.empty,
.map-now[data-tone="few"] .cons-strip,
.map-now[data-tone="muted"] .cons-strip,
.map-now[data-tone="none"] .cons-strip { visibility:hidden; }
/* v3: where the strip has nothing to say for a while (the weekend, no signal,
   too few, no number: .mn-strip-off, set by the card, never while loading)
   its row goes, and so does an empty stop row, so no blank space is left
   under the headline. Collapsed or sideways, the strip's row stays (it is
   the collapsed card's tap target). */
.map-now.mn-strip-off:not(.mn-collapsed):not(.mn-off) .mn-strip-slot { display:none; }
.map-now.mn-strip-off.mn-stop-empty .mn-stop-row { display:none; }

/* The stop block: ◎ «تجمع حد ضرر», its value, then «نمایش ناحیه». */
.map-now .mn-stop-row {
  display:flex; align-items:center; gap:10px; width:100%; min-height:28px;
  font-size:12px; line-height:1.6; color:var(--text); text-align:right;
}
.map-now .mn-stop-row[hidden] { display:none; }
.map-now .mn-stop-k { display:inline-flex; align-items:center; gap:4px; }
.map-now .mn-stop-mark { flex:none; color:var(--mn-stop-ink); font-size:11px; line-height:1; }
.map-now .mn-stop-text { flex:1; min-width:0; }
.map-now .mn-stop-vis { display:flex; flex-wrap:wrap; align-items:center; }
.map-now .mn-seg { unicode-bidi:isolate; white-space:nowrap; }
.map-now .mn-seg-main { font-weight:700; }
.map-now .mn-sep { font-size:0; }
.map-now .mn-sep::before {
  content:''; display:inline-block; width:1px; height:12px; margin:0 8px; vertical-align:-2px;
  background:var(--text); opacity:.35;
}
.map-now.mn-stop-empty .mn-stop-row { visibility:hidden; }
/* The button: a 40px target on a phone (the whole button), the pill inside it. */
.map-now .mn-zone-btn {
  flex:none; display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:40px;
  padding:0; margin:0; background:none; border:0; cursor:pointer; position:relative;
}
.map-now .mn-zone-btn[hidden] { display:none; }
.map-now .mn-zone-btn-text {
  display:inline-block; padding:5px 10px; border:1px solid var(--mn-stop-ink); border-radius:8px;
  color:var(--mn-stop-ink); background:var(--card); font:700 12px/18px 'IRANSans', Tahoma, sans-serif; white-space:nowrap;
}
.map-now .mn-zone-btn:hover .mn-zone-btn-text { background:rgba(198,40,40,.10); }
.map-now .mn-zone-btn[data-on="true"] .mn-zone-btn-text { background:var(--mn-stop-ink); color:var(--card); }
.map-now .mn-zone-btn:focus-visible { outline:none; }
.map-now .mn-zone-btn:focus-visible .mn-zone-btn-text { outline:2px solid var(--brand); outline-offset:2px; }

/* The spoken updates, after the card (map-now-card.js): out of sight and out of a copy. */
.mn-live-out {
  position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  -webkit-user-select:none; user-select:none;
}

/* ----------------------------------------------------------------- phones
   Stacked: the header, the window's row and its strip, the stop row. One
   label width for both rows, so the two values start on one edge; 44px
   targets (the toggle in a 30px title row). */
.map-now.mn-compact { padding:2px 10px 2px; }
.map-now.mn-compact .mn-head { min-height:28px; }
.map-now.mn-compact .mn-toggle { min-width:44px; min-height:44px; padding:0 8px; margin:-7px -4px -7px -10px; }
.map-now.mn-compact .mn-k { width:84px; white-space:normal; font-size:11px; line-height:1.35; }
.map-now.mn-compact .mn-headline { font-size:13px; line-height:1.5; gap:6px; align-items:center; min-height:22px; }
.map-now.mn-compact .mn-stop-row { gap:6px; min-height:38px; margin-top:1px; font-size:12px; }
.map-now.mn-compact .mn-zone-btn { min-height:38px; }

/* Collapsed on a phone: the title row and the strip. */
.map-now.mn-compact.mn-collapsed { padding-top:3px; padding-bottom:3px; }
.map-now.mn-compact.mn-collapsed .mn-fresh,
.map-now.mn-compact.mn-collapsed .mn-headline,
.map-now.mn-compact.mn-collapsed .mn-spike-row,
.map-now.mn-compact.mn-collapsed .mn-more { display:none; }
.map-now.mn-compact.mn-collapsed .mn-strip-slot { margin-top:3px; }
/* The whole collapsed card (title row and strip, ≥ 44px) opens it. */
.map-now.mn-compact.mn-collapsed .mn-head { position:static; min-height:18px; }
.map-now.mn-compact.mn-collapsed .mn-toggle { min-height:18px; margin:-7px -8px -7px -6px; padding:7px 8px; color:var(--mn-link); }
.map-now.mn-compact.mn-collapsed .mn-toggle::after { content:''; position:absolute; inset:0; z-index:1; }

/* map-mobile-compact (the owner, 31 Oct 2026, on a phone: «مورد زیر و روهم دیفالت بشته باشه- الان چه خبره مثلا یه
   دکمه مرکزی رنگ آبی فیروزه ای چشمک زن - میزنی روش جزییات باز میشه و نمایش ناحیه هم دیگه دکمه نداره خودکار ناحیه رو
   نشون میده»). --mn-pill marks this stylesheet's pill for map-now-card.js, which then sets .mn-mob on a phone held
   upright. Collapsed there (always, at the start) the card is one row with one centred turquoise button, «الان چه خبر
   است؟» (#mnToggle, so the card's own toggle and its aria stay), softly pulsing (none under reduced motion); the whole
   45px row is its target. Open, it is today's phone card, its toggle saying «بستن». The pill's ink on its fill: dark
   #0B1314 on #29E3E3 (11.8:1), light #FFFFFF on #067482 (5.5:1), as measured (tests/browser/run_mobile.py A). */
@media (max-width:899px) { .map-now { --mn-pill:1; } }
.map-now { --mn-pill-bg:#29E3E3; --mn-pill-fg:#0B1314; --mn-pill-ring:rgba(41,227,227,.55); }
:root[data-theme="light"] .map-now { --mn-pill-bg:#067482; --mn-pill-fg:#FFFFFF; --mn-pill-ring:rgba(6,116,130,.45); }
.map-now.mn-mob.mn-collapsed { display:flex; align-items:center; justify-content:center; padding:4px 10px; }
.map-now.mn-mob.mn-collapsed > :not(.mn-head) { display:none !important; }
.map-now.mn-mob.mn-collapsed .mn-head { justify-content:center; min-height:36px; }
.map-now.mn-mob.mn-collapsed .mn-title,
.map-now.mn-mob.mn-collapsed .mn-fresh,
.map-now.mn-mob.mn-collapsed .mn-chev { display:none; }
.map-now.mn-mob.mn-collapsed .mn-toggle {
  min-width:0; min-height:36px; height:36px; margin:0; padding:0 20px; border-radius:18px; gap:0;
  background:var(--mn-pill-bg); color:var(--mn-pill-fg); font:700 12.5px/36px 'IRANSans', Tahoma, sans-serif;
  white-space:nowrap; animation:mn-pill-pulse 2.4s ease-out infinite;
}
.map-now.mn-mob.mn-collapsed .mn-toggle:hover { color:var(--mn-pill-fg); }
.map-now.mn-mob.mn-collapsed .mn-toggle:focus-visible { outline:2px solid var(--text); outline-offset:2px; }
@keyframes mn-pill-pulse {
  0% { box-shadow:0 0 0 0 var(--mn-pill-ring); }
  70% { box-shadow:0 0 0 7px rgba(41,227,227,0); }
  100% { box-shadow:0 0 0 0 rgba(41,227,227,0); }
}
@media (prefers-reduced-motion: reduce) { .map-now.mn-mob.mn-collapsed .mn-toggle { animation:none; } }
@media (forced-colors: active) {
  .map-now.mn-mob.mn-collapsed .mn-toggle { forced-color-adjust:none; background:ButtonText; color:ButtonFace; }
}
/* Open on a phone: the toggle reads «بستن ⌃» (its 44px target as today). */
.map-now.mn-mob:not(.mn-collapsed) .mn-toggle { color:var(--mn-link); }

/* Sideways phones: today's strip alone. */
.map-now.mn-off { padding:0; background:none; border:0; }
.map-now.mn-off > :not(.mn-blk-dir), .map-now.mn-off .mn-headline { display:none !important; }
.map-now.mn-off .mn-strip-slot { margin-top:0; min-height:0; }
.map-now.mn-compact.mn-off .cons-strip { border-width:0 0 1px; border-radius:0; background:var(--card-soft); }

/* ---------------------------------------------------------------- desktop
   One band: the title with its freshness under it on the right, then the
   two blocks side by side (each its label beside its value, a hairline
   before it), the toggle at the far end; the spike, when there is one, a row
   under both. */
.map-now:not(.mn-compact) {
  display:grid; column-gap:0; row-gap:0; align-items:start; padding:5px 12px 6px;
  grid-template-columns:auto minmax(0, 1fr) minmax(0, 1.35fr) auto;
  grid-template-areas:
    "title dir   stop  toggle"
    "fresh dir   stop  toggle"
    "spike spike spike spike";
}
.map-now:not(.mn-compact) .mn-head { display:contents; }
.map-now:not(.mn-compact) .mn-title { grid-area:title; font-size:12px; line-height:20.8px; }
.map-now:not(.mn-compact) .mn-fresh { grid-area:fresh; flex:none; text-align:right; font-size:10px; line-height:16px; }
.map-now:not(.mn-compact) .mn-toggle { grid-area:toggle; justify-self:end; align-self:start; margin:-5px -8px -5px 0; }
.map-now:not(.mn-compact) .mn-blk {
  margin-inline-start:16px; padding-inline-start:16px; border-inline-start:1px solid var(--border); min-width:0;
}
.map-now:not(.mn-compact) .mn-blk-dir { grid-area:dir; }
.map-now:not(.mn-compact) .mn-blk-stop { grid-area:stop; }
.map-now:not(.mn-compact) .mn-k { max-width:170px; overflow:hidden; text-overflow:ellipsis; line-height:20.8px; }
.map-now:not(.mn-compact) .mn-headline { min-height:20.8px; }
.map-now:not(.mn-compact) .mn-strip-slot { margin-top:3px; }
/* No green/red strip on a desktop (the owner, 29 Oct 2026: «این رو از حالت دسکتاپ بردار چون در سایدبار داریم»): the
   sidebar's «نظر جمعی» shows the same share and count. The strip still lives in the slot (the card reads it and a phone
   shows it); the verdict above it stays. */
.map-now:not(.mn-compact) .mn-strip-slot { display:none; }
.map-now:not(.mn-compact) .mn-stop-row { align-items:flex-start; }
.map-now:not(.mn-compact) .mn-stop-k { line-height:20.8px; }
.map-now:not(.mn-compact) .mn-stop-text { padding-top:1px; }
.map-now:not(.mn-compact) .mn-spike-row {
  grid-area:spike; display:flex; align-items:center; gap:6px; margin:4px 0 0;
  font-size:12px; line-height:1.6; font-weight:700;
}
.map-now:not(.mn-compact) .mn-spike-row[hidden] { display:none; }
/* Desktop: the pill is 24px; the button's hit area reaches 44px around it. */
.map-now:not(.mn-compact) .mn-zone-btn { min-height:24px; min-width:0; }
.map-now:not(.mn-compact) .mn-zone-btn::after { content:''; position:absolute; inset:-10px -4px; }
.map-now:not(.mn-compact) .mn-zone-btn-text { padding:2px 10px; font-size:11.5px; line-height:18px; }
/* Collapsed on a desktop: one row, the verdict still there. */
.map-now:not(.mn-compact).mn-collapsed {
  grid-template-columns:auto minmax(0, 1fr) auto; grid-template-areas:"title dir toggle";
}
.map-now:not(.mn-compact).mn-collapsed .mn-fresh,
.map-now:not(.mn-compact).mn-collapsed .mn-more,
.map-now:not(.mn-compact).mn-collapsed .mn-strip-slot,
.map-now:not(.mn-compact).mn-collapsed .mn-spike-row { display:none; }
.map-now:not(.mn-compact).mn-collapsed .mn-v { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* A narrower desktop (900–1179px, review of 28 Oct): side by side the two
   blocks wrapped into ragged lines and the card grew to 79px. Here they
   stand one under the other, one line each: the window's verdict (the
   green/red bar that stood beside it is off a desktop since 29 Oct), then
   the stop block, its busiest-zone note left to the spoken sentence. 57.8
   high, its held height (the wide band, one row shorter, holds 48.8). */
@media (min-width:900px) and (max-width:1179px) {
  .map-now:not(.mn-compact) {
    grid-template-columns:auto minmax(0, 1fr) auto;
    grid-template-areas:
      "title dir   toggle"
      "fresh stop  toggle"
      "spike spike spike";
  }
  .map-now:not(.mn-compact) .mn-blk-dir { display:flex; align-items:center; gap:12px; }
  .map-now:not(.mn-compact) .mn-blk-dir .mn-headline { flex:0 1 auto; min-width:0; }
  .map-now:not(.mn-compact) .mn-blk-dir .mn-v { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .map-now:not(.mn-compact) .mn-blk-dir .mn-strip-slot { flex:1 1 220px; min-width:170px; margin-top:0; }
  .map-now:not(.mn-compact) .mn-blk-dir .cons-strip .cs-total { display:none; }
  .map-now:not(.mn-compact) .mn-stop-row { min-height:24px; align-items:center; }
  .map-now:not(.mn-compact) .mn-stop-k { line-height:20px; }
  .map-now:not(.mn-compact) .mn-stop-text { padding-top:0; overflow:hidden; }
  .map-now:not(.mn-compact) .mn-stop-vis { flex-wrap:nowrap; white-space:nowrap; }
  .map-now:not(.mn-compact) .mn-seg-x, .map-now:not(.mn-compact) .mn-sep-x { display:none; }
}

/* ------------------------------------------------- «نمایش ناحیه»: the zone
   Inside the chart, in this order (map-now-card.js): the chart's canvas, the
   band (no z-index: its fill sits under the squares), the squares' canvas,
   then every control of the chart; only the band's words sit above. */
.mn-band {
  position:absolute; pointer-events:none; box-sizing:border-box;
  background:rgba(198,40,40,.12);
  border:1.5px solid #C62828; border-radius:2px;
  animation:mn-band-in .18s ease-out;
}
:root:not([data-theme="light"]) .mn-band { border-color:#FF6B6B; }
.mn-band-label {
  position:absolute; z-index:6; left:6px; bottom:calc(100% + 3px); direction:rtl; white-space:nowrap;
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
  padding:1px 6px; border-radius:4px; font:700 10px/15px 'IRANSans', Tahoma, sans-serif;
  color:#FF6B6B; background:var(--card); border:1px solid var(--border);   /* 6.3:1 on the dark --card */
}
.mn-band-label.below { bottom:auto; top:calc(100% + 3px); }
.mn-band-legend { display:flex; align-items:center; gap:8px; font-weight:400; color:var(--text); }
.mn-band-legend:empty { display:none; }
/* The key: the page's own stop square (its legend swatch), then the sides. */
.mn-legend-mark { display:inline-flex; align-items:center; font-style:normal; margin-left:-3px; }
.mn-legend-mark svg { display:block; }
.mn-legend-mark:empty::before { content:''; width:7px; height:7px; border:1.2px solid #FF5252; background:rgba(255,82,82,.07); }
.mn-band-aside { font-weight:400; color:var(--muted); }
.mn-band-aside[hidden] { display:none; }
/* A phone's own zone out of the plot (map-mobile-compact): «↑ بالاتر از دید» / «↓ پایین‌تر از دید». */
.mn-band-edge { font-weight:700; color:var(--text); }
.mn-band-edge[hidden] { display:none; }
/* The map tour on a phone (map-tour.js zoneQuiet, review of 31 Oct 2026): at every box but the zone's own, the phone's
   own zone (band, words and squares) is out of sight, as today's tour closes the button's zone there. */
.mt-zone-quiet #chartWrap .mn-band, .mt-zone-quiet #chartWrap .mn-stops { visibility:hidden; }
:root[data-theme="light"] .mn-band-label { color:#B71C1C; }
/* No z-index: the card puts the squares' canvas right after the band, just above the chart's own canvas, so
   the chart's controls and popups (the «راهنما» legend, the head, the source card) paint over the squares, as
   over the page's own. */
.mn-stops { position:absolute; left:0; top:0; pointer-events:none; }
@keyframes mn-band-in { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .mn-band { animation:none; } }