/* map-source-card.css — the map's source card (map-source-card.js; the owner's request of 24 October 2026).
   It sits where the picked signal's canvas card sat and reads like the map's own HTML card (tv-card): the map's
   tokens (backtest.html: --card, --card-soft, --border, --border-soft, --text, --muted, --brand, --bull-ink,
   --bear-ink, --avatar-l) and, for its one button and its links, the site's pair (site.css: --site-brand /
   --site-brand-ink, the map's sign-in prompt's), whose contrast holds on both skins. Small text is --muted (never
   --faint) for the same reason.
   Three parts in a column: the head (who, ✕), the figures (.msc-body: the one part that gives way, scrolling inside
   with a fade at its foot, when the card has less room than it needs) and the actions (.msc-acts: the button, what it
   did, the links), which never leave sight. */
.msc-card {
  position:absolute; z-index:12; width:288px; max-height:calc(100% - 60px);
  display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain;
  padding:9px 11px 10px; direction:rtl; text-align:right; touch-action:pan-y;
  background:color-mix(in srgb, var(--card) 97%, transparent);
  border:1px solid var(--border); border-radius:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.28); font-size:11px; line-height:1.6; color:var(--muted);
  scrollbar-width:thin;
}
:root[data-theme="light"] .msc-card { box-shadow:0 10px 28px rgba(15,30,32,.14); }
.msc-card .sr-only, .msc-live {
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* head: photo or initial, the name as copy-trade masks it, its days, ✕ */
.msc-head { flex:none; display:flex; align-items:center; gap:8px; }
.msc-avatar {
  --h:190; position:relative; flex:none; width:34px; height:34px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; font-size:14px; font-weight:800; line-height:1;
  background:hsl(var(--h) 55% var(--avatar-l)); color:hsl(var(--h) 50% var(--avatar-ink-l));
}
.msc-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.msc-title {
  flex:1; min-width:0; margin:0; display:flex; align-items:baseline; gap:4px;
  font-size:12px; font-weight:800; line-height:1.5; color:var(--text);
}
.msc-title:focus { outline:none; }
.msc-title:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }
.msc-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.msc-days { flex:none; font-size:10px; font-weight:400; color:var(--muted); }
.msc-close {
  flex:none; width:28px; height:28px; display:grid; place-items:center; border-radius:6px; color:var(--muted);
}
.msc-close:hover { color:var(--text); background:rgba(147,167,169,.16); }

/* the figures: they give way first (scrolling inside, a fade at the foot while more is below); the three numbers stay
   clear of the fade (map-source-card.js FADE keeps that much of this part in sight) */
.msc-body { flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.msc-body.msc-clipped {
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}
/* a window too short even for the head, the figures and the actions: the card itself scrolls, a fade at its foot says so */
.msc-card.msc-overflow {
  -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
  mask-image:linear-gradient(to bottom, #000 calc(100% - 20px), transparent);
}
.msc-health { margin:6px 0 0; font-size:10.5px; }
.msc-card .ct-health.cut { color:#C98A1E; }
:root:not([data-theme="light"]) .msc-card .ct-health.cut { color:#E0A43A; }
.msc-stats { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; margin-top:9px; }
.msc-stat {
  min-width:0; padding:6px 6px 5px; border:1px solid var(--border-soft); border-radius:7px;
  background:var(--card-soft); text-align:center;
  display:flex; flex-direction:column; justify-content:space-between;
}
/* the labels in full («میانگین سیگنال در روز» takes two lines); the numbers line up at the foot */
.msc-stat em { display:block; font-style:normal; font-size:9.5px; line-height:1.35; color:var(--muted); }
.msc-stat b { display:block; margin-top:2px; font-size:14px; font-weight:800; line-height:1.5; color:var(--text); white-space:nowrap; }
.msc-growth.up b { color:var(--bull-ink); }
.msc-growth.down b { color:var(--bear-ink); }
.msc-basis { margin:5px 0 0; font-size:9.5px; color:var(--muted); }
.msc-risk { margin:1px 0 0; font-size:9.5px; color:var(--muted); }
.msc-skel .msc-stat { height:44px; padding:8px; }
.msc-skel .msc-stat i {
  display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--border-soft), var(--border), var(--border-soft)); background-size:200% 100%;
  animation:msc-shimmer 1.2s ease-in-out infinite;
}
.msc-wait { margin:6px 0 0; font-size:10.5px; }
@keyframes msc-shimmer { from { background-position:100% 0; } to { background-position:-100% 0; } }

/* the actions: the button, its hint, the outcome, the links (never out of sight) */
.msc-acts { flex:none; margin-top:9px; padding-top:8px; border-top:1px solid var(--border-soft); }
.msc-acts.msc-acts-bare { margin-top:4px; padding-top:0; border-top:0; }
.msc-row { display:flex; align-items:center; gap:6px; }
.msc-card .msc-primary {
  flex:1; min-width:0; min-height:36px; display:flex; align-items:center; justify-content:center; gap:6px;
  padding:6px 10px; border-radius:8px; background:var(--site-brand); color:var(--site-brand-ink);
  font-size:12px; font-weight:800; line-height:1.45; text-align:center;
}
.msc-card .msc-primary svg { flex:none; }
.msc-card .msc-primary:hover { filter:brightness(.94); }
.msc-card .msc-primary.busy { opacity:.8; cursor:progress; }
.msc-spin {
  flex:none; width:14px; height:14px; border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  animation:msc-spin .8s linear infinite;
}
@keyframes msc-spin { to { transform:rotate(360deg); } }
.msc-chip {
  display:inline-block; margin-inline-end:6px; padding:0 8px; border:1px solid var(--border); border-radius:99px;
  font-size:10px; line-height:1.7; color:var(--bull-ink); vertical-align:1px;
}
.msc-hint, .msc-line, .msc-done, .msc-more, .msc-msg { margin:6px 0 0; font-size:10.5px; line-height:1.8; }
.msc-line { color:var(--bull-ink); font-weight:700; }
.msc-done { color:var(--bull-ink); font-size:12px; font-weight:800; }
.msc-msg.bad { color:var(--bear-ink); }
.msc-links { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 12px; margin-top:6px; }
.msc-card a.msc-link, .msc-card a.msc-report {
  display:inline-flex; align-items:center; gap:4px; color:var(--site-brand); font-weight:700; text-decoration:none;
}
.msc-card a.msc-link { font-size:11px; }
.msc-card a.msc-report { font-size:10.5px; }
.msc-card a.msc-link:hover, .msc-card a.msc-report:hover { text-decoration:underline; }
.msc-card .msc-primary:focus-visible, .msc-close:focus-visible, .msc-card a.msc-link:focus-visible,
.msc-card a.msc-report:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

/* a finger (a phone, or any coarse pointer such as a tablet): every target at least 44 px, the larger type, and over
   the chart's floating pencil and chat buttons (still under the drawer's backdrop, which comes later at 48) */
.msc-card.msc-touch { z-index:48; font-size:12px; }
.msc-card.msc-touch:not(.msc-compact) { width:300px; }
.msc-touch .msc-avatar { width:30px; height:30px; font-size:13px; }
.msc-touch .msc-title { font-size:13px; }
.msc-touch .msc-close { width:44px; height:44px; margin:-6px 0 -6px -8px; }
.msc-touch .msc-stats { margin-top:6px; }
.msc-touch .msc-stat { padding:4px 5px 3px; }
.msc-touch .msc-stat em { font-size:10.5px; }
.msc-touch .msc-stat b { font-size:15px; }
.msc-touch .msc-basis { margin-top:3px; }
.msc-touch .msc-basis, .msc-touch .msc-risk, .msc-touch .msc-days { font-size:10.5px; }
.msc-touch .msc-acts { margin-top:6px; padding-top:6px; }
.msc-touch .msc-acts.msc-acts-bare { margin-top:2px; padding-top:0; }
.msc-touch .msc-hint, .msc-touch .msc-line, .msc-touch .msc-more, .msc-touch .msc-msg { font-size:11.5px; }
.msc-card.msc-touch .msc-primary { min-height:44px; font-size:13px; }
.msc-touch .msc-links { margin-top:2px; }
.msc-card.msc-touch a.msc-link, .msc-card.msc-touch a.msc-report { min-height:44px; font-size:12px; }

/* a phone held upright: a strip the chart's width, above or below the picked marker (map-source-card.js placeStrip) */
.msc-card.msc-compact { width:auto; padding:6px 12px 8px; }

/* taller than the chart has room for (a phone held sideways, a short window, a small phone after a press): fixed in the
   window between the site's header and the window's foot, beside the marker (upright: above or below it) */
.msc-card.msc-float { position:fixed; z-index:48; }

/* a phone (map-card-dock, 27 October 2026: «مثل یه باکس بیاد پایین چارت بین نتایج استراتژی و چارت … یه جوری جمع و جور
   که جا بشه»; map-source-card.js BELOW_MAX): not over the chart but a box in the page under it, before «نتایج
   استراتژی‌ها», the chart's full width. One head row (who, «کارنامهٔ کامل», ✕), the three figures in one row, the basis
   and the caveat on one line, a slimmer button with its note on one line under it. */
.msc-card.msc-below {
  position:relative; z-index:auto; flex:none; width:auto; max-height:none; overflow:visible;
  padding:6px 12px 8px; border:0; border-top:1px solid var(--border); border-radius:0;
  background:var(--card); box-shadow:none; font-size:11px; line-height:1.55; touch-action:auto;
}
:root[data-theme="light"] .msc-card.msc-below { box-shadow:none; }
.msc-below .msc-head { gap:7px; min-height:32px; }
.msc-below .msc-avatar { width:26px; height:26px; font-size:12px; }
.msc-below .msc-title { font-size:12.5px; }
.msc-below .msc-days { font-size:10.5px; }
/* finger targets of 44 px (as .msc-touch) that keep the head row 32 px tall; «کارنامهٔ کامل» kept clear of ✕ */
.msc-card.msc-below a.msc-report {
  flex:none; min-height:44px; margin-block:-6px; margin-inline-end:6px; padding:0 6px; font-size:11px;
}
.msc-below .msc-close { width:44px; height:44px; margin:-6px 0 -6px -12px; }
.msc-below .msc-body { overflow:visible; }
.msc-below .msc-health { margin-top:2px; }
.msc-below .msc-stats { gap:0; margin-top:4px; }
.msc-below .msc-stat { padding:0 4px; border:0; border-radius:0; background:none; justify-content:flex-start; }
.msc-below .msc-stat + .msc-stat { border-inline-start:1px solid var(--border-soft); }
.msc-below .msc-stat em { font-size:10px; line-height:1.4; }
.msc-below .msc-stat b { margin-top:0; font-size:14px; line-height:1.35; }
.msc-below .msc-fine { margin:5px 0 0; font-size:9.5px; line-height:1.5; color:var(--muted); }
.msc-below .msc-acts { margin-top:6px; padding-top:7px; }
.msc-below .msc-acts:empty { display:none; }
.msc-card.msc-below .msc-primary { min-height:42px; padding:5px 10px; font-size:12.5px; }
.msc-below .msc-hint, .msc-below .msc-line, .msc-below .msc-done, .msc-below .msc-more, .msc-below .msc-msg {
  margin-top:4px; font-size:10.5px; line-height:1.6;
}
.msc-below .msc-done { font-size:12px; }
/* «رایگان · به کانال @… اضافه می‌شود.»: the chip as a word of the line, the dot between them in the text (.msc-sep) */
.msc-below .msc-chip {
  display:inline; margin:0; padding:0; border:0; border-radius:0; font-size:inherit; font-weight:700; line-height:inherit;
  vertical-align:baseline;
}
.msc-below .msc-sep { color:var(--muted); }
.msc-below .msc-links { margin-top:0; }
.msc-card.msc-below a.msc-link { min-height:44px; font-size:11.5px; }
/* while it loads: the figures' and the button's room, so the page under it moves once */
.msc-below .msc-wait { margin-top:2px; }
.msc-below .msc-skel .msc-stat { height:34px; padding:3px 6px; }
.msc-below .msc-skel-act { margin-top:9px; padding-top:7px; border-top:1px solid var(--border-soft); }
.msc-below .msc-skel-act i {
  display:block; height:42px; border-radius:8px;
  background:linear-gradient(90deg, var(--border-soft), var(--border), var(--border-soft)); background-size:200% 100%;
  animation:msc-shimmer 1.2s ease-in-out infinite;
}
.msc-below .msc-skel-act i.msc-skel-hint { width:70%; height:12px; margin-top:8px; border-radius:4px; }
/* The workbench grows by the box but at most by the bars under it (map-source-card.js sets --msc-below-h), so the box
   ends on the screen and the chart gives up only the rest: backtest.html's own phone heights (body.compact .workbench:
   100dvh − 64px, at most 640px wide 100dvh − 56px) plus that. Fullscreen keeps the screen's height; there the box takes
   the chart's foot. */
body.compact .workbench.msc-below-on:not(.pseudo-fullscreen) {
  height:calc(100vh - 64px + var(--msc-below-h, 0px));
  height:calc(100dvh - 64px + var(--msc-below-h, 0px));
}
@media (max-width:640px) {
  body.compact .workbench.msc-below-on:not(.pseudo-fullscreen) {
    height:calc(100vh - 56px + var(--msc-below-h, 0px));
    height:calc(100dvh - 56px + var(--msc-below-h, 0px));
  }
}

/* a desktop (map-sidebar-pick, 28 October 2026: «کارت سیگنال به ساید بار منتقل بشه — زیر تب نظر جمعی، «سیگنال
   انتخاب شده»»): the content of the sidebar's section (backtest.html .side-pick), in its flow and its width; the
   section's head says what it is and carries ✕ (it presses this card's own, hidden here). */
.msc-card.msc-side {
  position:relative; z-index:auto; width:auto; max-height:none; overflow:visible;
  padding:9px 10px 10px; border:0; border-radius:0; background:transparent; box-shadow:none; touch-action:auto;
}
:root[data-theme="light"] .msc-card.msc-side { box-shadow:none; }
.msc-side .msc-close { display:none; }
.msc-side .msc-body { overflow:visible; }
.msc-side .msc-stats { gap:5px; }
.msc-side .msc-stat { padding:5px 4px 4px; }

@media (prefers-reduced-motion: reduce) {
  .msc-spin { animation-duration:2.4s; }
  .msc-skel .msc-stat i, .msc-below .msc-skel-act i { animation:none; }
}