/* 山寨季儀表板 (mockup A) — Terminal register. All colors via --color-* tokens;
   dark mode = per-rule body.dark-mode overrides (canon Terminal Cards:
   dark = darkCard, no shadow). */

#box_main {
  width: 1020px;
  padding-top: 14px;
  padding-left: 20px;
}

/* pagehead: h1 + 口徑 meta (same grammar as the txf pagehead) */
.box_title {
  margin-bottom: 24px;
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.box_title .meta {
  font-size: 12px;
  color: var(--color-greyMedium);
}

/* ── Terminal card: surface + radius lg + shadow md (borderless);
      overrides Bootstrap's .card (this stylesheet loads later). ── */
.card {
  display: block;
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-16);
  margin-bottom: var(--space-24); /* crypto chart 頁 24px 區塊節奏 */
}

body.dark-mode .card {
  background: var(--color-darkCard);
  box-shadow: none;
}

.card-h {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  flex-wrap: wrap;
  margin-bottom: var(--space-12);
}

/* Card titles are real <h6>s (canon: card/panel 標題 = h6); the Terminal h6
   size (13px) already comes from studio/base.css — only kill the default
   heading margin so the .card-h baseline row stays tight. */
.card-h .t {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-black);
}

body.dark-mode .card-h .t {
  color: var(--color-darkText);
}

.card-h .meta {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-greyMedium);
}

/* ── HERO: 大數字=頁面唯一焦點(40px mono 墨色不上色) ── */
.hero-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.hero-num {
  font-size: 40px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-black);
}

body.dark-mode .hero-num {
  color: var(--color-darkText);
}

.hero-num .of {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-greyMedium);
}

.hero-state {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-black); /* 狀態詞=文字,不做 badge(極簡) */
}

body.dark-mode .hero-state {
  color: var(--color-darkText);
}

.hero-delta {
  font-size: 13px;
  color: var(--color-greyMedium);
}

.hero-delta b {
  font-weight: 500;
}

.hero-delta .pos {
  color: var(--color-greenText);
}

.hero-delta .neg {
  color: var(--color-redText);
}

body.dark-mode .hero-delta .pos {
  color: var(--color-green); /* dark 重映射回統一色階(canon Trading colors) */
}

body.dark-mode .hero-delta .neg {
  color: var(--color-red);
}

/* ── 線性量表:指數本質是 0–100 線性量,線性位置編碼;門檻 25/75 用 tick
      標記,不上色帶(顏色只給資料)。 ── */
.scale {
  margin: var(--space-16) 0 var(--space-4);
}

.scale .track {
  position: relative;
  height: 4px;
  background: var(--color-greyLight);
  border-radius: var(--radius-pill);
}

body.dark-mode .scale .track {
  background: var(--color-darkBorder);
}

.scale .tick {
  position: absolute;
  top: -4px;
  width: 1px;
  height: 12px;
  background: var(--color-greyLightMedium);
}

body.dark-mode .scale .tick {
  background: var(--color-greyDark);
}

.scale .marker {
  /* slider-thumb 級的存在感:比 track(4px)高一倍以上、pill 圓角、置中於值 */
  position: absolute;
  top: -6px;
  width: 6px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-black);
  transform: translateX(-50%);
}

body.dark-mode .scale .marker {
  background: var(--color-darkText);
}

.scale .zones {
  display: flex;
  margin-top: var(--space-8);
  font-size: 11px;
  color: var(--color-greyMedium);
}

.scale .zones span {
  text-align: center;
}

/* ── SSR lead(同 .ssr-lead 文法;base.css 的版本 scope 在 .ssr-summary
      底下,此頁卡片不是 .ssr-summary,故此處自帶) ── */
#box_main .ssr-lead {
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-greyDark);
  margin: var(--space-12) 0 0;
}

body.dark-mode #box_main .ssr-lead {
  color: var(--color-darkText);
}

/* ── stat 列(同 .ssr-stats 文法:hairline 分隔直欄 + 頂 hairline) ── */
.stats {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-16);
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-greyLight);
}

body.dark-mode .stats {
  border-top-color: var(--color-darkBorder);
}

.stat {
  min-width: 0;
}

.stat + .stat {
  border-left: 1px solid var(--color-greyLight);
  padding-left: var(--space-16);
}

body.dark-mode .stat + .stat {
  border-left-color: var(--color-darkBorder);
}

.stat .lab {
  font-size: 12px;
  color: var(--color-greyMedium);
}

.stat .val {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-black);
}

body.dark-mode .stat .val {
  color: var(--color-darkText);
}

/* ── 雙圖卡:固定高度的 LightweightCharts 容器(autoSize 吃容器尺寸,
      固定高度=首繪即終高,無 CLS) ── */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-24);
  margin-bottom: var(--space-24);
}

.grid2 .card {
  margin-bottom: 0;
}

.chart_box {
  position: relative;
  height: 220px;
}

/* Centred ring while the series fetch runs (main.css block-step recipe);
   JS empties the box before mounting LightweightCharts. Fixed-height box =
   first paint is final height, so wait → chart never moves layout. */
.chart_box .blave-loader-container {
  position: absolute;
  inset: 0;
  margin: auto;
}

/* ── 板塊資金流:label + 比例 bar + 漲跌值(bar=資料,green/red) ── */
.flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--space-32);
}

.flow .col-h {
  font-size: 12px;
  color: var(--color-greyMedium);
  padding-bottom: var(--space-8);
}

.frow {
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  gap: var(--space-12);
  padding: 7px 0;
  border-top: 1px solid var(--color-greyLight);
  font-size: 13px;
  color: var(--color-black);
}

body.dark-mode .frow {
  border-top-color: var(--color-darkBorder);
  color: var(--color-darkText);
}

.frow .bar {
  height: 6px;
  border-radius: var(--radius-micro);
}

.frow .bar.up {
  background: var(--color-green); /* 統一色階,light/dark 同值 */
}

.frow .bar.dn {
  background: var(--color-red);
}

.frow .pct {
  text-align: right;
  font-weight: 500;
}

.frow .pct.pos {
  color: var(--color-greenText);
}

.frow .pct.neg {
  color: var(--color-redText);
}

body.dark-mode .frow .pct.pos {
  color: var(--color-green);
}

body.dark-mode .frow .pct.neg {
  color: var(--color-red);
}

.card-foot {
  margin-top: var(--space-12);
  padding-top: var(--space-12);
  border-top: 1px solid var(--color-greyLight);
  font-size: 13px;
}

body.dark-mode .card-foot {
  border-top-color: var(--color-darkBorder);
}

.card-foot a {
  color: var(--color-black);
  font-weight: 600;
  text-decoration: underline;
  transition: color var(--motion-fast) var(--ease-standard);
}

.card-foot a:hover {
  color: var(--color-greyDark);
}

body.dark-mode .card-foot a {
  color: var(--color-darkText);
}

body.dark-mode .card-foot a:hover {
  color: var(--color-greyLightMedium);
}

/* ── FAQ(txf 前例:dl 桌機多欄、dt 同基線) ── */
.faq dl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  column-gap: var(--space-32);
  margin: 0;
}

.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); /* 暗底次要字下限(canon Neutrals 註) */
}

/* ── RWD(全站兩階 1300/768) ── */
@media (max-width: 1300px) {
  #box_main {
    width: 588px;
    padding-left: 0;
  }

  /* RWD offcanvas button names the section — drop the page title (txf 前例) */
  .box_title {
    display: none;
  }

  /* 4 stats don't fit the 588px narrow column as one row — 2×2, borders off */
  .stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
  }

  .stat + .stat {
    border-left: none;
    padding-left: 0;
  }

  .grid2 {
    grid-template-columns: 1fr;
  }

  .flow {
    grid-template-columns: 1fr;
  }

  .flow > div + div {
    margin-top: var(--space-16);
  }

  /* FAQ 窄欄回單欄:hairline 功能性列分隔(txf 前例) */
  .faq dl {
    display: block;
  }

  .faq dt {
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-greyLight);
  }

  body.dark-mode .faq dt {
    border-top-color: var(--color-darkBorder);
  }

  .faq dt:first-of-type {
    padding-top: 0;
    border-top: none;
  }

  .faq dd {
    margin: var(--space-4) 0 var(--space-16);
  }

  .faq dd:last-of-type {
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  #box_main {
    width: 350px;
  }

  .hero-num {
    font-size: 32px;
  }

  .stats {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, 1fr);
  }

  .stat + .stat {
    border-left: none;
    padding-left: 0;
  }

  .grid2 {
    grid-template-columns: 1fr;
  }

  .flow {
    grid-template-columns: 1fr;
  }

  .flow > div + div {
    margin-top: var(--space-16);
  }

  .faq dl {
    display: block;
  }

  .faq dt {
    padding-top: var(--space-16);
    border-top: 1px solid var(--color-greyLight);
  }

  body.dark-mode .faq dt {
    border-top-color: var(--color-darkBorder);
  }

  .faq dt:first-of-type {
    padding-top: 0;
    border-top: none;
  }

  .faq dd {
    margin: var(--space-4) 0 var(--space-16);
  }

  .faq dd:last-of-type {
    margin-bottom: 0;
  }
}