/* ============================================================
   components/chart-v315.css — v315 图表卡 + 药丸式单选（原各页内联 .chart* / .labels）
   依赖：tokens.css（令牌）
   职责：承接 v315 各页原本逐页内联的 .chart / .chart-header / .chart-content /
        .chart-footer 与图表区药丸单选 .labels，统一为单一事实来源。
   注意：v315 页面不引入 legacy basic.css / chart.css（类名不同），故此处无需 !important。
   高度/边框全面对标 legacy basic.css（图表0/图表1 绘图区 67.5vh，标题左侧 5px #f7af8c 竖线）。
   ============================================================ */

/* 图表容器改为定位上下文，内层 Plotly 目标填满，骨架屏绝对覆盖其上 */
.chart-content {
  position: relative;
}

/* Plotly 挂载点（期指/ETF/融资/期权页双图；期权页单图 #chartDiv） */
#chartDiv0,
#chartDiv1 {
  width: 100%;
  height: 100%;
}

/* ===== 图表卡（对标 basic.css .chart / .chart-header / .chart-content / .chart-footer） ===== */
.chart {
  width: 90vw;
  max-width: 1560px;
  height: auto;
  max-height: 1170px;
  border-radius: 5px;
  margin: 0 auto;
  background: transparent;
  box-shadow: none;
  border: none;
  outline: none;
  overflow: hidden;
  margin: 0.5rem auto;
}

/* 图表卡直接子元素去边框（不含 Plotly 内部图表） */
.chart-header,
.chart-content,
.chart-footer {
  border: none;
  outline: none;
  box-shadow: none;
}

/* Plotly 容器自身无边框 */
.chart-content>div,
#chartDiv0,
#chartDiv1,
.js-plotly-plot,
.plotly {
  border: none;
  outline: none;
}

/* 图表标题栏：左侧 5px 暖橙竖线（对标 legacy basic.css border-left: 5px solid #f7af8c） */
.chart-header {
  width: 100%;
  height: 2.5rem;
  border-left: 5px solid #f7af8c;
  letter-spacing: 1px;
  word-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.chart-header-title {
  width: 40%;
  height: 100%;
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 2.5rem;
  text-align: left;
  padding-left: .5rem;
  letter-spacing: 1px;
  word-spacing: 2px;
}

.chart-header-label {
  width: 60%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}

/* 绘图区高度对标 legacy basic.css：67.5vh（图表0/图表1 各自约占一屏偏上，页面可滚动，与旧版一致）。
   背景与页面同系 #fcfbf9（v315 暖灰设计，非旧版白底）；position:relative 供骨架屏绝对覆盖。 */
.chart-content {
  width: 100%;
  height: 67.5vh;
  /* height: calc(100vh - 13.5rem); */
  display: flex;
  background-color: #fcfbf9;
}

.chart-footer {
  width: 100%;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* ===== 图表区单选框卡片（原 basic.css .labels / .btn，现自包含为轻盈药丸式） ===== */
.chart .labels {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0 4px;
}

/* 隐藏原生 radio，但保留可点击（覆盖在 .btn 之上） */
.chart .labels input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.chart .labels .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 64px;
  padding: 6px 14px;
  font-size: var(--fs-sm, 13px);
  line-height: 1.4;
  border: 1px solid var(--border, #eceef1);
  border-radius: 4px;
  color: var(--text-muted, #8b919c);
  /* 极浅暖灰底，与 body #fcfbf9 同系，不跳 */
  background: #f5f3f0;
  transition: all var(--transition-fast, 150ms ease);
}

.chart .labels .btn:hover {
  border-color: var(--brand, #ef6a4c);
  color: var(--brand, #ef6a4c);
}

.chart .labels input:checked+.btn {
  border-color: var(--brand, #ef6a4c);
  color: var(--brand, #ef6a4c);
  background: rgba(239, 106, 76, .08);
  font-weight: 500;
}