/**
 * 公版策略 #35「Nasdaq 100 通道四區位置雷達」樣式。
 *
 * 變數全部鎖在 `.s35` 內（同 strategy-s30-radar.css 的寫法）—— 不污染全域 token。
 * JS 用 getComputedStyle(.s35 元素) 讀這些值去塗 SVG，所以**不可以**把它們
 * 搬到 :root，也不可以改名字（js/components/strategy/s35-zones.js 直接字面引用）。
 *
 * 四區配色：中線當零軸 —— 軸上兩區是紅色兩階、軸下兩區是綠色兩階，
 * 紅綠永遠不相鄰（相鄰的紅綠在色盲下 ΔE 只有 1.1，分不出來）。
 * 紅＝上、綠＝下，照台股看盤慣例。四組兩階都跑過色階驗證。
 */
.s35 {
  --s35surface: #FEFDFB;
  --s35surface2: #EFEEE8;
  --s35surface3: #F7F6F2;
  --s35ink: #1C1917;
  --s35ink2: #57534E;
  --s35ink3: #6B6660;
  --s35ink4: #737373;
  --s35rule: #E8E5E0;
  --s35rule2: #EFEEE8;
  --s35accent: #EA580C;
  --s35info: #3B82F6;
  --s35warn: #B45309;
  /* 四區：① 高之上 ② 中~高 ③ 低~中 ④ 低之下 */
  --s35z1: #A51515;
  --s35z2: #F08A8A;
  --s35z3: #64C492;
  --s35z4: #0D6B36;
  /* 五條線：收盤走墨色（最粗），四條均線沿用 #34 走勢圖那一組 */
  /* 市場色：紅漲綠跌（硬規則）。數值同 brand-system.css 的 --primitive-market-* */
  --s35up: #CC0000;
  --s35dn: #009900;
  --s35l0: #1C1917;
  --s35l1: #B45309;
  --s35l2: #BE185D;
  --s35l3: #7E22CE;
  --s35l4: #0F766E;

  background: var(--s35surface);
  border: 1px solid var(--s35rule);
  border-radius: 14px;
  overflow: hidden;
  color: var(--s35ink);
  font-family: var(--brand-font-family, 'Noto Sans TC', -apple-system, system-ui, sans-serif);
}
/* 深色主題：app 用 [data-theme="dark"] 或 .dark-mode（見 brand-system.css），
   兩個都要蓋到，否則切換主題只有一半會變。 */
[data-theme="dark"] .s35,
.dark-mode .s35 {
  --s35surface: #1C1917;
  --s35surface2: #292524;
  --s35surface3: #231F1D;
  --s35ink: #F5F5F4;
  --s35ink2: #D6D3D1;
  --s35ink3: #A8A29E;
  --s35ink4: #9CA3AF;
  --s35rule: rgba(255, 255, 255, .10);
  --s35rule2: rgba(255, 255, 255, .06);
  --s35accent: #FB923C;
  --s35info: #60A5FA;
  --s35warn: #FBBF24;
  --s35z1: #FF8A8A;
  --s35z2: #8F2525;
  --s35z3: #1C6B3C;
  --s35z4: #4FD684;
  --s35up: #FF0000;
  --s35dn: #00FF00;
  --s35l0: #F5F5F4;
  --s35l1: #F59E0B;
  --s35l2: #EC4899;
  --s35l3: #A855F7;
  --s35l4: #14B8A6;
}
.s35 * { box-sizing: border-box; }
.s35 h3, .s35 h4, .s35 h5 { margin: 0; text-wrap: balance; }
.s35-empty { padding: 40px 20px; text-align: center; color: #A8A29E; font-size: 13px; }
.s35 .s35-dim { color: var(--s35ink4); font-weight: 400; }

/* ── header ── */
.s35-hd {
  padding: 15px 18px 13px;
  border-bottom: 1px solid var(--s35rule);
  background: linear-gradient(180deg, var(--s35surface), var(--s35surface3));
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-start;
}
.s35-hd-m { flex: 1 1 320px; min-width: 0; }
.s35-pill {
  display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .03em;
  color: var(--s35accent); background: color-mix(in srgb, var(--s35accent) 12%, transparent);
  border-radius: 999px; padding: 2px 9px;
}
.s35-hd h3 { font-size: 19px; font-weight: 700; margin-top: 6px; letter-spacing: -.01em; }
.s35-sub { font-size: 12.5px; color: var(--s35ink2); margin: 5px 0 0; line-height: 1.65; max-width: 76ch; }
.s35-sub b { color: var(--s35ink); font-weight: 600; }
.s35-meta { font-size: 11.5px; color: var(--s35ink4); line-height: 1.7; text-align: right; flex: 0 0 auto; }
.s35-meta b { color: var(--s35ink2); font-weight: 500; }

/* ── KPI ── */
.s35-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--s35rule2); border-bottom: 1px solid var(--s35rule);
}
.s35-kpi { background: var(--s35surface); padding: 11px 15px; min-width: 0; }
.s35-k { font-size: 10.5px; color: var(--s35ink4); letter-spacing: .05em; font-weight: 600; margin-bottom: 4px; }
.s35-v { font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.s35-v small { font-size: 12.5px; font-weight: 500; color: var(--s35ink3); }
.s35-d { font-size: 11.5px; margin-top: 3px; color: var(--s35ink2); font-variant-numeric: tabular-nums; }

/* ── 區段 ── */
.s35-sec { padding: 13px 18px; border-bottom: 1px solid var(--s35rule2); }
.s35-sec > h4 { font-size: 13px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.s35 .s35-cap { font-size: 11.5px; color: var(--s35ink4); font-weight: 400; }

/* ── 回檔警示（border-left 用 info，跟下方 notes 的 warn 區分） ── */
.s35-dd {
  padding: 13px 18px; border-bottom: 1px solid var(--s35rule);
  border-left: 3px solid var(--s35info); background: var(--s35surface3);
}
.s35-dd h4 { font-size: 13px; font-weight: 700; color: var(--s35info); }
.s35-ddbar { display: flex; height: 26px; border-radius: 5px; overflow: hidden; margin-top: 9px; background: var(--s35surface2); }
.s35-ddseg {
  display: flex; align-items: center; justify-content: center; font-size: 11.5px;
  font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; min-width: 0;
}
.s35-ddlgd { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 7px; font-size: 11.5px; color: var(--s35ink2); }
.s35-ddlgd span { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.s35-dd p { font-size: 12px; color: var(--s35ink2); line-height: 1.7; margin: 9px 0 0; }

/* ── 四區圖例 ── */
.s35-zlgd { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--s35ink2); margin-top: 8px; }
.s35-zlgd span { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; }
.s35-sw { width: 11px; height: 11px; border-radius: 2px; flex: none; }

/* ── 現在的 5x4 ── */
.s35-mrow {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center;
  padding: 6px 0; border-bottom: 1px solid var(--s35rule2);
}
.s35-mrow:last-child { border-bottom: 0; }
.s35-nm { font-size: 12px; font-weight: 600; white-space: nowrap; }
.s35-mbar { display: flex; height: 24px; border-radius: 4px; overflow: hidden; position: relative; background: var(--s35surface2); }
.s35-mseg {
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; min-width: 0;
}
.s35-mid { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--s35ink); opacity: .85; }
.s35-mcnt { font-size: 11px; font-variant-numeric: tabular-nums; display: flex; gap: 7px; justify-content: flex-end; }
.s35-mcnt b { font-weight: 600; }
.s35-midlbl { font-size: 10px; color: var(--s35ink4); text-align: center; margin-top: 3px; }

/* ── 個股 K 線圖（ECharts）──
   🔴 容器一定要有明確高度。ECharts 在 0x0 的容器上 init 會把 0x0 記住，
      之後怎麼 resize 都救不回（#34 實案）。 */
.s35-ktb { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 4px 0 8px; }
.s35-seg { display: inline-flex; border: 1px solid var(--s35rule); border-radius: 7px; overflow: hidden; background: var(--s35surface); }
.s35-seg button {
  font: inherit; font-size: 11.5px; border: 0; background: var(--s35surface);
  color: var(--s35ink2); padding: 4px 11px; cursor: pointer;
  border-right: 1px solid var(--s35rule2);
}
.s35-seg button:last-child { border-right: 0; }
.s35-seg button[aria-pressed="true"] { background: var(--s35ink); color: var(--s35surface); font-weight: 600; }
.s35-seg button:focus-visible { outline: 2px solid var(--s35accent); outline-offset: -2px; }
.s35-pills { display: flex; gap: 5px; flex-wrap: wrap; }
.s35-pill {
  font: inherit; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--s35rule); background: var(--s35surface); color: var(--s35ink4);
  display: inline-flex; align-items: center; gap: 5px;
}
.s35-pill i { width: 12px; border-radius: 2px; display: block; }
.s35-pill[aria-pressed="true"] { color: var(--s35ink); background: var(--s35surface2); font-weight: 600; }
.s35-pill:focus-visible { outline: 2px solid var(--s35accent); outline-offset: 1px; }
.s35-kwrap { position: relative; }
#s35K { width: 100%; height: 400px; }
.s35-kmsg {
  display: flex; align-items: center; justify-content: center; text-align: center;
  height: 100%; padding: 20px; font-size: 12.5px; line-height: 1.8;
  color: var(--s35ink4); border: 1px dashed var(--s35rule); border-radius: 10px;
}
.s35-kmsg-warn { color: var(--s35warn); }
.s35-live {
  font-size: 11px; font-weight: 600; color: var(--s35warn);
  background: color-mix(in srgb, var(--s35warn) 14%, transparent);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}

/* ── 全市場那五張小圖（仍是內嵌 SVG）──
   viewBox + width:100% 會自己跟著容器縮放，不需要 ResizeObserver。 */
.s35-chart { display: block; width: 100%; }
.s35-chartwrap { position: relative; }
.s35-small5 { display: grid; grid-template-columns: repeat(auto-fit, minmax(218px, 1fr)); gap: 10px; margin-top: 8px; }
.s35-sm { min-width: 0; }
.s35-sm h5 {
  margin: 0 0 2px; font-size: 11.5px; font-weight: 600; color: var(--s35ink2);
  display: flex; justify-content: space-between; gap: 6px;
}
.s35-sm h5 span { font-weight: 400; color: var(--s35ink4); font-variant-numeric: tabular-nums; }
.s35-tip {
  position: absolute; pointer-events: none; background: var(--s35surface);
  border: 1px solid var(--s35rule); border-radius: 7px; padding: 7px 9px;
  font-size: 11.5px; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); min-width: 170px; z-index: 5;
}
.s35-r { display: flex; justify-content: space-between; gap: 14px; }
.s35-tip b { font-variant-numeric: tabular-nums; }
.s35-hr { height: 1px; background: var(--s35rule); margin: 4px 0; }

/* ── 個股 ── */
.s35-pick { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 9px 0 0; }
.s35-pick input {
  font: inherit; font-size: 12.5px; padding: 5px 9px; border: 1px solid var(--s35rule);
  border-radius: 7px; background: var(--s35surface); color: var(--s35ink); min-width: 148px;
}
.s35-pick input:focus-visible { outline: 2px solid var(--s35accent); outline-offset: 1px; }
.s35-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.s35-chip {
  font: inherit; font-size: 11.5px; padding: 3px 9px; border: 1px solid var(--s35rule);
  border-radius: 999px; background: var(--s35surface); color: var(--s35ink2); cursor: pointer;
}
.s35-chip[aria-pressed="true"] { background: var(--s35accent); border-color: var(--s35accent); color: #fff; font-weight: 600; }
.s35-chip:focus-visible { outline: 2px solid var(--s35accent); outline-offset: 1px; }
.s35-vals { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 7px; margin: 10px 0; }
.s35-val { background: var(--s35surface3); border: 1px solid var(--s35rule); border-radius: 7px; padding: 7px 9px; }
.s35-vk { font-size: 11px; color: var(--s35ink4); }
.s35-vv { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.s35-vz { font-size: 11px; margin-top: 2px; font-weight: 600; }
.s35-zb { display: inline-block; min-width: 15px; text-align: center; border-radius: 3px; padding: 0 3px; color: #fff; }

/* ── 指紋表 ── */
.s35-sort { display: inline-flex; border: 1px solid var(--s35rule); border-radius: 7px; overflow: hidden; background: var(--s35surface); margin-top: 9px; }
.s35-sort button {
  font: inherit; border: 0; background: var(--s35surface); color: var(--s35ink2);
  font-size: 11.5px; padding: 4px 11px; cursor: pointer; border-right: 1px solid var(--s35rule2);
}
.s35-sort button:last-child { border-right: 0; }
.s35-sort button[aria-pressed="true"] { background: var(--s35ink); color: var(--s35surface); font-weight: 600; }
.s35-tblwrap { overflow: auto; border: 1px solid var(--s35rule); border-radius: 10px; background: var(--s35surface); margin-top: 9px; max-height: 380px; }
.s35-tbl { border-collapse: collapse; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.s35-tbl th, .s35-tbl td { padding: 5px 9px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--s35rule2); }
.s35-tbl th { background: var(--s35surface2); color: var(--s35ink3); font-weight: 600; font-size: 11px; position: sticky; top: 0; z-index: 1; }
.s35-tbl th.s35-l, .s35-tbl td.s35-l { text-align: left; }
.s35-tbl tbody tr:last-child td { border-bottom: 0; }
.s35-tbl tbody tr { cursor: pointer; }
.s35-tbl tbody tr:hover td { background: var(--s35surface2); }
.s35-tbl tbody tr[aria-selected="true"] td { background: color-mix(in srgb, var(--s35accent) 10%, transparent); }
.s35-fp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1px; }
.s35-hint { font-size: 11.5px; color: var(--s35ink4); padding: 7px 2px 0; line-height: 1.65; }
.s35-tagman { font-size: 9.5px; padding: 0 4px; border-radius: 3px; background: var(--s35surface2); color: var(--s35ink4); vertical-align: 1px; }

/* ── 誠實註記 ── */
.s35-notes { border-top: 1px solid var(--s35rule); border-left: 3px solid var(--s35warn); background: var(--s35surface3); padding: 12px 18px; }
.s35-notes h4 { font-size: 12.5px; font-weight: 700; color: var(--s35warn); }
.s35-notes ul { margin: 7px 0 0; padding-left: 18px; font-size: 12px; color: var(--s35ink2); line-height: 1.8; }
.s35-notes code { font-size: 11px; background: var(--s35surface2); padding: 1px 4px; border-radius: 3px; }

/* ── 窄版（右側被拖窄，或手機） ── */
@media (max-width: 760px) {
  #s35K { height: 310px; }
  .s35-ktb { gap: 6px 9px; }
  .s35-kpis { grid-template-columns: repeat(2, 1fr); }
  .s35-meta { text-align: left; }
  .s35-mrow { grid-template-columns: 52px 1fr; }
  .s35-mcnt { display: none; }
}

/* 3D 突破雷達的開關。3D 本體的樣式在 strategy-s35-map3d.css，
   Map3D 模組自己的 .m3d-* 在 strategy-s30-map3d.css（已全域載入）。 */
.s35 .s35-m3d-lede { font-size: 13px; color: var(--s35ink2); margin: 6px 0 0; line-height: 1.65; }
.s35 .s35-m3d-open { display: flex; gap: 11px; align-items: center; flex-wrap: wrap; margin-top: 13px; }
.s35 .s35-m3d-go {
  font: 600 13px/1 inherit; color: var(--s35surface); background: var(--s35ink);
  border: 0; border-radius: 8px; padding: 11px 17px; cursor: pointer;
}
.s35 .s35-m3d-go:hover { opacity: .85; }
.s35 .s35-m3d-go[disabled] { opacity: .5; cursor: default; }