/* Dynamic Number V2
   只用於會隨 App 狀態改變的數值：金額、股價、股數、筆數、百分比、比例。
   股票代號、日期、年份、交易 ID 等識別文字不套用此元件。

   核心規則：
   1. host 完全沿用原頁面的 display / width / text-align / overflow / line-height。
   2. V2 不再用 capacity 改 host 幾何；內層數字統一採自然比例字寬，不使用 tabular numerals。
   3. 內層 line 統一用 baseline-aligned inline-flex；digit / symbol 之間不加額外 gap。
   4. 同一數字格式（例如 DDD.DD）只固定內層 track 寬度；可見字形仍使用比例數字自然寬度。
   5. signed format 的 + / - 共用同一 track capacity；unsigned value 不預留 sign 空間。
   6. changing digit 從動畫開始就使用 target glyph 的自然 layout 寬度；outgoing glyph 只擴大水平 clip window，moving glyph 只做 Y 軸 transform。
   7. ticker 只動畫真正改變的 digit；增加向上、減少向下，並以 opacity 淡出／淡入降低 slot-machine 感。 */

.dynamic-number-v2-line{
  display:inline-flex;
  align-items:baseline;
  vertical-align:baseline;
  gap:0;
  column-gap:0;
  white-space:pre;
  font:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  font-variant-numeric:inherit;
  font-feature-settings:inherit;
  font-kerning:inherit;
}

.dynamic-number-v2-slot{
  display:inline-block;
  flex:0 0 auto;
  align-self:baseline;
  min-width:0;
  margin:0;
  padding:0;
  line-height:inherit;
  vertical-align:baseline;
  white-space:pre;
  font:inherit;
  letter-spacing:normal !important;
  font-variant-numeric:proportional-nums lining-nums !important;
  font-feature-settings:"pnum" 1,"lnum" 1 !important;
  font-kerning:normal;
}

.dynamic-number-v2-slot.is-static{
  position:static;
}

/*
  layout slot 從動畫第一幀起就等於 target glyph 的自然寬度，避免動畫完成後
  由 max(outgoing,incoming) 收回 target width 造成肉眼可見的「內縮」。
  clip-path 只裁上下；左右放寬只為容納較寬的 outgoing glyph，不參與水平排版。
*/
.dynamic-number-v2-slot.is-changing{
  position:relative;
  overflow:visible;
  clip-path:inset(0 -100vw 0 -100vw);
}

/*
  DOM 仍保留 outgoing / incoming 兩個 hidden glyph 供動畫語意與回歸測試使用；
  outgoing 移出 normal flow，只有第二個 incoming/target glyph 決定 slot intrinsic width。
  因此滾動中與動畫完成後使用完全相同的自然字距。
*/
.dynamic-number-v2-slot-sizer{
  display:inline-grid;
  position:relative;
  visibility:hidden;
  font:inherit;
  line-height:inherit;
  letter-spacing:normal !important;
  font-variant-numeric:proportional-nums lining-nums !important;
  font-feature-settings:"pnum" 1,"lnum" 1 !important;
  font-kerning:normal;
}

.dynamic-number-v2-slot-sizer > span{
  grid-area:1 / 1;
  font:inherit;
  line-height:inherit;
  letter-spacing:normal !important;
  font-variant-numeric:proportional-nums lining-nums !important;
  font-feature-settings:"pnum" 1,"lnum" 1 !important;
  font-kerning:normal;
}

.dynamic-number-v2-slot-sizer > span:first-child{
  position:absolute;
}

/*
  僅供 JS 量測「同一格式下最寬比例數字」；完全脫離 normal flow，
  不改 host 的 width/display/text-align，也不留下可見的 capacity 空白節點。
*/
.dynamic-number-v2-width-probe{
  position:absolute !important;
  visibility:hidden !important;
  pointer-events:none !important;
  width:max-content !important;
  min-width:0 !important;
  max-width:none !important;
}

.dynamic-number-v2-layer{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  min-width:0;
  line-height:inherit;
  white-space:pre;
  font:inherit;
  letter-spacing:normal !important;
  font-variant-numeric:proportional-nums lining-nums !important;
  font-feature-settings:"pnum" 1,"lnum" 1 !important;
  font-kerning:normal;
  text-align:center;
  pointer-events:none;
  will-change:transform,opacity;
}

/*
  全 App stable-width 對齊契約：reserve width 只負責避免更新時跳動，
  不可改變欄位本來的視覺 anchor。左側／行內數字把多餘寬度留在右邊；
  右側摘要把多餘寬度留在左邊；置中卡片則左右平均。
  JS 仍保留既有 profile anchor 作為 fallback，這裡只針對 App 已知語意 surface 定義最終視覺對齊。
*/
:is(
  #dashMarketValue,
  .dash-market-value,
  .dash-cost-value,
  .dash-gain-value,
  .dash-unrealized-pct,
  .dash-dividend-fee-value,
  .tc-price-value,
  .tc-shares-value,
  .tc-avg-cost-value,
  .tc-gain-value,
  .tc-change-amount,
  .tc-change-pct,
  .tc-unrealized-pct,
  .tc-hist-count-value,
  .txn-shares,
  .txn-price,
  .txn-cost,
  .txn-realized-gain,
  .txn-split-shares-before,
  .txn-split-shares-after,
  .txn-split-ratio-from,
  .txn-split-ratio-to,
  [data-cash-balance],
  #totalPct .total-pct-roll,
  .total-counted-value,
  .total-target-value,
  .total-cost-value,
  .total-gap-value,
  #wealthCost,
  #wealthTarget,
  #wealthMarket,
  #wealthGap,
  #cashflowMonthExpected,
  #cashflowMonthConfirmed,
  #cashflowTrailing12,
  #cashflowMonthlyAverage,
  #incomeMarket,
  .wealth-target-value,
  .wealth-target-pct,
  .wealth-cost-value,
  .wealth-actual-pct,
  .wealth-progress-value,
  .wealth-mobile-target,
  .wealth-mobile-cost,
  .wealth-mobile-progress,
  .income-holding-shares,
  .cashflow-target-gap-value,
  .rank-cost-value,
  .rank-actual-pct,
  .rank-target-pct,
  #dailyPnlMonthValue,
  .daily-pnl-detail-total,
  #txnModalFeeDisplay,
  #newStockCostHint,
  .backup-report-counts
) > .dynamic-number-v2-line,
.cashflow-forecast-detail-formula .dynamic-number-v2 > .dynamic-number-v2-line,
.cashflow-forecast-detail-meta .dynamic-number-v2 > .dynamic-number-v2-line,
.cashflow-forecast-details-head > span .dynamic-number-v2 > .dynamic-number-v2-line{
  justify-content:flex-start !important;
}

:is(
  .tc-market-value,
  .tc-cost-value,
  .dash-realized-total-value,
  .dash-realized-trade-value,
  .dash-dividend-net-value,
  .dash-wealth-count,
  .dash-wealth-market,
  .dash-income-count,
  .dash-income-market,
  .dash-custom-count,
  .dash-custom-market,
  .dash-total-count,
  .cash-account-settlement-value,
  .cash-account-income-value,
  .cash-account-settlement-balance,
  [data-cash-ledger-amount],
  #cashflowTargetProgress,
  .wealth-gap-value,
  .wealth-mobile-target-pct,
  .wealth-mobile-actual,
  .wealth-mobile-gap-value,
  .income-holding-market,
  .income-holding-dividend,
  .rank-remain-value,
  .rank-progress-value,
  #dailyPnlMonthRate,
  #modalTotalPnlValue,
  #modalTradePnlValue,
  #modalRealizedPnlValue,
  #modalUnrealizedPnlValue,
  #modalDividendPnlValue
) > .dynamic-number-v2-line,
.cashflow-forecast-detail-amount > strong.dynamic-number-v2 > .dynamic-number-v2-line{
  justify-content:flex-end !important;
}

.cashflow-forecast-value > .dynamic-number-v2-line{
  justify-content:center !important;
}

/* 個股卡報酬率的損益方向已由卡片底色／既有狀態色呈現；畫面不再重複顯示 +/-。
   sign slot 仍留在 DOM 與 aria-label 中保存數值語意，只在這個視覺欄位隱藏。 */
.tc-return-rate .tc-unrealized-pct > .dynamic-number-v2-line > .dynamic-number-v2-slot.is-sign{
  display:none;
}

/* 個股卡報酬率的左右括號位於 V2 host 外層；此欄位採自然內容寬度，
   避免 stable-width reserve 在括號內產生肉眼可見的空白。 */
.tc-return-rate .tc-unrealized-pct > .dynamic-number-v2-line{
  width:max-content !important;
}

/* 個股卡當日漲跌固定顯示為「箭頭 金額 (幅度)」。 */
.tc-change-pct::before{
  content:"(";
}

.tc-change-pct::after{
  content:")";
}

@media (prefers-reduced-motion:reduce){
  .dynamic-number-v2-layer{
    animation:none !important;
    transition:none !important;
  }
}