/* ══════════════════════════════════════════════════════════════
   台股盤後通 — stock.css（個股頁 stock/{code}/）
   v2 per-stock SEO 頁專屬視覺。沿用 style.css Design Token 與工具頁專業財經調性、
   tps-* 前綴、紅漲綠跌（.up/.down/.flat 由 style.css 提供）。Mobile First。
   載入順序：/common/css/ff-bootstrap.css → ../../style.css（token＋卡片骨架）
            → ../../subpage.css（麵包屑＋內鏈卡）→ 本檔（個股頁增補）。
   個股頁沿用 .tps-sub 容器寬度與 .tps-card 卡片骨架；本檔僅補個股頁特有元件。
   ══════════════════════════════════════════════════════════════ */

/* 個股頁容器：沿用 .tps-sub 寬度（subpage.css），卡片間距收斂 */
.tps-stock .tps-card { margin-bottom: var(--tps-sp-4); }

/* 交易警示色 token（v3 #31 第二段）：style.css 僅有紅漲 (--tps-c-up) 綠跌 (--tps-c-down)，無語意化
   warning；處置、注意、停牌屬「注意」而非「漲跌」，故用獨立琥珀色、與漲跌色分離避免誤讀。 */
.tps-stock { --tps-c-warn: #e0a23a; }

/* ── 頁首（代號＋簡稱 H1＋全名＋市場/產業標籤） ── */
.tps-stock__head { margin: var(--tps-sp-2) 0 var(--tps-sp-3); }
.tps-stock__title {
  display: flex;
  align-items: baseline;
  gap: var(--tps-sp-3);
  flex-wrap: wrap;
}
.tps-stock__code {
  font-family: var(--tps-ff-num);
  font-size: var(--tps-fs-xl);
  font-weight: 800;
  color: var(--tps-c-primary);
}
.tps-stock__name {
  font-size: var(--tps-fs-2xl);
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.tps-stock__fullname {
  font-size: var(--tps-fs-sm);
  color: var(--tps-c-text-secondary);
  margin: var(--tps-sp-2) 0 0;
}
.tps-stock__tags {
  display: flex;
  gap: var(--tps-sp-2);
  flex-wrap: wrap;
  margin-top: var(--tps-sp-2);
}
.tps-stock__market,
.tps-stock__industry {
  font-size: var(--tps-fs-xs);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.tps-stock__market { color: var(--tps-c-text-secondary); background: var(--tps-c-surface); }
.tps-stock__industry { color: var(--tps-c-primary); background: var(--tps-c-primary-soft); }

/* ── 公司檔案定義列表 ── */
.tps-deflist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
}
.tps-deflist__row {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: var(--tps-sp-3);
  padding: var(--tps-sp-2) 0;
  border-bottom: 1px solid var(--tps-c-border);
}
.tps-deflist__row:last-child { border-bottom: none; }
.tps-deflist dt { color: var(--tps-c-text-muted); font-size: var(--tps-fs-sm); }
.tps-deflist dd { margin: 0; color: var(--tps-c-text); font-size: var(--tps-fs-sm); word-break: break-word; }

.tps-stock__contacts {
  display: flex;
  gap: var(--tps-sp-3);
  flex-wrap: wrap;
  margin-top: var(--tps-sp-3);
  padding-top: var(--tps-sp-3);
  border-top: 1px solid var(--tps-c-border);
}
.tps-stock__contact {
  font-size: var(--tps-fs-sm);
  color: var(--tps-c-primary);
  text-decoration: none;
}
.tps-stock__contact:hover { text-decoration: underline; }

/* ── 行情頭（收盤＋漲跌） ── */
.tps-quote__chg { font-family: var(--tps-ff-num); font-weight: 700; font-size: var(--tps-fs-lg); }
.tps-stock__period {
  font-size: var(--tps-fs-sm);
  color: var(--tps-c-text-secondary);
  margin: 0 0 var(--tps-sp-3);
}
.tps-stock__note {
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-text-muted);
  margin: var(--tps-sp-3) 0 0;
  line-height: 1.5;
}
.tps-stock__lead { margin: 0 0 var(--tps-sp-3); color: var(--tps-c-text-secondary); font-size: var(--tps-fs-sm); }

/* 缺漏降級提示（區塊無資料時） */
.tps-empty-note {
  margin: 0;
  padding: var(--tps-sp-3) var(--tps-sp-4);
  background: var(--tps-c-surface);
  border-radius: var(--tps-r-sm);
  color: var(--tps-c-text-muted);
  font-size: var(--tps-fs-sm);
}

/* ── 內鏈清單（指標解讀、同產業個股） ── */
.tps-linklist { list-style: none; margin: 0; padding: 0; }
.tps-linklist li { padding: var(--tps-sp-2) 0; border-bottom: 1px solid var(--tps-c-border); }
.tps-linklist li:last-child { border-bottom: none; }
.tps-linklist a { color: var(--tps-c-primary); text-decoration: none; font-size: var(--tps-fs-sm); }
.tps-linklist a:hover { text-decoration: underline; }
.tps-linklist .tps-num { color: var(--tps-c-text-secondary); margin-right: var(--tps-sp-1); }
.tps-linklist--cols { display: grid; grid-template-columns: 1fr; gap: 0; }

/* 回工具頁（明確按鈕：原為極淡灰文字連結、夜底近乎看不到 → 改外框按鈕、亮字高對比） */
.tps-stock__back { margin: var(--tps-sp-6) 0 0; }
.tps-stock__back a {
  display: inline-flex;
  align-items: center;
  gap: var(--tps-sp-2);
  padding: var(--tps-sp-3) var(--tps-sp-5);
  font-size: var(--tps-fs-base);
  font-weight: 700;
  color: var(--tps-c-text);
  background: var(--tps-c-surface);
  border: 1px solid var(--tps-c-border);
  border-radius: var(--tps-r-sm);
  text-decoration: none;
  transition: color var(--tps-dur) var(--tps-ease), border-color var(--tps-dur) var(--tps-ease);
}
.tps-stock__back a:hover { color: var(--tps-c-primary); border-color: var(--tps-c-primary); }

/* ══════════════════════════════════════════════════════════════
   v3 #31 第二段 — hub 新區塊（籌碼面、交易警示、成交月年、最新動態 timeline）
   沿用 .tps-card 骨架、.tps-quote__grid + .tps-metric 數值格、Design Token、紅漲綠跌。
   ══════════════════════════════════════════════════════════════ */

/* 卡片內子區（籌碼面多子維度、成交月年）：子標題＋與上一子區的分隔 */
.tps-chip__sub { margin-top: var(--tps-sp-4); }
.tps-chip__sub:first-of-type { margin-top: var(--tps-sp-3); }
.tps-chip__subtitle {
  font-size: var(--tps-fs-sm);
  font-weight: 700;
  color: var(--tps-c-text-secondary);
  margin: 0 0 var(--tps-sp-3);
}
.tps-chip__note {
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-text-muted);
  margin: var(--tps-sp-2) 0 0;
  line-height: 1.5;
}

/* 數值格次要說明（年最高、最低的發生日） */
.tps-metric__sub {
  display: block;
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-text-muted);
  font-weight: 400;
  margin-top: 2px;
}

/* 大股東名稱標籤雲 */
.tps-taglist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tps-sp-2);
}
.tps-taglist li {
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-text);
  background: var(--tps-c-surface);
  border: 1px solid var(--tps-c-border);
  border-radius: var(--tps-r-sm);
  padding: 3px 10px;
}

/* 事件列（內部人轉讓申報） */
.tps-eventlist { list-style: none; margin: 0; padding: 0; }
.tps-eventlist li {
  padding: var(--tps-sp-2) 0;
  border-bottom: 1px solid var(--tps-c-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--tps-sp-1) var(--tps-sp-3);
  align-items: baseline;
}
.tps-eventlist li:last-child { border-bottom: none; }
.tps-eventlist__main { font-size: var(--tps-fs-sm); color: var(--tps-c-text); }
.tps-eventlist__meta { font-size: var(--tps-fs-xs); color: var(--tps-c-text-muted); }

/* 交易警示旗標（除權息＝info 中性、處置、注意、停牌＝warn） */
.tps-flaglist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tps-sp-2); }
.tps-flag {
  display: flex;
  gap: var(--tps-sp-3);
  align-items: flex-start;
  padding: var(--tps-sp-3);
  border-radius: var(--tps-r-sm);
  border: 1px solid var(--tps-c-border);
  background: var(--tps-c-surface);
}
.tps-flag__tag {
  flex: 0 0 auto;
  font-size: var(--tps-fs-xs);
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.tps-flag__body { font-size: var(--tps-fs-sm); color: var(--tps-c-text); line-height: 1.5; }
.tps-flag--info .tps-flag__tag { color: var(--tps-c-primary); background: var(--tps-c-primary-soft); }
/* 警示色：用琥珀色（caution），刻意「不」用 --tps-c-up(紅漲)、--tps-c-down(綠跌)，避免與紅漲綠跌語意混淆。 */
.tps-flag--warn { border-color: color-mix(in srgb, var(--tps-c-warn) 45%, var(--tps-c-border)); }
.tps-flag--warn .tps-flag__tag { color: #1a1206; background: var(--tps-c-warn); }

/* 最新動態 timeline */
.tps-tl { list-style: none; margin: 0; padding: 0; }
.tps-tl__item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tps-sp-1) var(--tps-sp-3);
  align-items: baseline;
  padding: var(--tps-sp-2) 0;
  border-bottom: 1px solid var(--tps-c-border);
}
.tps-tl__item:last-child { border-bottom: none; }
.tps-tl__date { font-size: var(--tps-fs-xs); color: var(--tps-c-text-muted); flex: 0 0 auto; }
.tps-tl__tag {
  flex: 0 0 auto;
  font-size: var(--tps-fs-xs);
  font-weight: 700;
  color: var(--tps-c-primary);
  background: var(--tps-c-primary-soft);
  border-radius: 999px;
  padding: 1px 8px;
}
.tps-tl__body { font-size: var(--tps-fs-sm); color: var(--tps-c-text); }

/* ══════════════════════════════════════════════════════════════
   v3 #31 第三段 — 歷史 spoke 頁（stock/{code}/{revenue|financials|dividends}/）
   沿用 hub .tps-card 骨架與 style.css 的 .tps-table；spoke 為純靜態年表（不掛 JS 排序）。
   ══════════════════════════════════════════════════════════════ */

/* hub → 3 spoke 完整歷史內鏈（叢集樞紐）：每項標題＋描述＋累積期數副標 */
.tps-histlinks li { padding: var(--tps-sp-3) 0; }
.tps-histlink__title { display: block; color: var(--tps-c-primary); font-weight: 700; font-size: var(--tps-fs-base); }
.tps-histlink__desc { display: block; color: var(--tps-c-text-secondary); font-size: var(--tps-fs-sm); margin-top: 2px; }
.tps-histlink__meta { display: block; color: var(--tps-c-text-muted); font-size: var(--tps-fs-xs); margin-top: 2px; }

/* [暫時 hotfix] 隱藏整個「完整歷史資料」區塊：revenue、financials、dividends 三個 spoke 子頁尚未部署
   （spoke 部署 0、累積中），hub 連結點擊會導向 404（Azure 預設 404）。
   待 spoke 子頁實際上線後移除本規則、恢復 hub → spoke 內鏈樞紐角色。 */
.tps-stock section[aria-labelledby="t-hist"] { display: none; }

/* spoke 誠實累積標註橫幅：與 hub 資料橫幅同調性、單行說明（資料淺＝正常、不假裝有十年） */
.tps-databar--spoke {
  display: block;
  margin: 0 0 var(--tps-sp-4);
}
.tps-databar--spoke .tps-databar__note { font-size: var(--tps-fs-sm); line-height: 1.5; }

/* 歷史年表（靜態）：style.css 的 .tps-table thead th 預設 cursor:pointer（暗示可排序、給工具頁排行用）；
   spoke 年表為 build-time 靜態渲染、無 JS 排序，故此 modifier 還原成不可點、移除排序符位。 */
.tps-table--history thead th { cursor: default; user-select: text; }
.tps-table--history thead th[aria-sort]::after { content: none; }
/* 年增率欄趨勢條與數值同列：數值右對齊、條接在數字後（窄欄不換行） */
.tps-table--history td .tps-trend { margin-left: var(--tps-sp-2); }

/* 純 CSS 趨勢條（零圖依賴）：視覺化年增率方向與幅度；中性、非投資建議。 */
.tps-trend {
  display: inline-block;
  vertical-align: middle;
  width: 44px;
  height: 6px;
  border-radius: 999px;
  background: var(--tps-c-surface);
  overflow: hidden;
}
.tps-trend__fill { display: block; height: 100%; border-radius: 999px; }
.tps-trend--up .tps-trend__fill { background: var(--tps-c-up); }
.tps-trend--down .tps-trend__fill { background: var(--tps-c-down); }
.tps-trend--flat .tps-trend__fill { background: var(--tps-c-text-muted); }

/* ══════════════════════════════════════════════════════════════
   v3 #31 第四段 — ETF 獨立頁（etf/{code}/）
   沿用 hub .tps-card 骨架、.tps-deflist、.tps-quote__grid；ETF 特有：類型標籤、風險提示、缺口佔位卡。
   ══════════════════════════════════════════════════════════════ */

/* ETF 類型標籤（識別頭，沿用 .tps-stock__industry 形狀；風險型標紅） */
.tps-etf__type {
  font-size: var(--tps-fs-xs);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
  color: var(--tps-c-primary);
  background: var(--tps-c-primary-soft);
}
.tps-etf__type--risk { color: #1a1206; background: var(--tps-c-warn); }

/* 槓桿/反向風險提示卡（琥珀框、醒目但不喧賓奪主） */
.tps-etf__risk {
  border-color: color-mix(in srgb, var(--tps-c-warn) 50%, var(--tps-c-border));
  background: color-mix(in srgb, var(--tps-c-warn) 8%, var(--tps-c-surface));
}
.tps-etf__risk-title {
  font-size: var(--tps-fs-base);
  font-weight: 700;
  color: var(--tps-c-warn);
  margin: 0 0 var(--tps-sp-2);
}
.tps-etf__risk p { margin: 0; font-size: var(--tps-fs-sm); color: var(--tps-c-text); line-height: 1.6; }

/* 缺口維度誠實佔位卡（NAV/折溢價/持股/費用率/配息＝資料準備中、不放假資料） */
.tps-pending__list { list-style: none; margin: var(--tps-sp-2) 0 0; padding: 0; }
.tps-pending__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tps-sp-1) var(--tps-sp-3);
  padding: var(--tps-sp-3) 0;
  border-bottom: 1px solid var(--tps-c-border);
}
.tps-pending__item:last-child { border-bottom: none; }
.tps-pending__name { font-size: var(--tps-fs-sm); font-weight: 700; color: var(--tps-c-text); }
.tps-pending__desc { font-size: var(--tps-fs-xs); color: var(--tps-c-text-secondary); flex: 1 1 auto; }
.tps-pending__tag {
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-text-muted);
  background: var(--tps-c-surface);
  border: 1px dashed var(--tps-c-border);
  border-radius: 999px;
  padding: 1px 10px;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   v3 #31 第五段 — 公布情報流頁（disclosures/、disclosures/{yyyy-mm}/）
   全市場「最新公布」feed；事件依日期分段、每筆內鏈回個股 hub。沿用 .tps-card 骨架。
   ══════════════════════════════════════════════════════════════ */

.tps-disc { padding-top: var(--tps-sp-2); }
.tps-disc__day { margin-bottom: var(--tps-sp-5); }
.tps-disc__day:last-child { margin-bottom: 0; }
.tps-disc__date {
  font-family: var(--tps-ff-num);
  font-size: var(--tps-fs-base);
  font-weight: 800;
  color: var(--tps-c-primary);
  margin: 0 0 var(--tps-sp-3);
  padding-bottom: var(--tps-sp-2);
  border-bottom: 2px solid var(--tps-c-primary-soft);
}
.tps-disc__list { list-style: none; margin: 0; padding: 0; }
.tps-disc__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--tps-sp-1) var(--tps-sp-3);
  padding: var(--tps-sp-3) 0;
  border-bottom: 1px solid var(--tps-c-border);
}
.tps-disc__item:last-child { border-bottom: none; }
.tps-disc__tag {
  flex: 0 0 auto;
  font-size: var(--tps-fs-xs);
  font-weight: 700;
  color: var(--tps-c-primary);
  background: var(--tps-c-primary-soft);
  border-radius: 999px;
  padding: 1px 9px;
}
/* 警示型事件（處置/注意/裁罰）：旗標用琥珀，與漲跌色分離 */
.tps-disc__item--warn .tps-disc__tag { color: #1a1206; background: var(--tps-c-warn); }
.tps-disc__stock { font-size: var(--tps-fs-sm); font-weight: 700; color: var(--tps-c-text); text-decoration: none; }
a.tps-disc__stock:hover { color: var(--tps-c-primary); text-decoration: underline; }
.tps-disc__stock .tps-num { color: var(--tps-c-text-secondary); margin-right: var(--tps-sp-1); font-weight: 400; }
.tps-disc__market {
  flex: 0 0 auto;
  font-size: var(--tps-fs-xs);
  color: var(--tps-c-text-muted);
  border: 1px solid var(--tps-c-border);
  border-radius: 999px;
  padding: 0 7px;
}
.tps-disc__summary { font-size: var(--tps-fs-sm); color: var(--tps-c-text-secondary); flex: 1 1 14em; }
.tps-disc__src { font-size: var(--tps-fs-xs); color: var(--tps-c-primary); text-decoration: none; white-space: nowrap; }
.tps-disc__src:hover { text-decoration: underline; }

/* ── 響應式：平板以上 ── */
@media (min-width: 600px) {
  .tps-deflist { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tps-sp-5); }
  .tps-deflist__row:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .tps-linklist--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--tps-sp-5); }
  .tps-linklist--cols li { border-bottom: 1px solid var(--tps-c-border); }
}
@media (min-width: 768px) {
  .tps-linklist--cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}