/*
 * 個股事件徽章（任務 #238）——自選股清單／我的持股明細表／個股頁 header
 * 三個消費點共用的唯一一份樣式，資料與 DOM 由 stock_events.js 產生。
 *
 * 顏色**零寫死色票**：全部由主題代幣現算——
 *   --watch-fg / --watch-rgb  金色系（站長參考圖裡券商 App 的黃標同一個
 *                             質感；五套主題各自定義，深色 #f5a623、
 *                             三套淺色與香檳 #8f5a04）
 *   --on-watch                「實心底上的字」專用代幣（配 --watch-fg 當底
 *                             時的高對比字色，五套主題都有定義）
 * 刻意不碰 --up/--down：紅綠在本站是漲跌的專用語意，日程事件借用會讓人
 * 誤讀成「這個事件是利多／利空」。
 *
 * 今日 vs 未來的視覺分工：
 *   .is-today  實底＋粗體＝今天就發生，掃一眼就要跳出來
 *   （預設）   淡底＋細框＝未來七天內，存在感低一階
 */

.sv-evt-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  /* line-height 1.4 ＋ inline-flex：徽章自身高度 = 字高 × 1.4 + 2px padding
     ≈ 18px，比清單列的既有字級（14~15px、line-height 1.5 ≈ 22px）矮，
     所以掛進任何一列都不會把列高撐開（手機列高擠壓是 B15/B27 的老坑）。 */
  line-height: 1.4;
  /* 「法說 8/26」中間有空白，不鎖 nowrap 會在窄螢幕被拆成兩行、把膠囊撐成
     兩層。這一條是手機不破版的關鍵。 */
  white-space: nowrap;
  color: var(--watch-fg);
  background: rgba(var(--watch-rgb), 0.14);
  border: 1px solid rgba(var(--watch-rgb), 0.42);
}

.sv-evt-badge.is-today {
  color: var(--on-watch);
  background: var(--watch-fg);
  border-color: var(--watch-fg);
  font-weight: 700;
}

/* ---- 交易警示兩型（M2，2026-08-19）----
 * 處置／注意與上面的法說會、除息日**不是同一類東西**：後者是中性日程，前者
 * 是交易條件已經改變的客觀事實，所以一律實底（不分今天或未來），掃一眼就要
 * 跳出來。這裡是全站唯一例外——刻意借用紅／黃兩個語意色：
 *   .is-disposal   --danger 實底＋--on-accent 字（同 app.css
 *                  .admin-delete-danger-btn 的既有配對，五套主題都已調過對比）
 *   .is-attention  --warn-fg 實底＋--on-watch 字（--warn-fg 與 --watch-fg 在
 *                  五套主題逐值相同，--on-watch 就是為這個底設計的字色代幣）
 * 紅在本站的既有語意是「上漲」，這兩顆膠囊帶著「處置中」「注意股」的字面
 * 標籤一起出現，不會被讀成漲跌；顏色只負責讓人先看到它。
 * 排在 .is-today 之後：同時是今天發生的警示時，型別色贏（金色是日程的語言）。
 * **零寫死色票**：整段沒有任何 # 開頭的十六進位值，全部走主題代幣。 */

.sv-evt-badge.is-disposal {
  color: var(--on-accent);
  background: var(--danger);
  border-color: var(--danger);
  font-weight: 700;
}

.sv-evt-badge.is-attention {
  color: var(--on-watch);
  background: var(--warn-fg);
  border-color: var(--warn-fg);
  font-weight: 700;
}

/* 手機：再縮一階字級與間距。徽章掛在股名後面，窄螢幕上股名本身就已經吃掉
   大半列寬，這裡讓徽章盡量不參與擠壓。 */
@media (max-width: 640px) {
  .sv-evt-badge {
    margin-left: 4px;
    padding: 0 5px;
    font-size: 10px;
  }
}

/* 個股頁 header 的容器：股名／代號那一行是 flex，事件徽章跟著既有的
   .industry-badge 排在同一列；空的時候不佔寬（:empty 不給 margin）。 */
.stock-events-slot {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.stock-events-slot:empty {
  display: none;
}

/* 個股頁的字級整體大一階，徽章跟著放大一點才不會顯得像雜訊。 */
.stock-events-slot .sv-evt-badge {
  font-size: 12px;
  padding: 2px 8px;
}

@media (max-width: 640px) {
  .stock-events-slot .sv-evt-badge {
    font-size: 11px;
    padding: 1px 6px;
  }
}