/* 公版策略 #35「NDX 通道四區位置雷達」的 3D 突破雷達外框。
 *
 * 🔴 這個檔**只有** .s35-m3d-* 外框。Map3D 模組自己的 .m3d-*
 *    (圖例內容、tooltip、盤子標籤、日線 K 小視窗)在
 *    strategy-s30-map3d.css 裡,而那支已經在 templates/index.html
 *    **無條件載入**(第 114 行)→ 全域都吃得到,不需要複製第二份。
 *
 *    把 .m3d-* 抽成共用的 map3d.css 是對的(兩支會漂移),但那要動 #30
 *    已上線的樣式與 index.html,**要先問過用戶**,所以現在不抽 ——
 *    先把現況寫清楚,避免下一個人再複製一份。
 *
 * 顏色一律吃 strategy-s35-zones.css 的 --s35* token,
 * 這樣 3D 的深色模式與整個 #35 面板自動一致。
 */

/* 🔴 container query,不是 media query:這張圖活在策略右側面板裡,
   1440px 桌機上那個面板也只有 ~650px 寬。用 viewport 判斷的話桌機會留著
   232px 側欄,舞台只剩 401px 而且是直的 —— 實測 4 個族群標籤被推出畫面,
   鏡頭再怎麼退都救不回來(退到不切就縮成郵票、標籤互相蓋住)。 */
/* ⚠️ 這一組變數非加不可 —— 跟 strategy-s30-map3d.css 同一個理由。
   m3d-* 那段是從原型頁同步過來的,原型自己定義了 --panel / --fg / --pos
   這些名字,app-talkstock 沒有這組命名。#30 把它們定義在 .s30-m3d 上,
   #35 的外框叫 .s35-m3d —— 拿不到。
   2026-10-25 實測後果:說明框 background: rgba(0,0,0,0)、border 0px、
   box-shadow none,九個變數全部解析成空字串 → 變成**透明的白字浮在 3D 上**,
   顏色編碼也一起失效(使用者回報「訊息都是白色的字」)。
   這裡不是照抄 #30 的淺色值,而是接到 #35 自己的 token 上 ——
   這樣切深淺色主題時說明框自動跟著走,不用寫第二套。 */
.s35-m3d {
  margin-top: 12px; container-type: inline-size;
  --panel: var(--s35surface2);
  --panel-2: var(--s35surface3);
  --fg: var(--s35ink);
  --fg-dim: var(--s35ink3);
  --fg-faint: var(--s35ink4);
  --line: var(--s35rule);
  --line-soft: var(--s35rule2);
  --accent: var(--s35accent);
  --warn: var(--s35warn);
  /* 🔴 --pos / --neg 刻意接到中性色,不是紅綠。
     模組會自動把正數塗紅、負數塗綠,但在 #35 那是錯的:
     「距 3 月高 −11.8%」永遠是負的,塗成 ④ 的綠色看起來像好事;
     「市值」永遠是正的,塗紅更沒意義。
     顏色在這個面板只留**一個**意思:哪一區(下面的 .z1~.z4)。 */
  --pos: var(--s35ink);
  --neg: var(--s35ink);
  --shadow: 0 2px 6px rgba(0, 0, 0, .14), 0 14px 34px rgba(0, 0, 0, .18);
  --font-ui: inherit;
  --font-num: var(--s35num, ui-monospace, "SFMono-Regular", Menlo, monospace);
}
[data-theme="dark"] .s35-m3d,
.dark-mode .s35-m3d {
  --shadow: 0 2px 6px rgba(0, 0, 0, .40), 0 14px 34px rgba(0, 0, 0, .44);
}

/* ── 說明框:四區色 ──────────────────────────────────────
   空方視角會把紅綠整組對調(applyBearChrome 已經翻了圖例,註解寫
   「不然圖例會變成畫面上唯一說謊的那一塊」)。說明框也在 3D 區塊裡,
   所以一起翻 —— 用 data-bear 讓 CSS 自己換,JS 不必碰顏色。 */
.s35-m3d { --fz1: var(--s35z1); --fz2: var(--s35z2); --fz3: var(--s35z3); --fz4: var(--s35z4); }
.s35-m3d[data-bear="1"] { --fz1: var(--s35z4); --fz2: var(--s35z3); --fz3: var(--s35z2); --fz4: var(--s35z1); }

/* 🔴 區塊是**色塊**不是彩色文字 —— --s35z1~z4 是設計成底色的:
   深色模式 z2/z3 偏深、淺色模式 z2/z3 偏淺,當字色時每個主題都有兩區不合格
   (實測深色「③ 低～中」對比只有 2.3)。做成色塊,底色字色都由我們定,四區都過。 */
.s35-m3d .s35-zchip {
  display: inline-block; border-radius: 5px; padding: 1px 7px;
  font: 600 .74rem/1.45 inherit; font-style: normal; white-space: nowrap;
}
.s35-m3d .s35-zchip.z1 { background: var(--fz1); }
.s35-m3d .s35-zchip.z2 { background: var(--fz2); }
.s35-m3d .s35-zchip.z3 { background: var(--fz3); }
.s35-m3d .s35-zchip.z4 { background: var(--fz4); }
.s35-m3d .s35-zchip.z1, .s35-m3d .s35-zchip.z4 { color: #FEFDFB; }
.s35-m3d .s35-zchip.z2, .s35-m3d .s35-zchip.z3 { color: #1C1917; }
[data-theme="dark"] .s35-m3d .s35-zchip.z1, .dark-mode .s35-m3d .s35-zchip.z1,
[data-theme="dark"] .s35-m3d .s35-zchip.z4, .dark-mode .s35-m3d .s35-zchip.z4 { color: #1C1917; }
[data-theme="dark"] .s35-m3d .s35-zchip.z2, .dark-mode .s35-m3d .s35-zchip.z2,
[data-theme="dark"] .s35-m3d .s35-zchip.z3, .dark-mode .s35-m3d .s35-zchip.z3 { color: #F5F5F4; }
.s35-m3d .m3d-tip-row b.warn { color: var(--s35warn); }
.s35-m3d .m3d-tip-head b { color: var(--s35accent); }

/* block 行:標籤一行、內容一行,才放得下色塊與量尺 */
.s35-m3d .m3d-tip-row.is-block { display: block; margin-top: 6px; }
.s35-m3d .m3d-tip-row.is-block > span { display: block; margin-bottom: 3px; }
.s35-m3d .m3d-tip-row.is-block > b { display: block; font-weight: 400; }

/* 五碼指紋:五個區塊色塊。數字留著 —— 色塊給形狀,數字給精確值。
   z1/z4 是深底(淺字)、z2/z3 是淺底(深字),兩邊都過 4.5:1。 */
.s35-m3d .s35-fpw {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: auto auto; gap: 1px 4px; font-style: normal;
}
.s35-m3d .s35-fpc {
  grid-row: 1; text-align: center; border-radius: 5px; padding: 2px 0;
  font: 600 .78rem/1.35 var(--font-num); font-style: normal;
}
.s35-m3d .s35-fpl {
  grid-row: 2; text-align: center; font-style: normal;
  font: 500 .62rem/1.3 var(--font-num); color: var(--s35ink4);
}
.s35-m3d .s35-fpc.z0 { background: var(--s35rule); color: var(--s35ink3); }
.s35-m3d .s35-fpc.z1 { background: var(--fz1); }
.s35-m3d .s35-fpc.z2 { background: var(--fz2); }
.s35-m3d .s35-fpc.z3 { background: var(--fz3); }
.s35-m3d .s35-fpc.z4 { background: var(--fz4); }
/* 深底配淺字、淺底配深字 —— 哪一階是深的由主題決定,所以兩套都寫 */
.s35-m3d .s35-fpc.z1, .s35-m3d .s35-fpc.z4 { color: #FEFDFB; }
.s35-m3d .s35-fpc.z2, .s35-m3d .s35-fpc.z3 { color: #1C1917; }
[data-theme="dark"] .s35-m3d .s35-fpc.z1, .dark-mode .s35-m3d .s35-fpc.z1,
[data-theme="dark"] .s35-m3d .s35-fpc.z4, .dark-mode .s35-m3d .s35-fpc.z4 { color: #1C1917; }
[data-theme="dark"] .s35-m3d .s35-fpc.z2, .dark-mode .s35-m3d .s35-fpc.z2,
[data-theme="dark"] .s35-m3d .s35-fpc.z3, .dark-mode .s35-m3d .s35-fpc.z3 { color: #F5F5F4; }

/* 通道位置:一把四區的尺 + 一根標記 */
.s35-m3d .s35-gnum {
  display: block; font: 600 .8rem/1.3 var(--font-num); font-style: normal;
  font-variant-numeric: tabular-nums; margin-bottom: 3px;
}
.s35-m3d .s35-gauge {
  position: relative; display: flex; height: 9px; border-radius: 3px;
  overflow: hidden; font-style: normal;
}
.s35-m3d .s35-gb { display: block; }
.s35-m3d .s35-gb.z4 { width: 16.6%; background: var(--fz4); }
.s35-m3d .s35-gb.z3 { width: 33.4%; background: var(--fz3); }
.s35-m3d .s35-gb.z2 { width: 33.4%; background: var(--fz2); }
.s35-m3d .s35-gb.z1 { width: 16.6%; background: var(--fz1); }
.s35-m3d .s35-gm {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--s35ink); box-shadow: 0 0 0 1px var(--s35surface2);
  transform: translateX(-1px);
}
.s35-m3d .s35-gax {
  display: flex; justify-content: space-between; margin-top: 2px;
  font: 500 .6rem/1.3 var(--font-num); color: var(--s35ink4); font-style: normal;
}
.s35-m3d .s35-gax i { font-style: normal; }


.s35-m3d-bar,
.s35-m3d-bar2 {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
}
.s35-m3d-bar { padding: 9px 0 11px; border-bottom: 1px solid var(--s35rule2); }
.s35-m3d-bar2 { padding: 9px 0 2px; }
.s35-m3d-bar input[type=range] {
  flex: 1; min-width: 170px; accent-color: var(--s35accent);
}
.s35-m3d-day {
  font: 600 .84rem/1 var(--s35num, ui-monospace, "SFMono-Regular", Menlo, monospace);
  color: var(--s35ink2); min-width: 11em; flex: none;
}
.s35-m3d-sep {
  width: 1px; height: 20px; background: var(--s35rule); flex: none; margin: 0 2px;
}
.s35-m3d-hint { font-size: .8rem; color: var(--s35ink4); }

.s35-m3d-btn {
  font: 500 .82rem/1 inherit; color: var(--s35ink2); background: var(--s35surface2);
  border: 1px solid var(--s35rule); border-radius: 7px; padding: 8px 12px;
  cursor: pointer;
}
.s35-m3d-btn:hover { border-color: var(--s35ink4); }
.s35-m3d-btn[aria-pressed="true"] {
  background: var(--s35ink); color: var(--s35surface); border-color: var(--s35ink);
}
/* 空方視角刻意用 ①(站上)的那個紅當強調色:按鈕本身就在預告
   「按下去之後紅色是另一個意思」。 */
.s35-m3d-bear {
  font: 600 .82rem/1 inherit; color: var(--s35z1); background: transparent;
  border: 1.5px solid var(--s35z1); border-radius: 7px; padding: 8px 12px;
  cursor: pointer;
}
.s35-m3d-bear[aria-pressed="true"] {
  background: var(--s35z1); color: var(--s35surface); border-color: var(--s35z1);
}
.s35-m3d-btn[disabled], .s35-m3d-bear[disabled] { opacity: .38; cursor: not-allowed; }

/* 關不掉的狀態條 —— 翻色之後這一段的紅綠跟本頁其他六段相反,
   不是小字註解擋得住的,所以做成橫跨整張圖的帶子。 */
.s35-m3d-bearbar {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  background: color-mix(in srgb, var(--s35z1) 15%, var(--s35surface));
  border: 1.5px solid var(--s35z1); border-radius: 8px;
  padding: 9px 13px; margin: 11px 0 0;
  font: 600 .86rem/1.45 inherit; color: var(--s35z1);
}
.s35-m3d-bearbar > span {
  font-weight: 400; font-size: .81rem; color: var(--s35ink2);
}

.s35-m3d-wrap {
  display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 13px;
  margin-top: 12px;
}
.s35-m3d-side { min-width: 0; }
.s35-m3d-side h5 {
  margin: 0 0 7px; font-size: .84rem; color: var(--s35ink4);
  letter-spacing: .03em; font-weight: 600;
}
.s35-m3d-side h5 span { font-weight: 400; }
.s35-m3d-ind {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 0; border: 0; border-bottom: 1px solid var(--s35rule2);
  background: transparent; cursor: pointer; font: inherit; font-size: .85rem;
  color: var(--s35ink); text-align: left;
}
.s35-m3d-ind:hover { color: var(--s35accent); }
.s35-m3d-ind-n {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 長條有中線:淨突破是有號的,0 必須看得出來在正中間。 */
.s35-m3d-ind-b {
  width: 52px; height: 7px; border-radius: 4px; background: var(--s35surface2);
  flex: none; position: relative; overflow: hidden;
}
.s35-m3d-ind-b::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
  background: var(--s35ink4); opacity: .55;
}
.s35-m3d-ind-b i { position: absolute; top: 0; height: 100%; border-radius: 4px; }
.s35-m3d-ind-c {
  font: 600 .76rem/1 var(--s35num, ui-monospace, "SFMono-Regular", Menlo, monospace);
  color: var(--s35ink2); flex: none; width: 4.4em; text-align: right;
}

/* 🔴 min-width:0 非加不可:grid 的 1fr 是 minmax(auto,1fr),auto 的下限是
   min-content —— 而 canvas 有固有像素寬(Three.js 設的),所以容器縮窄時
   欄位會卡在舊的 canvas 寬度縮不下來,舞台整個凸出容器外
   (實測:容器 152px、舞台還是 646px,差 4 倍)。
   加了之後欄位縮得下來,模組的 ResizeObserver 會把 canvas 跟著改小。 */
.s35-m3d-stage { position: relative; min-height: 360px; min-width: 0; }
/* isolation:isolate —— canvas 自成一個堆疊脈絡,
   圖例浮層才不會被 WebGL 畫面蓋掉。 */
.s35-m3d-host {
  height: min(62vh, 520px); min-height: 360px; border-radius: 10px;
  overflow: hidden; background: var(--s35surface2); isolation: isolate;
}
.s35-m3d-loading {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--s35ink4); font-size: .9rem; text-align: center; padding: 16px;
  z-index: 3;
}
.s35-m3d-legend {
  position: absolute; right: 10px; bottom: 10px; z-index: 4;
  background: color-mix(in srgb, var(--s35surface) 92%, transparent);
  border: 1px solid var(--s35rule); border-radius: 8px; padding: 8px 10px;
  max-width: min(320px, 72%);
}
.s35-m3d-legend.collapsed > div { display: none; }
.s35-m3d-legend-t {
  font: 600 .78rem/1 inherit; color: var(--s35ink2); background: transparent;
  border: 0; padding: 0; cursor: pointer;
}

.s35-m3d-key {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size: .81rem; color: var(--s35ink2); margin-top: 11px;
}
.s35-m3d-key i {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px;
}
.s35-m3d-key .s35-m3d-kna { background: var(--s35ink4); }

.s35-m3d-note {
  font-size: .82rem; color: var(--s35ink3); line-height: 1.7; margin: 12px 0 0;
}
.s35-m3d-note b { color: var(--s35ink2); }

/* 容器窄的時候把側欄疊到舞台上面,把整個寬度讓給 3D。 */
@container (max-width: 820px) {
  .s35-m3d-wrap { grid-template-columns: 1fr; }
  .s35-m3d-side { max-height: 196px; overflow-y: auto; }
  .s35-m3d-bar input[type=range] { flex: 1 1 100%; order: 3; }
}

/* 舊瀏覽器沒有 container query 時的退路(條件比較寬鬆,寧可多疊不要切圖)。 */
@supports not (container-type: inline-size) {
  @media (max-width: 1500px) {
    .s35-m3d-wrap { grid-template-columns: 1fr; }
    .s35-m3d-side { max-height: 196px; overflow-y: auto; }
  }
}

@media (max-width: 900px) {
  .s35-m3d-host { height: 400px; }
  .s35-m3d-bar input[type=range] { flex: 1 1 100%; order: 3; }
}

/* ── K 線時間軸（取代原本那條進度條）───────────────────────── */

.s35-m3d-time { margin-top: 12px; }

/* 有 K 線時滑桿只留給鍵盤與螢幕報讀器用，視覺上收起來。
   🔴 不可以 display:none —— 那樣就不能 focus、鍵盤與報讀器都失效。
   🔴 flex 與 min-width 一定要清掉：上面的 .s35-m3d-bar input[type=range]
      給了 flex:1 與 min-width:170px，不清的話 width:1px 會被 min-width
      撐回 170px（實測量到 170x1）。 */
.s35-m3d.has-scrub .s35-m3d-bar { position: relative; }
.s35-m3d.has-scrub .s35-m3d-bar input[type=range] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  flex: none; min-width: 0;
}
/* 鍵盤 focus 時讓它現身，不然使用者不知道焦點在哪 */
.s35-m3d.has-scrub .s35-m3d-bar input[type=range]:focus-visible {
  position: static; width: auto; height: auto; clip-path: none;
  flex: 1; min-width: 140px; margin: 0;
  outline: 2px solid var(--s35accent); outline-offset: 3px;
}

.s35-m3d-scrub {
  border: 1px solid var(--s35rule); border-radius: 9px;
  background: var(--s35surface); overflow: hidden; margin-top: 9px;
}
.s35-m3d-sh {
  display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
  padding: 7px 11px; border-bottom: 1px solid var(--s35rule2);
  background: var(--s35surface2);
}
.s35-m3d-sh .code {
  font: 600 .72rem/1 inherit; letter-spacing: .07em; color: var(--s35ink4);
  text-transform: uppercase; flex: none;
}
.s35-m3d-sh .px {
  font: 600 1.02rem/1 var(--s35num, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-variant-numeric: tabular-nums;
}
.s35-m3d-sh .chg {
  font: 600 .82rem/1 var(--s35num, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-variant-numeric: tabular-nums;
}
.s35-m3d-sh .sp { flex: 1 1 14px; min-width: 0; }
.s35-m3d-sh .ohlc {
  font: 400 .74rem/1.3 var(--s35num, ui-monospace, "SFMono-Regular", Menlo, monospace);
  color: var(--s35ink4); font-variant-numeric: tabular-nums;
}

.s35-m3d-plot {
  position: relative; cursor: crosshair; touch-action: none;
  background: var(--s35surface);
}
.s35-m3d-plot svg { display: block; width: 100%; }
/* 🔴 收起廣度帶一定要用 class，不能用 hidden：
   `hidden` 是 HTMLElement 的屬性，**SVGElement 沒有** ——
   `svgEl.hidden = true` 只是掛了個沒用的 JS 屬性，不會變成 HTML 屬性，
   CSS 根本選不到（實測：hidden 讀回 true，display 仍是 block）。 */
.s35-m3d-plot svg.is-off { display: none; }
#s35M3dSvK { height: 104px; }
#s35M3dSvB { height: 36px; border-top: 1px solid var(--s35rule2); }

.s35-m3d-ticks {
  position: relative; height: 18px; border-top: 1px solid var(--s35rule2);
  background: var(--s35surface2);
}
.s35-m3d-ticks i {
  position: absolute; top: 3px; transform: translateX(-50%); font-style: normal;
  font: 500 .66rem/1 var(--s35num, ui-monospace, "SFMono-Regular", Menlo, monospace);
  color: var(--s35ink4); white-space: nowrap;
}

.s35-m3d-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--s35ink); color: var(--s35surface); border-radius: 7px;
  padding: 6px 9px; white-space: nowrap;
  font: 500 .72rem/1.55 var(--s35num, ui-monospace, "SFMono-Regular", Menlo, monospace);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
  transform: translate(-50%, -100%); opacity: 0; transition: opacity .09s;
}
.s35-m3d-tip b { font-weight: 600; }
.s35-m3d-tip .u { color: #FF8A8A; }
.s35-m3d-tip .d { color: #8EEBAE; }
@media (prefers-reduced-motion: reduce) { .s35-m3d-tip { transition: none; } }

/* 容器窄的時候 K 線壓矮、OHLC 那行收掉。影線由 JS 關掉
   （4.9px 一根的影線只會糊成一片）。廣度帶留著 —— 它比影線有用得多。 */
@container (max-width: 520px) {
  #s35M3dSvK { height: 82px; }
  .s35-m3d-sh .ohlc { display: none; }
}