/* ============================================================
   市場日報設計稿 · wall.css（遠牆生命週期）
   契約：
   - 選擇器一律 .wall- 前綴；不宣告任何層疊層級（層疊靠 DOM 順序與 position 決定，
     tooltip 在 SVG 之後，同一個 .wall-plot 內自然疊在圖上）
   - 顏色全走 daily.css 的四套主題 token，本檔不寫任何色碼
   - 座標系與圖的幾何來自現站 ext/index.html（2026-08-25 拍板），此處只換皮
   - 沿用 daily.css 既有 .panel／.panel-head／.chip／.chart-legend／
     .chart-note／.disclaimer／.sc-tick，不重複定義
   ============================================================ */

/* ---------- 控制列 ---------- */
.wall-ctrl {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 18px;
  padding: 0 20px 12px;
}
.wall-grp { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wall-grp-label, .wall-min-label { font-size: 13px; color: var(--ink-2); white-space: nowrap; }

.wall-min { display: inline-flex; align-items: center; gap: 8px; }
.wall-min-input {
  height: 32px; width: 140px; padding: 0 10px;
  background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--r-md);
  font: inherit; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.wall-min-input:focus { border-color: var(--indigo); outline: none; }
.wall-min-input::placeholder { color: var(--ink-3); }
.wall-min-unit { font-size: 13px; color: var(--ink-2); white-space: nowrap; }

/* ---------- 冷啟動提示（§8 誠實性：存活時長只是觀測時長） ---------- */
.wall-coldstart {
  margin: 0 20px 12px;
  padding: 10px 13px;
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--r-md);
  font-size: 13px; line-height: 1.7; color: var(--ink);
}
.wall-coldstart b { color: var(--warn); font-weight: 600; }

/* ---------- meta 列 ---------- */
.wall-metarow {
  display: flex; flex-wrap: wrap;
  gap: 4px 18px;
  padding: 0 20px 10px;
  font-size: 13px; line-height: 1.7; color: var(--ink-2);
}
.wall-metarow b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- 圖與 tooltip ---------- */
/* position: relative 只是給 tooltip 定位用；tooltip 的層疊靠 DOM 順序
   （它是 .wall-plot 的最後一個子節點），不宣告層疊層級。 */
.wall-plot { position: relative; padding: 0 12px 4px; }
.wall-plot svg { display: block; width: 100%; height: auto; }
/* 主圖按住拖曳＝平移時間範圍。touch-action: pan-y 讓瀏覽器自己分流：
   垂直手勢照常捲頁面，水平手勢才交給我們（JS 端再做一次水平／垂直判定）。 */
.wall-plot > svg { cursor: grab; touch-action: pan-y; }
.wall-plot.is-panning > svg { cursor: grabbing; }

/* ---------- 總覽小圖（時間範圍框選） ---------- */
/* 與主圖同一個 700 座標系、同一組 plotX0／plotX1，兩張圖的時間軸因此對得起來。 */
.wall-brush { padding-top: 2px; }
.wall-brush svg { touch-action: pan-y; }
.wall-brush-bg { fill: var(--surface-2); }
.wall-brush-dens { fill: var(--ink-3); fill-opacity: 0.42; }
.wall-brush-price { fill: none; stroke: var(--ink); stroke-width: 1; stroke-opacity: 0.72; stroke-linejoin: round; }
/* 範圍外用遮罩壓暗，不是把它裁掉：讀者看得到自己正在看整段時間的哪一截。 */
.wall-brush-mask { fill: var(--ink-3); fill-opacity: 0.3; }
.wall-brush-win { fill: transparent; stroke: var(--indigo); stroke-width: 1; stroke-opacity: 0.55; cursor: grab; pointer-events: all; }
.wall-brush-win:active { cursor: grabbing; }
.wall-brush-handle { fill: var(--indigo); cursor: ew-resize; }
/* 把手本體 12px 寬（看得清楚），觸控命中區另外一層 44px（點得到），兩者同一個 data-role */
.wall-brush-grip { fill: transparent; pointer-events: all; cursor: ew-resize; }
.wall-brush-handle:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.wall-brush-handle:focus:not(:focus-visible) { outline: none; }
.wall-brush-axis { fill: var(--ink-3); font-size: 13px; font-family: var(--font-main); }

.wall-tip {
  position: absolute; left: 0; top: 0;
  width: max-content; max-width: min(300px, 82vw);
  pointer-events: none;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule-2); border-radius: var(--r-md);
  padding: 8px 11px;
  font-size: 13px; line-height: 1.7;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
  opacity: 0; transition: opacity 120ms linear;
}
.wall-tip b { font-weight: 600; }
.wall-tip .wall-tip-dim { color: var(--ink-2); }

/* 牆線段：可見層不接滑鼠事件（太細，命中率低），命中交給下方 .wall-hit 那層
   粗透明線，兩層幾何完全一致（同一組 x1/x2/y），命中到的一定是視覺上那一條。 */
.wall-seg { pointer-events: none; }
.wall-hit { stroke: var(--ink); stroke-opacity: 0; stroke-width: 8; pointer-events: stroke; cursor: pointer; }
.wall-priceline { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-opacity: 0.95; }
.wall-pricedot { fill: var(--ink); }
.wall-grid { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }
.wall-band { stroke: var(--rule-2); stroke-width: 0.8; stroke-dasharray: 6 4; stroke-opacity: 0.9; }
/* 2026-09-13：viewBox 改成容器實寬（1 單位＝1px）後，圖內文字要跟 .wall-notes
   （圖下說明，13px）同級，不再比它小一截。.sc-tick 是跨圖共用類別（daily.css
   基底 12px），這裡用 #wallSvg 加高特異度只覆寫本圖，不動其他圖表的刻度。 */
#wallSvg .sc-tick { font-size: 13px; }
/* 遠端帶：|T| 超過上限的牆全部夾在這條線上。線本身比價帶邊界更實，讀者才知道
   這不是「又一個刻度」而是一道邊界；線段與三角的淡化在 wall.js 逐條給值。 */
.wall-faredge { stroke: var(--rule-2); stroke-width: 1; stroke-dasharray: 1 3; stroke-opacity: 0.95; }
.wall-fartick { font-variant-numeric: tabular-nums; }
.wall-seg-far, .wall-far-tip { pointer-events: none; }
.wall-nodata { fill: var(--ink-3); fill-opacity: 0.16; }
.wall-nodata-label { fill: var(--ink-3); font-size: 13px; font-family: var(--font-main); }
.wall-axis-title { fill: var(--ink-2); font-size: 13px; font-family: var(--font-main); }
.wall-marker { stroke: var(--indigo); stroke-width: 1.2; stroke-dasharray: 5 3; }
.wall-marker-label { fill: var(--indigo); font-size: 13px; font-weight: 600; font-family: var(--font-main); }
.wall-empty { fill: var(--ink-2); font-size: 13px; font-family: var(--font-main); }

/* ---------- 圖例（沿用 .chart-legend 的排版，只加自己的記號） ---------- */
.wall-legend .wall-sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.wall-legend .wall-sw-sell { background: var(--down); }
.wall-legend .wall-sw-buy { background: var(--up); }
.wall-legend .wall-sw-gap { background: var(--ink-3); opacity: 0.3; }
.wall-legend .wall-mini { display: inline-block; vertical-align: middle; }

/* ---------- 圖下說明 ---------- */
.wall-notes .wall-note-line { display: block; }
.wall-notes .wall-note-line + .wall-note-line { margin-top: 4px; }

@media (max-width: 767px) {
  .wall-ctrl, .wall-metarow { padding-inline: 14px; }
  .wall-coldstart { margin-inline: 14px; }
  .wall-plot { padding-inline: 6px; }
  /* 2026-09-25 mobile_clip：原「窄螢幕修五」把 SVG 釘在 700px＋容器橫向捲動，
     手機上看起來就是右半張圖被切掉。改成 wall.js 依容器實寬畫 viewBox（1 單位＝1px，
     字級仍是真的 13px、不會被等比壓縮），CSS 維持桌機的 width:100%，時間範圍靠框選條
     縮放。總覽小圖同一個 W，把手的 44 座標單位照樣是 44 實體像素。 */
  .wall-min-input { height: 44px; }
  /* 名目下限列：說明文字允許換行，不再把整列撐出面板 */
  .wall-min { flex-wrap: wrap; max-width: 100%; }
  .wall-min-unit { white-space: normal; min-width: 0; }
}