/* 三大法人買賣超排行榜專頁樣式。共用 app.css 的變數 / nav / footer /
   notice-banner / toast 等既有類別，這裡只補本頁特有的元件（法人別/方向
   雙層 tab、排行榜表格）。 */

/* ==========================================================================
   盤後重點解讀（規則式、零 AI 成本，任務 #57）
   卡殼本身用 app.css 的 .sv-section/.sv-section-head/.sv-section-title/
   .sv-data-date/.sv-empty 共用元件層（見 docs/design_system.md）。

   ⚠ 條列本身（.insight-item / -head / .insight-fact / .insight-note /
   .insight-learn-link ＋ 類別徽章）的樣式**已於 #216（2026-08-17 質感升級）
   全部收進 app.css 檔尾「共用皮膚 ④：盤後重點解讀洞察卡家族」**——本檔、
   industry.css、futures.css、etf.css 原本各存一份逐字相同的副本，改一次要改
   四遍。本段刻意留空當路標：要調這組卡請改 app.css 那一段，不要在這裡長回
   第二份（共用層選擇器是 `.insights-list .insight-item`，權重比這裡的裸
   `.insight-item` 高一階，長回來也蓋不過去，只會讓人看錯地方）。
   ========================================================================== */

/* 任務#68 M3：全站教學連結佈線——「深入學習 →」連結基底樣式（由
   web/static/learn_links.js makeLearnLink() 產生，class="sv-learn-link"，
   各頁各自維護一份，比照本檔既有慣例）。洞察卡裡的那顆另由 app.css
   `.insights-list .insight-learn-link` 升級成膠囊，這裡是其他使用處的基底。 */
.sv-learn-link {
  display: inline-block;
  font-size: 11px;
  color: var(--text-faint);
  text-decoration: none;
}

.sv-learn-link:hover {
  color: var(--brand-cyan-text);
  text-decoration: underline;
}

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

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

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

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

.inst-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  min-width: 0;
  flex: 1 1 auto;
  justify-content: flex-end;
}

/* ---------- tabs（法人別 / 買賣方向共用樣式） ---------- */

/* 篩選膠囊（#193 質感波，2026-08-17）：底／內緣高光／選中態漸層描邊全部走
   app.css 質感層代幣（`--sv-pill-*`，見該檔檔尾），與 /market 的檢視切換
   pill、/industry 的 `.ind-view-btn` 同一套語彙。**行為零改動**：class 名、
   active 掛法、事件全不動，只換外觀。 */
.inst-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--sv-pill-bg), var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--sv-pill-inset);
}

.inst-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms var(--ease), color 140ms var(--ease), box-shadow 140ms var(--ease),
    border-color 140ms var(--ease), transform 140ms var(--ease);
  white-space: nowrap;
}

.inst-tab:hover {
  color: var(--text);
  background: var(--sv-pill-hover-bg);
}

.inst-tab:active {
  transform: translateY(1px);
}

.inst-tab.active {
  background: var(--sv-pill-active-bg);
  border-color: rgba(var(--brand-cyan-rgb), 0.55);
  color: var(--text-strong);
  box-shadow: var(--sv-pill-active-ring);
}

.inst-tabs-side .inst-tab.side-buy.active {
  background: var(--sv-pill-up-bg);
  border-color: rgba(var(--up-rgb), 0.6);
  box-shadow: var(--sv-pill-up-ring);
  color: var(--up);
}

.inst-tabs-side .inst-tab.side-sell.active {
  background: var(--sv-pill-down-bg);
  border-color: rgba(var(--down-rgb), 0.6);
  box-shadow: var(--sv-pill-down-ring);
  color: var(--down);
}

.inst-limit-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0.03em;
  flex-wrap: wrap;
  min-width: 0;
}

/* 下拉（顯示筆數／日期）比照同列的膠囊：同樣的底、同樣的內緣高光、同樣的
   圓角，讓「pills + 下拉」讀成同一組控制列而不是兩種元件併排。 */
.inst-limit-label select {
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: var(--sv-pill-inset);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  padding: 6px 30px 6px 14px;
  cursor: pointer;
  /* 自繪箭頭（appearance:none 之後原生箭頭會消失）：兩道 45° 線段組成的
     ⌄，色源走 --text-muted-rgb，四主題自動跟色。第三層才是膠囊底漸層。 */
  background-color: var(--card-bg);
  background-image: linear-gradient(45deg, transparent 50%, rgba(var(--text-muted-rgb), 0.9) 50%),
    linear-gradient(135deg, rgba(var(--text-muted-rgb), 0.9) 50%, transparent 50%), var(--sv-pill-bg);
  background-position: calc(100% - 16px) calc(50% + 1px), calc(100% - 11px) calc(50% + 1px), 0 0;
  background-size: 5px 5px, 5px 5px, 100% 100%;
  background-repeat: no-repeat;
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.inst-limit-label select:hover {
  border-color: var(--sv-card-border-hover);
}

.inst-limit-label select:focus-visible {
  outline: none;
  border-color: rgba(var(--brand-cyan-rgb), 0.6);
  box-shadow: var(--sv-pill-active-ring);
}

/* 日期下拉（歷史日期選擇，2026-07-08 新增）內容比筆數下拉長，給足最小寬度
   避免選單本身在窄螢幕被壓成看不清楚年份的寬度。 */
#filter-date {
  min-width: 118px;
}

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

/* 排行表（#193 質感波，2026-08-17）：質感配方全部來自 app.css 質感層代幣
   （`--sv-thead-*`／`--sv-row-*`／`--sv-scroll-shade`／`--sv-net-tint`），與
   /market `.sv-table`、/etf `.etf-overview-table`、/industry
   `.ind-ranking-table` 是同一組值，四張表因此長得像同一套系統做出來的。
   **零功能改動**：排序、代號連結、日期選擇、SSR 區塊都不碰，只換皮。 */
.inst-ranking-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sv-card-shadow), var(--sv-card-inset);
  /* 手機橫捲左右緣漸層暗示（同 app.css `.sv-table-wrap`，零 JS 的
     background-attachment: local 老招）。 */
  background-image: linear-gradient(to right, var(--card-bg), rgba(var(--surface-tint-rgb), 0) 26px),
    linear-gradient(to left, var(--card-bg), rgba(var(--surface-tint-rgb), 0) 26px),
    linear-gradient(to right, var(--sv-scroll-shade), transparent),
    linear-gradient(to left, var(--sv-scroll-shade), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}

table.inst-ranking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.inst-ranking-table th,
table.inst-ranking-table td {
  padding: 11px 14px;
  text-align: left;
  border-bottom: 1px solid var(--sv-row-line);
  white-space: nowrap;
}

table.inst-ranking-table th {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--sv-thead-bg);
  border-bottom: 1px solid var(--sv-thead-rule);
}

/* 數字欄（淨買賣超／收盤／漲跌／漲跌幅＝第 4~7 欄）右對齊 + 等寬數字，
   數字才會逐位對齊。欄序見 institutional.js buildRow()：排名／代號／名稱／
   淨買賣超／收盤／漲跌／漲跌幅——那支不在本棒改動範圍，用 nth-child 對位
   而不是要求它加 class。 */
table.inst-ranking-table th:nth-child(n + 4),
table.inst-ranking-table td:nth-child(n + 4) {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

table.inst-ranking-table tbody tr {
  transition: background 120ms var(--ease);
}

/* 斑馬：極淡，讓 50~100 列的長榜不跑行 */
table.inst-ranking-table tbody tr:nth-child(even) {
  background-color: var(--sv-row-zebra);
}

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

table.inst-ranking-table tbody tr:hover,
table.inst-ranking-table tbody tr:active {
  background-color: var(--sv-row-hover);
}

/* 排名欄弱化：這欄是索引不是資訊，壓成等寬小字讓視線直接落到代號與金額 */
.inst-rank {
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 1%;
}

/* 買賣超主數字：本表的主角，字級與字重都拉一階 */
.inst-net {
  font-weight: 800;
  text-align: right;
  font-size: 13.5px;
  letter-spacing: -0.01em;
}

table.inst-ranking-table td.up,
table.inst-ranking-table td.inst-net.up {
  color: var(--up);
}

table.inst-ranking-table td.down,
table.inst-ranking-table td.inst-net.down {
  color: var(--down);
}

/* 極淡語意底暈（右淡入）只給買賣超那一欄——漲跌/漲跌幅兩欄已經有紅綠字色，
   四欄都上底暈會整片糊掉。 */
table.inst-ranking-table td.inst-net.up {
  background-image: linear-gradient(
    90deg,
    transparent,
    rgba(var(--up-rgb), var(--sv-net-tint)) 66%,
    transparent
  );
}

table.inst-ranking-table td.inst-net.down {
  background-image: linear-gradient(
    90deg,
    transparent,
    rgba(var(--down-rgb), var(--sv-net-tint)) 66%,
    transparent
  );
}

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

/* ---------- RESPONSIVE ----------
   inst-section-head / inst-filter-bar 本身已是 flex-wrap，窄寬時 tabs 與
   下拉自然換行靠右，不需額外斷點；表格本身已用 overflow-x:auto 處理窄寬
   捲動。 */

/* ==========================================================================
   三大法人買賣金額（法人排行頁頂部新區塊，任務新增）
   ========================================================================== */

/* ---------- 法人買賣拔河條（FT-52 M3-2，2026-08-06） ----------
   純 CSS 雙向條（不用 SVG）：一條軌道 = 左右兩個等寬 flex 半邊，賣超的條
   從中軸往左長、買超往右長，寬度由 js 給百分比。顏色一律走主題代幣
   var(--up)/var(--down)，四主題自動適配，零寫死色。 */

.amounts-today-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.amounts-today-title {
  margin: 0;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
}

/* 資料缺席時「圖表」鈕停用的視覺（只作用在本區塊，不動全域 .inst-tab——
   其他 tab 沒有 disabled 狀態）。 */
#amounts-view-tabs .inst-tab:disabled { opacity: 0.45; cursor: not-allowed; }
#amounts-view-tabs .inst-tab:disabled:hover { color: var(--text-muted); }

.amounts-tug-wrap {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 12px 16px 10px;
  margin-bottom: 14px;
}

.tug-date-note {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* 三欄 grid：法人名 / 軌道 / 金額。表頭列與資料列共用同一組欄寬，數字因此
   對得齊；中間欄 minmax(0,1fr) 是窄螢幕不溢出的關鍵（1fr 預設 min-width
   auto 會被內容撐開）。 */
.tug-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 80px;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
}

.tug-head-row {
  padding-top: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}

.tug-head-row .tug-name,
.tug-value-head {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.tug-legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  font-size: 11px;
  font-weight: 700;
}

.tug-legend-side.up { color: var(--up); }
.tug-legend-side.down { color: var(--down); }

.tug-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tug-track {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 20px;
}

/* 貫穿全寬的細軌（拔河繩），讓空的那一側也看得出「條可以長到哪」。
   質感波（2026-08-06）：上緣壓深一階＝凹槽的受影面，條才會像「嵌在軌裡」。 */
.tug-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 3px;
  transform: translateY(-1.5px);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--border) 78%, black) 0%,
    var(--border) 100%
  );
  border-radius: 999px;
}

.tug-side {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 100%;
}

.tug-side-sell { justify-content: flex-end; }
.tug-side-buy { justify-content: flex-start; }

/* ---------- 質感層（FT-52 M3 質感波 2026-08-06）----------
   與市場寬度環形（market.css）、環境儀表（funnel.css）同一套語言：漸層 →
   外緣高光 → 柔光暈 → 展開動畫。顏色一律由主題代幣 color-mix() 現算，本檔
   零寫死色（white/black 只是混色的亮暗兩極，不是品牌色）。
   兩個強度旋鈕（深底吃光可強、白底極輕否則髒）集中在這裡。 */
.amounts-tug-wrap {
  --tug-lit: 58%;    /* 亮端保留多少段色（其餘混白） */
  --tug-shade: 74%;  /* 暗端保留多少段色（其餘混黑） */
  --tug-gloss-mix: 34%;
  --tug-glow: 34%;
}

:root[data-theme="light-a"] .amounts-tug-wrap,
:root[data-theme="light-b"] .amounts-tug-wrap,
:root[data-theme="light-c"] .amounts-tug-wrap,
:root[data-theme="champagne"] .amounts-tug-wrap {
  --tug-lit: 72%;
  --tug-shade: 86%;
  --tug-gloss-mix: 46%;
  --tug-glow: 15%;
}

.tug-bar {
  height: 14px;
  min-width: 2px;
  width: var(--tug-w, 0%);
  animation: tug-bar-grow 0.65s ease-out both;
}

/* 從中軸展開（條的起點永遠貼著中軸，寬度 0 → 目標）。--tug-w 由
   institutional.js setTugBarWidth() 寫入；prefers-reduced-motion 由 app.css
   全站規則把時長壓成 0.01ms＝直接定格。 */
@keyframes tug-bar-grow {
  from { width: 0; }
  to { width: var(--tug-w, 0%); }
}

/* 賣超條往左長：亮端在外側尖端、暗端貼中軸；買超條相反。inset 的 1px
   亮線＝條上緣的細高光，外側 box-shadow＝段色柔光暈。 */
.tug-bar-sell {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--down) var(--tug-lit), white) 0%,
    var(--down) 45%,
    color-mix(in srgb, var(--down) var(--tug-shade), black) 100%
  );
  border-radius: 999px 0 0 999px;
  box-shadow:
    0 1px 4px color-mix(in srgb, var(--down) var(--tug-glow), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--down) var(--tug-gloss-mix), white);
}

.tug-bar-buy {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--up) var(--tug-shade), black) 0%,
    var(--up) 55%,
    color-mix(in srgb, var(--up) var(--tug-lit), white) 100%
  );
  border-radius: 0 999px 999px 0;
  box-shadow:
    0 1px 4px color-mix(in srgb, var(--up) var(--tug-glow), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--up) var(--tug-gloss-mix), white);
}

.tug-axis {
  position: absolute;
  left: 50%;
  top: 1px;
  bottom: 1px;
  width: 1px;
  z-index: 0;
  background: var(--border-strong);
  transform: translateX(-0.5px);
}

.tug-zero-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-muted);
  transform: translate(-50%, -50%);
}

.tug-value {
  text-align: right;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tug-value.up { color: var(--up); }
.tug-value.down { color: var(--down); }
.tug-value.flat { color: var(--text-muted); }

.tug-row-total {
  border-top: 1px solid var(--border);
  margin-top: 3px;
  padding-top: 10px;
}

.tug-row-total .tug-name { font-weight: 800; }

.tug-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.tug-foot-line {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ≤640px：欄寬收窄、字級降一級，390px 手機仍不橫向溢出
   （中間欄 minmax(0,1fr) 已保證軌道只吃剩下的寬度）。 */
@media (max-width: 640px) {
  .amounts-tug-wrap { padding: 10px 12px 8px; }
  .tug-row {
    grid-template-columns: 52px minmax(0, 1fr) 68px;
    gap: 8px;
    padding: 6px 0;
  }
  .tug-name { font-size: 12px; }
  .tug-value { font-size: 12px; }
  .tug-head-row .tug-name,
  .tug-value-head,
  .tug-legend { font-size: 10px; }
}

/* 買賣金額彙總表（#193 質感波）：卡面與橫捲暗示與上方排行表同配方。 */
.amounts-today-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sv-card-shadow), var(--sv-card-inset);
  margin-bottom: 14px;
  background-image: linear-gradient(to right, var(--card-bg), rgba(var(--surface-tint-rgb), 0) 26px),
    linear-gradient(to left, var(--card-bg), rgba(var(--surface-tint-rgb), 0) 26px),
    linear-gradient(to right, var(--sv-scroll-shade), transparent),
    linear-gradient(to left, var(--sv-scroll-shade), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}

table.amounts-today-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.amounts-today-table th,
table.amounts-today-table td {
  padding: 10px 14px;
  text-align: right;
  border-bottom: 1px solid var(--sv-row-line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

table.amounts-today-table th:first-child,
table.amounts-today-table td:first-child {
  text-align: left;
}

table.amounts-today-table th {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--sv-thead-bg);
  border-bottom: 1px solid var(--sv-thead-rule);
}

table.amounts-today-table tbody tr {
  transition: background 120ms var(--ease);
}

table.amounts-today-table tbody tr:hover,
table.amounts-today-table tbody tr:active {
  background-color: var(--sv-row-hover);
}

table.amounts-today-table tbody tr:last-child td {
  border-bottom: none;
  font-weight: 800;
}

table.amounts-today-table td.up { color: var(--up); }
table.amounts-today-table td.down { color: var(--down); }
table.amounts-today-table td.flat { color: var(--text-muted); }

.amounts-asof-note {
  padding: 8px 14px;
  font-size: 11.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.amounts-chart-wrap {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 12px;
  margin-bottom: 12px;
}

#amounts-history-canvas {
  width: 100%;
  height: 260px;
  display: block;
}

.amounts-detail-toggle-wrap {
  margin-bottom: 10px;
}

.btn-secondary {
  appearance: none;
  border: 1px solid var(--border-strong);
  background: var(--card-bg);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 120ms var(--ease), border-color 120ms var(--ease);
}

.btn-secondary:hover {
  background: var(--card-bg-hover);
  border-color: var(--border-strong);
}

.amounts-detail-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--sv-card-shadow), var(--sv-card-inset);
  margin-bottom: 20px;
  background-image: linear-gradient(to right, var(--card-bg), rgba(var(--surface-tint-rgb), 0) 26px),
    linear-gradient(to left, var(--card-bg), rgba(var(--surface-tint-rgb), 0) 26px),
    linear-gradient(to right, var(--sv-scroll-shade), transparent),
    linear-gradient(to left, var(--sv-scroll-shade), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 15px 100%, 15px 100%;
  background-attachment: local, local, scroll, scroll;
}

table.amounts-detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

table.amounts-detail-table th,
table.amounts-detail-table td {
  padding: 8px 12px;
  text-align: right;
  border-bottom: 1px solid var(--sv-row-line);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

table.amounts-detail-table th:first-child,
table.amounts-detail-table td:first-child {
  text-align: left;
}

table.amounts-detail-table th {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--sv-thead-bg);
  border-bottom: 1px solid var(--sv-thead-rule);
}

table.amounts-detail-table tbody tr {
  transition: background 120ms var(--ease);
}

table.amounts-detail-table tbody tr:hover,
table.amounts-detail-table tbody tr:active {
  background-color: var(--sv-row-hover);
}

table.amounts-detail-table td.up { color: var(--up); }
table.amounts-detail-table td.down { color: var(--down); }

/* ==========================================================================
   土洋對作泡泡（任務 #167，2026-08-16；見 web/static/inst_tug_bubble.js）
   ==========================================================================
   版面跳動防治：.inst-tug-stage 用 aspect-ratio 先把高度佔住，canvas 與骨架
   都絕對定位鋪滿它——資料還沒回來、或整塊初始化失敗（JS 會把 #inst-tug 整個
   display:none）都不會讓下方區塊上下彈跳。
   顏色一律走代幣，四主題自動跟著換；canvas 內的顏色由 JS 讀 SvTheme。
   類名一律 `inst-tug-` 前綴：本頁另一支 institutional.js 完全不認這些類，
   兩邊改樣式不會互相波及。 */

.inst-tug {
  padding: 14px 14px 10px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.inst-tug .inst-section-head {
  margin-bottom: 8px;
}

/* 定調句：規則生成的中性統計句。左側語意色條＋淡底，讓它在標題與圖之間
   自成一層（不是內文，也不是圖例）。 */
.inst-tug-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);
  min-height: 1.5em;
}

.inst-tug-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;
}

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

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

/* 明細小卡：hover（桌機）／點擊、觸控（手機）叫出，位置由 JS 依泡泡座標
   計算後寫 left/top（相對 .inst-tug-stage）。pointer-events:none 讓游標不會
   被卡片擋住導致 hover 抖動；釘選狀態的關閉靠點空白（見 JS）。 */
.inst-tug-card {
  position: absolute;
  z-index: 2;
  min-width: 158px;
  max-width: 220px;
  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;
}

.inst-tug-card[hidden] {
  display: none;
}

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

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

.inst-tug-card-k {
  color: var(--text-muted);
}

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

.inst-tug-up {
  color: var(--up);
}

.inst-tug-down {
  color: var(--down);
}

.inst-tug-card-warn {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid var(--border);
  color: var(--watch);
  font-weight: 700;
}

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

.inst-tug-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);
}

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

.inst-tug-play:disabled {
  opacity: 0.45;
  cursor: default;
}

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

.inst-tug-seek:disabled {
  opacity: 0.45;
  cursor: default;
}

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

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

/* 色帶：跟 inst_tug_bubble.js chgRGB() 同一條綠→灰→紅三段（台股紅漲綠跌
   口徑），改版要兩邊一起改。這裡刻意寫死 rgb 而不用代幣：漸層的中段是固定
   的中性灰，用代幣拼會在淺色主題上把中段洗掉。 */
.inst-tug-ramp {
  display: inline-block;
  width: 54px;
  height: 9px;
  vertical-align: -1px;
  margin: 0 4px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgb(47, 191, 113), rgb(150, 158, 175), rgb(255, 93, 93));
}

.inst-tug-ring {
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: -1px;
  margin: 0 3px;
  border: 2px solid rgb(250, 200, 55);
  border-radius: 50%;
}

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

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

  /* 手機直式：橫幅 16:9 在窄螢幕只剩兩百多像素高，一百多顆泡泡會擠成一條。
     改 3:4 直式，縱軸（投信買賣超）才有足夠行程看得出上下分布。 */
  .inst-tug-stage {
    aspect-ratio: 3 / 4;
    max-height: 68vh;
  }

  .inst-tug-headline {
    font-size: 0.88rem;
  }

  /* 手機：日期標籤（例「2026-08-14（第 5 / 5 天）」）nowrap 之後會吃掉一半
     行寬，拖桿被壓到幾乎沒法 scrub。改讓標籤自己占一行（order:-1 排在播放
     鍵之上），拖桿拿回整行。 */
  .inst-tug-controls {
    flex-wrap: wrap;
  }

  .inst-tug-daylabel {
    order: -1;
    flex-basis: 100%;
    text-align: right;
    font-size: 11px;
  }

  .inst-tug-card {
    min-width: 140px;
    max-width: 178px;
    font-size: 11.5px;
  }
}

/* ===========================================================================
   #237 ③ 誠實標示：「資料更新中」徽章（2026-08-18）
   ===========================================================================
   站長 08-17 16:38 抓包：TWSE 下午維護→上市法人首抓靜默失敗，這一頁整段
   下午掛著昨天的數字被外部數字打臉。兩件事一起補：③資料真的落後時掛一枚
   徽章；⑤平常就寫清楚「幾點會更新」，讓人不用猜。

   ⑤的 `.sv-update-note` 原本與 industry.css 各留一份同名宣告在本地，附註
   「之後若有第三頁要用，再升格進 app.css 並一次 bump」——#239（2026-08-19）
   把註記鋪到另外六個版位，條件成立，宣告已升格進 app.css 的「設計系統共用
   元件層」（`.sv-data-date` 之後），本檔那一份同時刪除。本頁模板照用
   `class="sv-update-note"`，樣式來源改成 app.css。

   顏色全部吃既有主題代幣（.sv-badge-warn 的 --warn-bg、--warn-fg），本檔
   不宣告任何色票。 */

/* ③徽章只補間距：底色與文字色來自 app.css 的 `.sv-badge.sv-badge-warn`。 */
.inst-stale-badge {
  margin-left: 6px;
  vertical-align: middle;
}