/* market_v3.css — спільний page-CSS для хвилі 3 (ринкова аналітика):
   radar_v3.html / market_overview_v3.html / market_map_v3.html /
   sector_map_v3.html / performance_v3.html.

   Джерела за readme.md UI-KIT.md порядок: design-system.css (токени, base_v3
   підключає сам) → design-motion.css (.ss-lift) → ticker_v3.css (ss-table/
   ss-tag/ss-chip/tv3-note/tv3-spark — реюз 1:1) → цей файл, лише те, чого
   справді нема в жодному з джерел вище. Префікс mv3- (market) —
   сторінко-локальний неймспейс, як tv3-/nv3-/cc-/hv3-.

   Фіолетового немає в жодній ролі (readme.md) — "new sector"/AI-badge
   використовують --tag-amber і петроль, НЕ violet (відступ від старого
   Tailwind radar.html, де new_sector був violet-500). */

/* ---------- Radar: барометр gauge (headline risk-on/risk-off) ----------
   Трек — статичний градієнт down→neutral→up (той самий --up/--down токен,
   що ss-up/ss-down), маркер — коло з glow кольором поточного знаку,
   позиція керується inline style="left:%" (Python-side clamp [2,98],
   views/radar.py::_build_barometer, той самий контракт що v2). */
/* RTL-фікс (подвійне ревью хвилі 3): маркер позиціонується логічною
   inset-inline-start (фліпається у dir="rtl") поверх ФІЗИЧНОГО
   90deg-градієнта треку (не фліпається) — без direction:ltr score +80
   в арабській опинявся на червоному (лівому фізично, "кінець" в RTL) кінці.
   Шкала-число — універсальний артефакт (як координатна вісь), ltr тут
   легальний відступ від напрямку сторінки. direction:ltr на .mv3-gauge
   успадковується нащадком .mv3-gauge-mark (inset-inline-start резолвиться
   від ВЛАСНОГО computed direction елемента, що успадковує його від предка). */
.mv3-gauge, .mv3-gauge-scale, .mv3-legend-bar { direction: ltr; }
.mv3-gauge { position: relative; padding-inline: 2px; }
.mv3-gauge-track {
  height: 10px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 107, 133, .58), var(--surface-rule) 48%, var(--surface-rule) 52%, rgba(103, 224, 140, .58));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(214, 248, 255, .1);
}
.mv3-gauge-zero { position: absolute; inset-block-start: 0; inset-inline-start: 50%; translate: -50% 0; width: 1px; height: 10px; background: rgba(255, 255, 255, .4); }
.mv3-gauge-mark {
  position: absolute; inset-block-start: -5px; translate: -50% 0; width: 20px; height: 20px; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--scene-4), 0 0 16px 2px currentColor; background: currentColor;
}
.mv3-gauge-scale { display: flex; justify-content: space-between; margin-block-start: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--text-faint); }

/* ---------- Radar: секторна теплокарта — комірка з тоном дельти ----------
   data-tone: up2/up1/flat/down1/down2/new. Амбер для "new" (не violet). */
.mv3-heat { border-radius: var(--r-sm); padding: 10px 12px; background: rgba(255, 255, 255, .045); box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .12); min-width: 0; }
.mv3-heat[data-tone="up2"] { background: rgba(103, 224, 140, .22); box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .12), inset 0 0 0 1px rgba(103, 224, 140, .4); }
.mv3-heat[data-tone="up1"] { background: rgba(103, 224, 140, .11); box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .12), inset 0 0 0 1px rgba(103, 224, 140, .22); }
.mv3-heat[data-tone="down1"] { background: rgba(255, 107, 133, .11); box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .12), inset 0 0 0 1px rgba(255, 107, 133, .22); }
.mv3-heat[data-tone="down2"] { background: rgba(255, 107, 133, .22); box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .12), inset 0 0 0 1px rgba(255, 107, 133, .4); }
.mv3-heat[data-tone="new"] { background: rgba(224, 168, 92, .16); box-shadow: inset 1px 1px 0 rgba(214, 248, 255, .12), inset 0 0 0 1px rgba(224, 168, 92, .34); }
.mv3-heat-name { font-size: 11px; font-weight: 600; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv3-heat-val { font-family: var(--mono); font-size: 13px; font-weight: 700; margin-block-start: 3px; }
.mv3-heat-flow { font-family: var(--mono); font-size: 9.5px; color: var(--text-faint); opacity: .85; margin-block-start: 2px; }
.mv3-heatgrid { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .mv3-heatgrid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Лінійний SVG-графік (self-made, БЕЗ CDN) ----------
   Спільний для SPY mini-chart (market_overview_v3) і Equity Curve
   (performance_v3) — inline-скрипт кожної сторінки малює <polyline>+заливку
   у viewBox 0 0 640 200 і синхронізує .mv3-chart-tip. Колір лінії/заливки —
   var(--up)/var(--down) залежно від знаку останньої точки (легально:
   ціна/кумулятивний P&L — "рух ціни", readme.md). */
.mv3-chart { position: relative; }
.mv3-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.mv3-chart-grid { stroke: var(--surface-rule); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mv3-chart-line { fill: none; stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.mv3-chart-cross { stroke: rgba(234, 246, 249, .28); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mv3-chart-dot { stroke: var(--scene-4); stroke-width: 2; }
.mv3-chart-tip {
  position: absolute; pointer-events: none; z-index: 5; padding: 7px 11px; border-radius: 10px;
  font-size: 11px; line-height: 1.5; white-space: nowrap; color: var(--text); opacity: 0;
  background: linear-gradient(180deg, #0C3D4E 0%, #08303F 46%, #061F2A 100%);
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .75), inset 1.5px 1.5px 0 rgba(214, 248, 255, .3);
  transition: opacity .12s ease;
}
.mv3-chart-tip.is-visible { opacity: 1; }
.mv3-chart-tip b { display: block; font-family: var(--mono); font-size: 12.5px; }
.mv3-chart-empty {
  display: flex; align-items: center; justify-content: center; height: 100%; min-height: 140px;
  border: 1px dashed var(--surface-border); border-radius: var(--r-sm); color: var(--text-faint); font-size: 12px;
}

/* ---------- Canvas-treemap wrapper (Fin-Vizion Map / sector детальний) ----------
   Механіка squarify-алгоритму 1:1 зі старого market_map.html/sector_map.html
   (self-made canvas, нуль CDN) — тут ЛИШЕ вітрина навколо canvas, кольори
   плиток читаються з --up/--down runtime (getComputedStyle) у скрипті
   сторінки, не хардкодяться вдруге тут. */
.mv3-treemap-wrap {
  position: relative; width: 100%; border-radius: var(--r-md); overflow: hidden;
  background: var(--scene-4); border: 1px solid var(--surface-border);
  box-shadow: 0 24px 52px -30px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .03);
}
.mv3-treemap-wrap canvas { display: block; width: 100%; cursor: pointer; }
.mv3-treemap-tip {
  position: fixed; pointer-events: none; opacity: 0; transition: opacity .12s ease; z-index: 100;
  min-width: 180px; padding: 10px 14px; border-radius: 12px; font-size: 12px; color: var(--text);
  white-space: nowrap; background: linear-gradient(180deg, #0C3D4E 0%, #08303F 46%, #061F2A 100%);
  box-shadow: 0 12px 40px -10px rgba(0, 0, 0, .75), inset 1.5px 1.5px 0 rgba(214, 248, 255, .3);
}
.mv3-treemap-tip .tt-symbol { font-family: var(--mono); font-weight: 700; font-size: 14px; color: var(--text); letter-spacing: .02em; }
.mv3-treemap-tip .tt-name { color: var(--text-3); font-size: 11px; margin-block-start: 2px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.mv3-treemap-tip .tt-divider { height: 1px; background: var(--surface-rule); margin-block: 6px; }
.mv3-treemap-tip .tt-row { display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono); font-size: 12px; }
.mv3-treemap-tip .tt-mcap { color: var(--text-faint); font-size: 11px; }
.mv3-treemap-tip .tt-breadcrumb { color: var(--text-faint); font-size: 10px; margin-block-start: 4px; padding-block-start: 4px; border-block-start: 1px solid var(--surface-rule); }

/* ---------- Легенда кольорової шкали (-3% … 0% … +3%) ----------
   Два半-градієнти down→surface-rule / surface-rule→up + мітка "0%" між
   ними — 1:1 відновлення нейтрального плато старої 3-зонної шкали
   (old market_map.html: t<0.4 red, 0.4-0.6 charcoal-плато, t>0.6 green;
   JS changeColor у market_map_v3/sector_map_v3 читає ТІ САМІ --down/--up/
   --surface-rule токени — нуль розбіжності CSS-легенда↔canvas). .mv3-legend-bar
   — flex-обгортка двох половинок, direction:ltr гарантує down-половина
   ЗАВЖДИ фізично ліворуч від up-половини незалежно від dir сторінки. */
.mv3-legend { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 9.5px; color: var(--text-faint); }
.mv3-legend-bar { display: flex; align-items: center; gap: 0; }
.mv3-legend-half { width: 48px; height: 9px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.mv3-legend-half[data-side="down"] { background: linear-gradient(90deg, var(--down), var(--surface-rule)); border-start-start-radius: 4px; border-end-start-radius: 4px; }
.mv3-legend-half[data-side="up"] { background: linear-gradient(90deg, var(--surface-rule), var(--up)); border-start-end-radius: 4px; border-end-end-radius: 4px; }

/* ---------- Хлібні крихти (sector_map_v3) ---------- */
.mv3-crumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; flex-wrap: wrap; }
.mv3-crumb a { color: var(--text-3); }
.mv3-crumb a:hover { color: var(--petrol-100); }
.mv3-crumb i { font-style: normal; color: var(--text-faint); font-size: 10px; }
.mv3-crumb b { color: var(--text); font-weight: 600; }

/* ---------- CMS/AI-огляд — прозовий текст (те саме ритмо-правило, що
   home_v3.css .hv3-intro, локальна копія бо market_v3.css самодостатній). ---------- */
.mv3-prose { font-size: 14.5px; line-height: 1.75; color: var(--text-2); max-width: 78ch; }
.mv3-prose p + p { margin-block-start: 14px; }
.mv3-prose a { color: var(--petrol-200); text-decoration: underline; }
.mv3-prose a:hover { color: var(--petrol-100); }
.mv3-prose strong { color: var(--text); font-weight: 700; }

/* ---------- Payoff advantage bar (performance_v3 win/loss) ---------- */
.mv3-bar-track { height: 11px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5); overflow: hidden; }
.mv3-bar-fill { display: block; height: 100%; border-radius: 999px; transition: width .5s var(--ease); }

/* ---------- Auto-fit грід-групи, той самий idiom що hv3-cards-* ---------- */
.mv3-cards-4 { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .mv3-cards-4 { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Performance hero — зіркова метрика (Cumulative P&L) займає
   половину рядка на десктопі, повний рядок на мобільному (span:2 сталий,
   міняється лише к-сть колонок самого гріда). ---------- */
.mv3-hero-stats { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 720px) { .mv3-hero-stats { grid-template-columns: repeat(4, 1fr); } }
.mv3-hero-star { grid-column: span 2; }
.mv3-cards-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .mv3-cards-2 { grid-template-columns: 1fr 1fr; } }
.mv3-grid-1-2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .mv3-grid-1-2 { grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); } }