/* 存股殖利率排行榜專頁樣式。共用 app.css 的變數 / nav / footer /
   notice-banner / toast 等既有類別，這裡只補本頁特有的元件（篩選列、
   殖利率排行榜表格）。比照 institutional.css 的既有結構與命名慣例。 */

.div-section {
  margin-bottom: 28px;
}

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

.div-section-head h2 {
  margin: 0;
  font-size: clamp(15px, 0.6vw + 13px, 16px);
  font-weight: 800;
  color: var(--text);
  flex: 0 1 auto;
}

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

.div-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 12px 14px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.div-filter-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
  flex-wrap: wrap;
  min-width: 0;
}

.div-filter-label select {
  min-width: 0;
}

.div-filter-checkbox {
  cursor: pointer;
  user-select: none;
}

.div-filter-checkbox input[type="checkbox"] {
  cursor: pointer;
}

/* ---------- 排行榜表格 ---------- */

/* 排行表改用 app.css 設計系統 .sv-table / .sv-table-wrap（#30 M2 鋪開第 1 頁，
   2026-07-10）——本檔只保留「表格外殼卡」這個頁面特有外觀（sv-table-wrap
   不含卡片殼，殼由本規則補）。 */
.div-ranking-table-wrap {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.div-ranking-table-wrap tbody tr:last-child td {
  border-bottom: none;
}

.div-rank {
  color: var(--text-faint);
  font-size: 11.5px;
  text-align: right;
}

.div-stock-link {
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.div-stock-link:hover {
  color: var(--accent-text);
  text-decoration: underline;
}

.div-yield {
  font-weight: 700;
  text-align: right;
  color: var(--up);
  white-space: normal;
}

/* 殖利率分級徽章 + 合計股利（亮點，股利明細主幹 M2） */
.div-yield-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.div-yield-num {
  font-variant-numeric: tabular-nums;
}

.div-yield-total {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: right;
  white-space: nowrap;
}

table.div-ranking-table td.num {
  text-align: right;
}

table.div-ranking-table td.up {
  color: var(--up);
}

table.div-ranking-table td.down {
  color: var(--down);
}

table.div-ranking-table td.flat {
  color: var(--text-muted);
}

/* 任務#70：殖利率欄頭旁的「深入學習 →」連結（由 web/static/learn_links.js
   makeLearnLink() 產生，class="sv-learn-link"，這裡疊加 div-th-learn-link
   讓連結在表頭內獨立成行、字級縮小，不撐大表頭高度）。 */
.div-th-learn-link {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--text-faint);
  text-decoration: none;
}

.div-th-learn-link:hover {
  color: var(--accent-text);
  text-decoration: underline;
}

/* ---------- 手機卡片版（站長 2026-08-23「表格改卡片式精緻設計」第二棒）----------

   問題：12 欄的排行表在 390 寬實測表寬 977px，訪客只看得到前 4 欄——**殖利率
   這個主指標整個在螢幕外**，要橫捲才看得到。

   解法是雙版面、內容驅動不看機型：同一份 rows 渲染表格與卡片兩份 DOM，出場
   與否只由下面兩條 media query 決定：
     · ≥768px  →  表格出場（桌機 12 欄一欄都不拿掉）、卡片 display:none
     · <768px  →  卡片出場、**表格 display:none**
   表格在手機必須是 display:none 而不是「藏在 overflow 捲動容器裡」：後者仍然
   可被橫捲、仍然吃 hit-test 與 Ctrl+F，是半套（也是這次要修的原始症狀）。
   JS 端不監聽 resize、不重繪（見 dividend.js buildCard() 上方註解）。

   視覺語彙抄持股頁 .pf-card（app.css:10947 起）：品牌雙色極淡放射底＋頂部一道
   內光、細描邊、柔和落影、大圓角；顏色全部走 app.css 代幣，五主題自動換膚。 */

.div-rank-cards {
  display: none; /* 預設不出場；由下方斷點翻開 */
}

.div-rank-cards-note {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px 2px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
}

/* 殖利率教學深連結（makeLearnLink("dividend_yield")）在卡片版只放這一次
   ——100 張卡各掛一條「深入學習 →」是噪音，桌機版仍留在欄頭。 */
.div-rank-cards-learn-link {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: none;
  white-space: nowrap;
}

.div-rank-cards-learn-link:hover {
  text-decoration: underline;
}

.div-rank-card {
  position: relative;
  overflow: hidden;
  --div-card-gloss-rgb: var(--surface-tint-rgb);
  padding: 13px 14px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 90% at 8% -12%, rgba(var(--brand-blue-rgb), 0.06), transparent 58%),
    radial-gradient(110% 90% at 104% -8%, rgba(var(--brand-violet-rgb), 0.05), transparent 60%),
    linear-gradient(180deg, rgba(var(--div-card-gloss-rgb), 0.08), transparent 52%),
    var(--card-bg);
  box-shadow: var(--shadow-card), inset 0 1px 0 rgba(var(--div-card-gloss-rgb), 0.12);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease),
    border-color 160ms var(--ease);
}

/* 珍珠高光在淺色四主題必須覆寫回白（--surface-tint-rgb 在淺色主題是「壓暗用」
   的深藍，拿來當高光會變髒污）——同 app.css .pf-card 的既有結論。 */
:root[data-theme="light-a"] .div-rank-card,
:root[data-theme="light-b"] .div-rank-card,
:root[data-theme="light-c"] .div-rank-card,
:root[data-theme="champagne"] .div-rank-card {
  --div-card-gloss-rgb: 255, 255, 255;
}

/* hover 浮起只給有滑鼠的裝置（觸控裝置的 hover 是黏住的假態） */
@media (hover: hover) {
  .div-rank-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--brand-blue-rgb), 0.35);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(var(--div-card-gloss-rgb), 0.12),
      0 10px 28px rgba(var(--shadow-rgb), 0.16);
  }
}

/* ---- 卡頭：左識別（代號/名稱/產業）＋右殖利率大字 ---- */

.div-rank-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.div-rank-card-ident {
  flex: 1 1 auto;
  min-width: 0;
}

.div-rank-card-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 7px;
  min-width: 0;
}

/* 代號：連結行為與表格 buildRow() 逐字等價（/stock?id=），卡上是主識別
   所以字級升一級。 */
.div-rank-card-sid {
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

.div-rank-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
}

.div-rank-card-industry {
  display: inline-block;
  margin-top: 5px;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(var(--surface-tint-rgb), 0.05);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 殖利率＝本頁主指標，卡上是最大的一個數字。顏色沿用表格 .div-yield 的
   既有語意（var(--up)），不另發明顏色。 */
.div-rank-card-yield {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.div-rank-card-yield-num {
  font-size: 23px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.6px;
  color: var(--up);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.div-rank-card-yield-label {
  margin-top: 1px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  white-space: nowrap;
}

/* 分級徽章在卡上縮一號（.badge 預設 4px/11px 是表格語境的尺寸） */
.div-rank-card-tier.badge {
  margin-top: 6px;
  padding: 2px 9px;
  font-size: 10.5px;
}

/* ---- 第二行：收盤＋漲跌%（＋合計股利靠右） ---- */

.div-rank-card-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid rgba(var(--surface-tint-rgb), 0.09);
}

.div-rank-card-close {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}

/* 紅漲綠跌走全站語意代幣（--up/--down），平盤中性色；藥丸底用同一顆
   代幣的 12% tint，五主題一起換膚。 */
.div-rank-card-chg {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  border: 1px solid rgba(var(--div-chg-rgb, var(--text-muted-rgb)), 0.3);
  background: rgba(var(--div-chg-rgb, var(--text-muted-rgb)), 0.12);
  color: var(--text-muted);
}

.div-rank-card-chg.up {
  --div-chg-rgb: var(--up-rgb);
  color: var(--up);
}

.div-rank-card-chg.down {
  --div-chg-rgb: var(--down-rgb);
  color: var(--down);
}

.div-rank-card-total {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- 次要格 2×3：現金/股票股利、股利年度、距除息、本益比、股價淨值比 ----
   淡色底一塊，把「參考欄位」與上面的主指標分層。等寬三欄 minmax(0,1fr)
   ＋ 值 nowrap：320 寬也不會被最長字串撐開。 */

.div-rank-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px 6px;
  margin-top: 11px;
  padding: 9px 10px;
  border-radius: 12px;
  background: rgba(var(--surface-tint-rgb), 0.045);
  border: 1px solid rgba(var(--surface-tint-rgb), 0.07);
}

.div-rank-card-cell {
  min-width: 0;
}

.div-rank-card-cell-label {
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-faint);
  white-space: nowrap;
}

.div-rank-card-cell-value {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
  white-space: nowrap;
}

/* ---------- RESPONSIVE ----------
   div-filter-bar 本身已是 flex-wrap，窄寬時篩選項自然換行。
   排行的兩種版面在這裡二選一出場（唯一的切換點）。 */

@media (max-width: 767.98px) {
  /* 表格整個退場——不是藏在 overflow 裡（見本檔卡片段開頭說明） */
  .div-ranking-table-wrap {
    display: none;
  }

  .div-rank-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

@media (min-width: 768px) {
  /* 桌機：表格是對的版面，卡片退場 */
  .div-rank-cards {
    display: none;
  }
}

/* 極窄機（320/360）：卡頭的殖利率大字與左側識別搶寬度時，先讓大字縮一號，
   而不是讓名稱被切掉——主指標與識別都要看得完整。 */
@media (max-width: 359.98px) {
  .div-rank-card {
    padding: 12px 12px 11px;
  }

  .div-rank-card-yield-num {
    font-size: 21px;
  }

  .div-rank-card-grid {
    padding: 8px 8px;
    gap: 8px 5px;
  }

  .div-rank-card-cell-label {
    font-size: 9.5px;
    letter-spacing: 0;
  }
}