/* Retu 官网 · r21 · 品种图标 + 带坐标轴的走势图
   色值一律走 design token,这个文件里不出现任何硬编码颜色。 */

/* ── 品种图标 ───────────────────────────────────────────────────── */

.qicon { display: block; width: 74%; height: 74%; overflow: visible; }
.qicon__s {
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.qicon__t {
  fill: currentColor; stroke: none;
  font-family: var(--font-mono); font-weight: 700;
  text-anchor: middle; dominant-baseline: central;
}

/* 品类给一点色差,让四类在长表里可以扫着分辨;仍全部走 token */
.qsym[data-cat="crypto"]    { color: var(--c-accent-700); }
.qsym[data-cat="index"]     { color: var(--c-primary-700); }
.qsym[data-cat="commodity"] { color: var(--c-warning-700); }

/* ── 走势图:坐标轴 ─────────────────────────────────────────────── */

.qdchart { display: block; width: 100%; height: auto; }

.qdchart__grid { stroke: var(--c-grid); stroke-width: 1; }
.qdchart__tick {
  fill: var(--c-text-3); stroke: none;
  font-family: var(--font-mono); font-size: 10px;
}
.qdchart__tick--y { text-anchor: start; dominant-baseline: central; }
.qdchart__tick--x { text-anchor: middle; dominant-baseline: hanging; }

/* 最高/最低那两个标注贴着曲线走,所以要比刻度更亮一点才读得出来 */
.qdchart__mark {
  fill: var(--c-text-2); stroke: none;
  font-family: var(--font-mono); font-size: 10px; text-anchor: middle;
}
.qdchart__dot { fill: currentColor; stroke: none; }

/* ── 走势图:区间切换 ───────────────────────────────────────────── */

.qdrange {
  display: flex; flex-wrap: wrap; gap: var(--s-1);
  margin-top: var(--s-3);
}
.qdrange__btn {
  appearance: none; cursor: pointer;
  padding: var(--s-1) var(--s-3);
  font-family: var(--font-sans); font-size: var(--fs-eyebrow);
  color: var(--c-text-3);
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-pill);
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.qdrange__btn:hover { color: var(--c-text); background: var(--c-surface-subtle); }
.qdrange__btn[aria-pressed="true"] {
  color: var(--c-text); background: var(--c-surface-subtle);
  border-color: var(--c-border-strong);
}
/* 拿不到那段历史的区间不是「不给点」,是**点了也没有数据** ——
   所以禁用而不是隐藏,并且把原因写在 title 与说明行里,免得看起来像坏了 */
.qdrange__btn[disabled] { cursor: not-allowed; color: var(--c-text-disabled); }
.qdrange__btn[disabled]:hover { background: transparent; }

.qdrange__why {
  margin-top: var(--s-2);
  font-size: var(--fs-eyebrow); color: var(--c-text-3);
}

.qd__stamp {
  margin-top: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  color: var(--c-text-3);
}

/* ── 关键数据 / 交易信息 ────────────────────────────────────────── */

.qdstats {
  display: grid; gap: var(--s-2) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin: var(--s-4) 0 0;
}
.qdstats__i {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--c-border);
}
.qdstats__i dt { color: var(--c-text-3); font-size: var(--fs-eyebrow); }
.qdstats__i dd {
  margin: 0; text-align: right;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--c-text-2);
}

/* ── 常见问题 ───────────────────────────────────────────────────── */
/* 这里原本有一套 .qdfaq 的私有样式(标题一行、答案一行,没分隔线也没标记),
   和市场页的问答长得不一样。已改成直接复用 site.css 的 .qa —— 全站问答只有一套。
   本文件只补一条外边距,其余一律走 .qa,别在这里再加覆盖规则。 */

.qd__block > .qa { margin-block-start: var(--s-4); }

/* ── 近期关联报道 ───────────────────────────────────────────────── */

.qdnews { display: grid; gap: 0; margin: var(--s-4) 0 var(--s-4); padding: 0; list-style: none;
          border-block-start: 1px solid var(--c-border); }
.qdnews__a {
  display: grid; gap: var(--s-2);
  padding-block: var(--s-4);
  border-block-end: 1px solid var(--c-divider);
  text-decoration: none; color: inherit;
}
/* 这一块不再外链,所以不留 hover 态 —— 留着就是在暗示它能点。 */
.qdnews__t { color: var(--c-text); line-height: 1.55; max-width: var(--measure); font-weight: 500; }
.qdnews__s { color: var(--c-text-2); line-height: 1.6; max-width: var(--measure); }
.qdnews__m {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  font-size: var(--fs-eyebrow); color: var(--c-text-3);
}
.qdnews__p { color: var(--c-text-2); }

/* ── 数据公布日历 ───────────────────────────────────────────────── */

.qdcal { display: grid; gap: 0; margin: var(--s-4) 0; padding: 0; list-style: none;
         border-block-start: 1px solid var(--c-border); }
.qdcal__i {
  display: grid; grid-template-columns: minmax(96px, auto) 1fr;
  gap: var(--s-3) var(--s-5); align-items: baseline;
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--c-divider);
}
.qdcal__d {
  display: grid; gap: 2px;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--c-text-2);
}
.qdcal__h { color: var(--c-text-3); }
.qdcal__b { display: grid; gap: 2px; }
.qdcal__t { color: var(--c-text); }
/* 不再是链接(2026-09-24),所以也不要 hover 变色加下划线 —— 那会让人以为还能点 */
.qdcal__s { font-size: var(--fs-eyebrow); color: var(--c-text-3); }
/* 利率决议是这张表里唯一需要被一眼看见的一类,所以只给它加标记,别的都不加 */
.qdcal__tag {
  display: inline-block; margin-inline-start: var(--s-2);
  padding: 1px var(--s-2);
  font-size: var(--fs-eyebrow); color: var(--c-primary-600);
  border: 1px solid var(--c-primary-600); border-radius: var(--r-pill);
}
.qdcal__i.is-rate .qdcal__d { color: var(--c-text); }

/* ── 同类品种 ───────────────────────────────────────────────────── */

.qdrel {
  display: grid; gap: var(--s-2);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  margin: var(--s-4) 0 0; padding: 0; list-style: none;
}
.qdrel__a {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  text-decoration: none; color: var(--c-text-2);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.qdrel__a:hover { border-color: var(--c-border-strong); background: var(--c-surface-subtle); }
.qdrel__sym { display: flex; width: var(--icon-xl); height: var(--icon-xl); flex: none; }
.qdrel__zh { flex: 1 1 auto; }
.qdrel__code { font-family: var(--font-mono); font-size: var(--fs-eyebrow); color: var(--c-text-3); }