/* 事件卡與氣泡列：首頁各市場區塊、各市場完整頁共用（配合 stream.js）。
   .ev   一則事件：時間 ｜ 方向 ｜ 標題＋細節
   .bb   一顆氣泡：時間 ｜ 買／賣 ｜ 量 ｜ 價 */
.stream { display: flex; flex-direction: column; }
.stream .empty { padding: 12px 0; font-size: 12.5px; color: var(--dim); }

/* 商品晶片：每列都有，可點開該商品的盤口圖表 */
.sym { display: inline-block; padding: 1px 7px; border: 1px solid var(--line-3); border-radius: var(--r-sm); font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: var(--accent-fg); white-space: nowrap; }
a.sym:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-fg); }
.ev { display: grid; grid-template-columns: 52px 18px minmax(0, 1fr); gap: 2px 10px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line); }
.ev:first-child { border-top: 0; }
.ev__t { font-family: var(--mono); font-size: 12px; color: var(--dim); white-space: nowrap; }
.ev__d { font-family: var(--mono); font-size: 13px; font-weight: 700; text-align: center; }
.ev__d.up { color: var(--up); } .ev__d.down { color: var(--down); } .ev__d.flat { color: var(--mute); }
.ev__h { font-size: 14px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ev__h .tag { font-size: 10.5px; padding: 1px 6px; }
.ev__x { grid-column: 3; font-size: 12px; color: var(--mute); font-family: var(--mono); }
.ev__n { grid-column: 3; font-size: 12px; color: var(--dim); line-height: 1.5; }
.ev.open .ev__h::after { content: '進行中'; font-size: 10.5px; font-weight: 400; color: var(--accent-fg); }

.bb { display: grid; grid-template-columns: 52px 28px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12.5px; }
.bb:first-child { border-top: 0; }
.bb__t { color: var(--dim); font-size: 12px; }
.bb__s { font-weight: 700; } .bb__s.buy { color: var(--up); } .bb__s.sell { color: var(--down); }
.bb__q { color: var(--fg); }
.bb__q small { color: var(--dim); font-size: 11px; margin-left: 6px; }
.bb__p { color: var(--mute); }

/* 氣泡量的視覺：量越大，底色越明顯（stream.js 設 --w） */
.bb { position: relative; }
.bb::before { content: ''; position: absolute; left: 90px; right: 0; top: 4px; bottom: 4px; width: var(--w, 0%); max-width: calc(100% - 90px); border-radius: 3px; background: rgba(var(--rgb, 163, 170, 178), .10); pointer-events: none; }
.bb.buy::before { --rgb: var(--up-rgb); } .bb.sell::before { --rgb: var(--down-rgb); }