/* ---------- 大戶動向頁（任務 #166，見 web/static/big_holders_bubble.js） ----------
   本檔只服務 /big-holders 一頁，class 一律 `.bh-` 前綴，不與 industry.css
   的 `.ind-` 共用任何選擇器——各頁泡泡各自獨立模組是既定架構，樣式跟著
   模組走，改這頁不會意外動到產業頁。

   版面跳動防治：.bh-bubble-stage 用 aspect-ratio 先把高度佔住，canvas 與
   骨架都絕對定位鋪滿它——資料還沒回來、或整塊初始化失敗（JS 會把
   #bh-bubble 整個 display:none）都不會讓下方文字上下彈跳。
   顏色一律走代幣，四主題自動跟著換；canvas 內的顏色由 JS 讀 SvTheme。 */

.bh-section {
  margin: 0 0 28px;
}

.bh-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.bh-section-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.bh-as-of {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.bh-bubble {
  margin: 0;
  padding: 14px 14px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.bh-bubble-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.bh-bubble-subtitle {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.bh-bubble-ranges {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.bh-bubble-range {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.bh-bubble-range:hover {
  color: var(--text);
}

.bh-bubble-range.active {
  background: var(--accent-bg);
  color: var(--accent);
}

/* 定調句（規則生成、零 AI）：內容由 big_holders_bubble.js 每切一週重寫。
   產業版是 JS 動態建元素＋內嵌樣式（因為那頁的模板不歸該棒改），本頁模板
   與樣式同屬本任務，所以元素寫在模板、樣式寫在這裡——同一個設計，少一層
   內嵌 style。 */
.bh-bubble-headline {
  margin: 2px 0 10px;
  padding: 7px 12px;
  border-left: 3px solid var(--accent);
  background: var(--bg-2);
  border-radius: 0 10px 10px 0;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--text);
}

.bh-bubble-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 560px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.bh-bubble-stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: manipulation;
}

.bh-bubble-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-muted);
}

/* 明細小卡：hover（桌機）／點擊、觸控（手機）叫出，位置由 JS 依泡泡座標
   計算後寫 left/top（相對 .bh-bubble-stage）。pointer-events:none 讓游標
   不會被卡片擋住導致 hover 抖動；釘選狀態的關閉靠點空白（見 JS）。 */
.bh-bubble-card {
  position: absolute;
  z-index: 2;
  min-width: 168px;
  max-width: 230px;
  padding: 8px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
}

.bh-bubble-card[hidden] {
  display: none;
}

.bh-bubble-card-name {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 4px;
}

.bh-bubble-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.bh-bubble-card-k {
  color: var(--text-muted);
}

.bh-bubble-card-v {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.bh-bubble-up {
  color: var(--up);
}

.bh-bubble-down {
  color: var(--down);
}

.bh-bubble-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.bh-bubble-play {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-2);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}

.bh-bubble-play:hover:not(:disabled) {
  background: var(--card-bg-hover);
}

.bh-bubble-play:disabled {
  opacity: 0.45;
  cursor: default;
}

.bh-bubble-seek {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.bh-bubble-seek:disabled {
  opacity: 0.45;
  cursor: default;
}

.bh-bubble-weeklabel {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bh-bubble-legend {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* 色帶：跟 big_holders_bubble.js ratioRGB() 同一條藍→紫→橘三段（中段錨紫
   #964EA5），改版要兩邊一起改。 */
.bh-bubble-ramp {
  display: inline-block;
  width: 54px;
  height: 9px;
  vertical-align: -1px;
  margin: 0 4px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgb(60, 130, 235), rgb(150, 78, 165), rgb(255, 170, 60));
}

.bh-bubble-note {
  margin: 6px 0 0;
  font-size: 11px;
  color: var(--text-faint);
}

/* 整塊熄燈時的誠實空狀態（JS hideBlock() 會把它 unhide）。 */
.bh-unavailable {
  padding: 22px 14px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.bh-unavailable[hidden] {
  display: none;
}

/* 讀圖說明：三色語意象限的白話對照，放圖下方。 */
.bh-guide {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.bh-guide-item {
  padding: 10px 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-muted);
}

.bh-guide-item b {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  color: var(--text);
}

@media (max-width: 768px) {
  .bh-bubble {
    padding: 12px 10px 8px;
  }

  /* 手機直式：橫幅 16:9 在窄螢幕只剩兩百多像素高，泡泡會擠成一條。
     改 3:4 直式，縱軸（大戶比變化）才有足夠行程看出上下輪動。 */
  .bh-bubble-stage {
    aspect-ratio: 3 / 4;
    max-height: 68vh;
  }

  /* 手機：週標籤（例「2026-08-14（第 12 / 12 週）」）nowrap 之後會吃掉
     一半行寬，拖桿被壓到剩兩百多 px、幾乎沒法 scrub。改讓標籤自己占一行
     （order:-1 排在播放鍵之上），拖桿拿回整行。 */
  .bh-bubble-controls {
    flex-wrap: wrap;
  }

  .bh-bubble-weeklabel {
    order: -1;
    flex-basis: 100%;
    text-align: right;
    font-size: 11px;
  }

  .bh-bubble-card {
    min-width: 150px;
    max-width: 190px;
    font-size: 11.5px;
  }
}