/* ── twstock 借券成交 · 分析頁版型（B Light）── */

#box_main {
  flex: 1;
  min-width: 0;
  min-height: 800px;
  padding-top: var(--space-16);
  padding-left: var(--space-16);
  max-width: 1340px;
}

/* ── Page head ── */
.pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-16);
  flex-wrap: wrap;
  margin-bottom: var(--space-16);
}
.titlewrap { display: flex; flex-direction: column; gap: var(--space-2); }
.titlewrap h1 { margin: 0; color: var(--ink); }
.titlewrap .meta { font-size: 12px; color: var(--color-greyMedium); }

.toolbar { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.ctrl {
  height: 32px; display: inline-flex; align-items: center; gap: var(--space-6); padding: 0 var(--space-12);
  border: 1px solid var(--border-frame); background: transparent; color: var(--ink);
  border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background var(--motion-fast) ease; position: relative;
}
/* 熱區與視覺分開量：28/32px 的外框控件靠透明 pseudo 撐到 44，不能改 min-height（會把邊框撐大） */
.ctrl::before { content: ""; position: absolute; inset: -7px; }
.ctrl:hover { background: var(--surface-muted); }
.ctrl.stock { font-weight: 600; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctrl .caret {
  width: 6px; height: 6px; border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin-left: 2px;
}
/* Override modal_stock.css's #btn_stock_select (ID wins over .ctrl): keep the
   analysis-toolbar look — kill its 44px height + background-image arrow so the
   button stays a fixed 32px .ctrl with a single .caret (no double arrow / jump). */
#btn_stock_select.ctrl.stock {
  height: 32px;
  padding: 0 var(--space-12);
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 13px;
  flex: none;
}
#btn_export.ctrl::before { inset: -8px; }
/* overflow 不能 hidden:它會把下面撐熱區的 pseudo 裁掉,量到的可點高度只剩視覺高;圓角改由頭尾兩顆自己畫(外框 1px,所以內半徑要減 1)。 */
.segment { display: inline-flex; border: 1px solid var(--border-frame); border-radius: var(--radius-sm); }
.segment .btn_range {
  height: 32px; padding: 0 var(--space-12); border: none; background: transparent; color: var(--color-greyMedium);
  font-size: 12px; font-family: inherit; cursor: pointer; border-right: 1px solid var(--border-frame);
  transition: background var(--motion-fast) ease; position: relative;
}
.segment .btn_range::before { content: ""; position: absolute; inset: -6px 0; }
.segment .btn_range:first-child { border-radius: calc(var(--radius-sm) - 1px) 0 0 calc(var(--radius-sm) - 1px); }
.segment .btn_range:last-child { border-right: none; border-radius: 0 calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0; }
.segment .btn_range:hover { background: var(--surface-muted); }
.segment .btn_range.active { background: var(--surface-control-on); color: var(--ink); font-weight: 600; }
.toolbar .pro_note { font-size: 12px; padding: var(--space-8) 0; color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.toolbar .pro_note:hover { color: var(--link-quiet-hover); }

/* ── Layout grid ── */
.analysis { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-16); align-items: start; }
/* The hydration layer (loader / empty / error) overlays the main column only,
   so it lines up with what it covers instead of running under .col-side —
   mirror .analysis's tracks and let .analysis itself span both. */
.hydra { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-16); }
.hydra > .analysis { grid-column: 1 / -1; }
.col-main { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; }
.col-side { display: flex; flex-direction: column; gap: var(--space-16); position: sticky; top: var(--space-16); }

/* ── Card ── */
.card { background: var(--surface-card); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-16); }
.card-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-12); }
.card-h h6 { margin: 0; color: var(--ink); }
.card-h .right { display: flex; gap: var(--space-8); align-items: center; }
.card-h .meta { font-size: 12px; color: var(--color-greyMedium); display: inline-flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.chart_box { position: relative; }
.chart-note { font-size: 12px; line-height: 1.6; color: var(--color-greyMedium); margin: var(--space-8) 0 0; }

/* studio/base.css (shared with crypto) paints the skeleton with base tokens;
   re-declare it on role vars so it follows this page's card. */
.is-wait .skel { background: var(--surface-card); }

.num, .mono { font-variant-numeric: tabular-nums; }
.mono { font-family: "Roboto Mono", monospace; }
.mut { color: var(--color-greyMedium); }

/* ── Legend swatches（類別 → 顏色只在這裡與 JS 的 CAT 各一份）── */
.lgd { display: inline-flex; align-items: center; gap: var(--space-4); }
.sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.sw-neg { background: var(--color-data-1); }
.sw-auc { background: var(--color-data-2); }
.sw-px  { background: var(--ink); }
/* 某個類別在本區間沒有成交：圖例仍列出，但**只退色塊**——色塊是裝飾標記，資訊不靠它承載，
   低對比沒問題；文字維持 greyMedium（與有資料的圖例同色，light 5.33:1 / dark 4.8:1 過 AA）。
   文字跟著退灰會掉到 1.54:1，而 canon › Neutrals 也禁止 greyDark 當內文。
   「這次沒有」由摘要帶的 — 與說明句、圖說那句、自動解讀的類別行承載，圖例不用再壓一次。 */
.lgd.is-off .sw { background: var(--color-greyLightMedium); }
body.dark-mode .lgd.is-off .sw { background: var(--color-greyDark); }

/* ── 摘要帶 ── */
.band-lead { font-size: 13px; line-height: 1.75; color: var(--ink-2); margin: 0 0 var(--space-16); max-width: 70ch; }
.band-lead b { font-weight: 600; color: var(--ink); }
.band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
.band .b { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.band .b + .b { border-left: 1px solid var(--border-hairline); padding-left: var(--space-24); }
.band .lab { font-size: 12px; color: var(--color-greyMedium); }
.band .val {
  font-family: "Roboto Mono", monospace; font-variant-numeric: tabular-nums;
  font-size: 32px; font-weight: 500; line-height: 1.05; color: var(--ink);
}
.band .b.is-off .val { color: var(--color-greyLightMedium); }
body.dark-mode .band .b.is-off .val { color: var(--color-greyDark); }
.band .val .unit {
  font-size: 13px; font-weight: 400; color: var(--color-greyMedium);
  margin-left: var(--space-4); font-family: inherit;
}
.band .sub { font-size: 12px; color: var(--color-greyMedium); font-variant-numeric: tabular-nums; }
.band .spark { height: 28px; margin-top: var(--space-4); }
.band-foot {
  display: flex; align-items: center; gap: var(--space-12); flex-wrap: wrap; margin-top: var(--space-16);
  padding-top: var(--space-12); border-top: 1px solid var(--border-hairline);
  font-size: 12px; color: var(--color-greyMedium);
}
.band-foot .ctxbar { flex: 1; min-width: 120px; max-width: 280px; }
.band-foot a { color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; }
.band-foot a:hover { color: var(--link-quiet-hover); }
.ctxbar .track { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--surface-muted); }
.ctxbar .fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--radius-pill); background: var(--color-primary); }
.ctxbar .mark { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--ink); border-radius: 1px; }

/* ── 判讀（tag 一律中性：借券費率沒有漲跌語意）── */
.read { display: flex; flex-direction: column; gap: var(--space-8); }
.read .line {
  border: 1px solid var(--border-frame); border-radius: var(--radius-sm); padding: var(--space-8) var(--space-12);
  font-size: 13px; line-height: 1.6; display: flex; gap: var(--space-8); align-items: flex-start; color: var(--ink-2);
}
.read .tag {
  flex: none; font-size: 10px; font-weight: 600; letter-spacing: .04em;
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; line-height: 1;
  border-radius: var(--radius-micro); margin-top: 3px;
}
.tag-neu { background: var(--tag-neutral-bg); color: var(--tag-neutral-text); }

/* ── 側欄：區間統計（安靜 key–value 列，不是大數字）── */
.kv { display: flex; flex-direction: column; }
.kv .r { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); padding: var(--space-8) 0; font-size: 13px; }
.kv .r + .r { border-top: 1px solid var(--border-hairline); }
.kv .k { color: var(--color-greyMedium); font-size: 12px; }
.kv .v { font-family: "Roboto Mono", monospace; font-variant-numeric: tabular-nums; color: var(--ink); }
.kv .v.is-off { color: var(--color-greyLightMedium); }
body.dark-mode .kv .v.is-off { color: var(--color-greyDark); }
.kv .v .unit { font-size: 12px; color: var(--color-greyMedium); margin-left: 3px; font-family: inherit; }

/* ── 明細表 ── */
.tbl-wrap { overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 360px; }
/* While hydrating, hold the wrap at the height the full table caps at (per-row
   lending detail always exceeds max-height), so the skeleton state and the
   hydrated table occupy the same box — no shift at ready. */
.is-wait .tbl-wrap { min-height: 360px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.tbl thead th {
  position: sticky; top: 0; background: var(--surface-card); color: var(--color-greyMedium);
  font-weight: 600; font-size: 12px; padding: var(--space-8); border-bottom: 1px solid var(--border-hairline);
  text-align: right; white-space: nowrap; cursor: pointer; user-select: none;
}
table.tbl thead th.lft { text-align: left; }
table.tbl tbody td { padding: 7px var(--space-12); text-align: right; border-bottom: 1px solid var(--border-hairline); font-family: "Roboto Mono", monospace; color: var(--ink); white-space: nowrap; }
table.tbl tbody td.lft { text-align: left; font-family: inherit; color: var(--ink-2); }
table.tbl tbody tr:hover td { background: var(--surface-row-hover); }
table.tbl td .sw { margin-right: 6px; }
/* 同一天連續多列時，第二列起日期淡化 —— 一天 2–11 筆是常態，這是「多筆」唯一的視覺線索。
   選擇器要壓過同一張表的 `td.lft`(0,2,3)，光一個 .date-dim 吃不到。 */
table.tbl tbody td.date-dim { color: var(--color-greyLightMedium); }
body.dark-mode table.tbl tbody td.date-dim { color: var(--color-greyDark); }

/* ── States ── */
.loader_wrap { display: flex; flex-direction: column; gap: var(--space-12); justify-content: center; align-items: center; padding: var(--space-48) 0; color: var(--color-greyMedium); font-size: 14px; text-align: center; }
.loader_wrap .sub { font-size: 12px; max-width: 46ch; line-height: 1.7; }
.loader_wrap a { color: var(--link-quiet); text-decoration: underline; text-underline-offset: 3px; }

/* ── RWD ── */
@media (max-width: 1300px) {
  .analysis, .hydra { grid-template-columns: 1fr; }
  .col-side { position: static; }
  #box_main { padding-left: 0; }
  /* RWD sidebar button already names the section — drop the page title (keep the
     stock/close/date meta line, which the button doesn't show) */
  .titlewrap h1 { display: none; }
  /* 次要欄：收盤（頁首 meta 已有當日收盤）。表格自己宣告，不做全域 utility。 */
  table.tbl .hide-md { display: none; }
}
@media (max-width: 768px) {
  /* stack the toolbar: stock selector on its own line, range segment below */
  .pagehead { flex-direction: column; align-items: stretch; }
  .toolbar { width: 100%; flex-direction: column; align-items: stretch; }
  .ctrl.stock { max-width: none; width: 100%; justify-content: space-between; }
  .segment { width: 100%; }
  .segment .btn_range { flex: 1; padding: 0 var(--space-4); }
  table.tbl thead th { padding: var(--space-4) var(--space-8); }
  table.tbl tbody td { padding: var(--space-4) var(--space-8); }
  /* 次要欄：預定還券日（還券分布圖已呈現）；天數是掃視用的分類，留著。
     出借張數與費率永遠不隱藏。 */
  table.tbl .hide-sm { display: none; }
  .band { grid-template-columns: 1fr; gap: var(--space-12); }
  .band .b + .b { border-left: none; border-top: 1px solid var(--border-hairline); padding-left: 0; padding-top: var(--space-12); }
  .band .val { font-size: 28px; }
  .card { padding: var(--space-12); }
}

#box_content { display: flex; flex-direction: column; gap: var(--space-16); }