/* ════════════════════════════════════════════════════════════════════════
   TW Market — 台指期即時走勢(日盤・夜盤)(market/txf), mockup B「數據面板版」
   Focus = latest price hero (.ssr-summary, big number NOT colored — only the
   delta carries greenText/redText) + 1-min K (LightweightCharts) + the
   bid/ask volume split promoted to a permanent side card. Shell recipes
   (pagehead/segment/card/analysis/states/RWD) copied from the sibling
   market/*.css files; new pieces are the livedot, the mockup hero variant and
   the iobar / reflist / linklist / faq blocks.
   ALL color / radius / shadow / motion via main.css tokens.
   ════════════════════════════════════════════════════════════════════════ */

#box_main {
  flex: 1;
  min-width: 0;
  min-height: 800px;
  padding-top: 14px;
  padding-left: 20px;
  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: 2px; }
.titlewrap h1 { margin: 0; color: var(--color-black); }
body.dark-mode .titlewrap h1 { color: var(--color-darkText); }
.titlewrap .meta { font-size: 12px; color: var(--color-greyMedium); }

.toolbar { display: flex; gap: var(--space-8); align-items: center; flex-wrap: wrap; }
.segment { display: inline-flex; border: 1px solid var(--color-greyLight); border-radius: var(--radius-sm); overflow: hidden; }
body.dark-mode .segment { border-color: var(--color-darkBorder); }
.segment .btn_seg {
  height: 32px; padding: 0 12px; border: none; background: transparent; color: var(--color-greyMedium);
  font-size: 12px; font-family: inherit; cursor: pointer; border-right: 1px solid var(--color-greyLight);
  transition: background var(--motion-fast) var(--ease-standard);
}
body.dark-mode .segment .btn_seg { border-right-color: var(--color-darkBorder); }
.segment .btn_seg:last-child { border-right: none; }
.segment .btn_seg:hover { background: var(--color-greyLight); }
body.dark-mode .segment .btn_seg:hover { background: var(--color-darkBorder); }
.segment .btn_seg.active { background: var(--color-pureWhite); color: var(--color-black); font-weight: 600; box-shadow: var(--shadow-sm); }
body.dark-mode .segment .btn_seg.active { background: var(--color-darkBorder); color: var(--color-darkText); box-shadow: none; }

/* ── Card ── */
.card { background: var(--color-surface); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-16); }
body.dark-mode .card { background: var(--color-darkCard); box-shadow: none; }
body.dark-mode .is-wait .skel { background: var(--color-darkCard); } /* skel matches the dark card it covers (studio/base.css keeps the light default) */
.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; font-size: 13px; font-weight: 600; color: var(--color-black); }
body.dark-mode .card-h h6 { color: var(--color-darkText); }
.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; }

.pos { color: var(--color-green); }
.neg { color: var(--color-red); }

/* ── live dot — canon Components › Terminal toolbar recipe (7px green, pulse
   2s, honor reduced-motion; the 2s period is the canon-specified live-dot
   convention, not a page-local duration). ── */
.livedot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--color-green); animation: txf-pulse 2s infinite; flex: none; }
@keyframes txf-pulse { 0%, 100% { opacity: .7; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .livedot { animation: none; opacity: .7; } }

/* ── Hero (mockup B variant of the shared `.card.ssr-summary` shell):big
   number stays ink — the delta line is the only colored element, and it uses
   the AA text values greenText/redText (canon › Trading colors, 文字用漲跌). ── */
.hero-num {
  font-family: "Roboto Mono", monospace; font-variant-numeric: tabular-nums;
  font-weight: 500; font-size: 40px; line-height: 1.1; color: var(--color-black);
}
body.dark-mode .hero-num { color: var(--color-darkText); }
.hero-delta { font-size: 13px; display: flex; gap: var(--space-8); align-items: baseline; margin-top: 2px; margin-bottom: var(--space-12); }
.hero-delta .d { font-weight: 500; }
.hero-delta .d.pos { color: var(--color-greenText); }
.hero-delta .d.neg { color: var(--color-redText); }
.hero-delta .lab { color: var(--color-greyMedium); }
/* mockup stat row sits under a hairline; the global .ssr-stats recipe
   (studio/base.css) has no top divider on this page's layout */
.ssr-summary .ssr-stats { margin-top: var(--space-12); padding-top: var(--space-12); border-top: 1px solid var(--color-greyLight); }
body.dark-mode .ssr-summary .ssr-stats { border-top-color: var(--color-darkBorder); }
/* 統計列的外盤比是文字,用 AA 文字色階(同 hero delta),不用圖表色 .pos/.neg */
.ssr-stat .val.pos { color: var(--color-greenText); }
.ssr-stat .val.neg { color: var(--color-redText); }

/* ── Analysis grid ── */
.analysis { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-16); align-items: start; }
/* 圖卡撐滿欄高消 L 型空洞(spec-txf-faq-fix B):grid 是 align-items:start
   (col-side 的 sticky 靠它),所以只把主欄 align-self:stretch,卡片與
   chart_box 再 flex:1 往下長;≤1300 單欄時沒有拉伸對象,min-height 維持現高。 */
.col-main { display: flex; flex-direction: column; gap: var(--space-16); min-width: 0; align-self: stretch; }
.col-main > .card { flex: 1; display: flex; flex-direction: column; }
.col-main .chart_box { flex: 1; min-height: 400px; }
/* min-width:0 必要:側欄有 Chart.js canvas,少了它 canvas 內在寬會把
   grid track 釘死在舊欄寬,>768→≤768 活拖時整欄戳出畫面(spec-txf-rwd-fix)。 */
.col-side { display: flex; flex-direction: column; gap: var(--space-16); position: sticky; top: var(--space-16); min-width: 0; }
#kchart { position: absolute; inset: 0; }

/* ── 內外盤卡 ── */
.io-body { position: relative; }
.iobar .lab { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-greyMedium); margin-bottom: 4px; }
.iobar .lab b { font-weight: 600; }
.iobar .lab .out b { color: var(--color-greenText); }
.iobar .lab .in b { color: var(--color-redText); }
.iobar .bar { display: flex; height: 8px; border-radius: var(--radius-pill); overflow: hidden; }
.iobar .bar .o { background: var(--color-green); }
.iobar .bar .i { background: var(--color-red); }
.io-sub { font-size: 11px; color: var(--color-greyMedium); margin: var(--space-16) 0 var(--space-4); }
.io-minute { height: 96px; }
.gloss {
  margin-top: var(--space-12); padding-top: var(--space-12);
  border-top: 1px solid var(--color-greyLight); font-size: 12px; line-height: 1.7; color: var(--color-greyMedium);
}
body.dark-mode .gloss { border-top-color: var(--color-darkBorder); }

/* ── 參考資訊卡:hairline 列 ── */
.reflist { display: flex; flex-direction: column; }
.refrow {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0; border-bottom: 1px solid var(--color-greyLight); font-size: 13px;
}
body.dark-mode .refrow { border-bottom-color: var(--color-darkBorder); }
.refrow:last-child { border-bottom: none; padding-bottom: 0; }
.refrow .lab { color: var(--color-greyMedium); }
.refrow .val { font-family: "Roboto Mono", monospace; font-variant-numeric: tabular-nums; font-weight: 500; color: var(--color-black); }
body.dark-mode .refrow .val { color: var(--color-darkText); }
.refrow .val.pos { color: var(--color-greenText); }
.refrow .val.neg { color: var(--color-redText); }
.refrow .val small { font-family: "Plus Jakarta Sans", "Noto Sans TC", sans-serif; font-weight: 400; font-size: 11px; color: var(--color-greyMedium); }

/* ── 相關數據:純連結列(工作面連結=黑/白+底線,不用橘 — mockup B) ── */
.linklist { display: flex; flex-direction: column; }
.linklist a {
  display: block; padding: 10px 0; font-size: 13px; color: var(--color-black);
  text-decoration: none; border-bottom: 1px solid var(--color-greyLight);
}
.linklist a:last-child { border-bottom: none; padding-bottom: 0; }
.linklist a:hover { text-decoration: underline; }
body.dark-mode .linklist a { color: var(--color-darkText); border-bottom-color: var(--color-darkBorder); }

/* ── FAQ:全寬卡片,桌機每個 QA 對自成一欄(grid-auto-flow:column,
   四個 Q 同一條基線);窄欄回單欄 hairline 列。卡片殼由 .card 供給。 ── */
.faq { margin-top: var(--space-32); }
.faq dl {
  margin: 0; display: grid;
  grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 1fr;
  grid-auto-flow: column; column-gap: var(--space-32);
}
.faq dt { font-weight: 600; font-size: 13px; color: var(--color-black); }
body.dark-mode .faq dt { color: var(--color-darkText); }
.faq dd { margin: var(--space-8) 0 0; font-size: 13px; line-height: 1.7; color: var(--color-greyDark); }
body.dark-mode .faq dd { color: var(--color-greyLightMedium); }

/* ── States ── */
.loader_wrap { display: flex; flex-direction: column; gap: var(--space-12); justify-content: center; align-items: center; padding: 32px 0; color: var(--color-greyMedium); font-size: 13px; }
.loader_wrap .msg.error { color: var(--color-red); }
.retry { height: 30px; padding: 0 14px; border: 1px solid var(--color-greyLight); background: transparent; border-radius: var(--radius-sm); font: 500 12px "Roboto Mono", monospace; color: var(--color-greyDark); cursor: pointer; transition: border-color var(--motion-fast) var(--ease-standard); }
body.dark-mode .retry { border-color: var(--color-darkBorder); color: var(--color-darkText); }
.retry:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* ── RWD ── */
@media (max-width: 1300px) {
  /* 5 stats don't fit the 588px narrow column as one row (global .ssr-stats
     recipe only re-flows at ≤768) — wrap to a 3-col grid here, borders off
     like the global 768 rule. */
  .ssr-summary .ssr-stats { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
  .ssr-summary .ssr-stat + .ssr-stat { border-left: none; padding-left: 0; }
  .analysis { grid-template-columns: minmax(0, 1fr); } /* 不吃 content minimum,同 >1300 文法 */
  .col-side { position: static; }
  #box_container { padding-top: 60px !important; }
  #box_main { padding-left: 0; }
  /* RWD offcanvas button names the section — drop the page title, keep .meta
     (the 資料延遲 line the nav button doesn't show) */
  .titlewrap h1 { display: none; }
  /* FAQ 窄欄回單欄:hairline 功能性列分隔(同頁 reflist/linklist 文法) */
  .faq dl { display: block; }
  .faq dt { padding-top: var(--space-16); border-top: 1px solid var(--color-greyLight); }
  .faq dt:first-of-type { padding-top: 0; border-top: none; }
  body.dark-mode .faq dt { border-top-color: var(--color-darkBorder); }
  .faq dd { margin: var(--space-4) 0 var(--space-16); }
  .faq dd:last-of-type { margin-bottom: 0; }
}
@media (max-width: 768px) {
  .ssr-summary .ssr-stats { grid-template-columns: repeat(2, 1fr); }
  .pagehead { flex-direction: column; align-items: stretch; }
  .toolbar { width: 100%; flex-direction: column; align-items: stretch; }
  .toolbar .segment { width: 100%; }
  .toolbar .segment .btn_seg { flex: 1; white-space: nowrap; }
  .hero-num { font-size: 32px; }
}