/* 星盘的样式。颜色的**名字**只在 tokens.css 里定义一次；这里只引用变量。
 *
 *  §16.2 的动效纪律：**只在"揭示"上用过渡，不做无意义炫技**。故本文件里只有
 *  两处 transition——行星的 hover/focus 描边、以及淡弧的淡入；没有旋转、没有脉冲。
 */

.wheel {
  display: block;
  width: min(100%, 720px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: visible;              /* 符号压在环上时不要被裁掉 */
  font-family: var(--serif);
}

/* 外环：12 星座 */
.ring--signs .sign-divide {
  stroke: var(--brass-dim);
  stroke-width: var(--hair);
  opacity: 0.55;
}
.ring--signs .sign-glyph {
  fill: var(--brass);
  font-size: 26px;
}

/* 中环：宫头。主制实线带宫号；其余各制淡弧，**不写宫号**（写两套数字会打架） */
.cusp--primary {
  stroke: var(--brass);
  stroke-width: var(--rule);
}
.cusp__number {
  fill: var(--text-dim);
  font-family: var(--mono);
  font-size: 15px;
}
.cusp-arc--alt {
  stroke: var(--brass-dim);
  stroke-width: var(--hair);
  stroke-dasharray: 6 6;
  fill: none;
  opacity: 0.7;
}

/* 内盘：行星带 */
.planet {
  cursor: pointer;
  outline: none;
}
.planet__glyph {
  fill: var(--brass-lit);
  font-size: 22px;
  transition: fill 0.4s;          /* 揭示式，不是炫技 */
}
.planet__deg {
  fill: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
}
.planet__rx {
  fill: var(--danger);
  font-size: 12px;
}
.planet:hover .planet__glyph,
.planet:focus-visible .planet__glyph {
  fill: var(--text);
}
.planet:focus-visible .planet__glyph {
  stroke: var(--brass-lit);
  stroke-width: 1px;
}
.planet--lit .planet__glyph {
  fill: var(--text);
}

/* 圆心：盘面事实（时间与昼夜）——全部来自 chart.meta，不是算出来的 */
.wheel__center .wheel__when {
  fill: var(--text-dim);
  font-family: var(--mono);
  font-size: 13px;
}
.wheel__center .wheel__sect {
  fill: var(--brass);
  font-size: 18px;
  letter-spacing: 0.08em;
}

/* 图例：**逐制生成**，有几套制就有几条 */
.legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--step) * 2);
  justify-content: center;
  padding: 0;
  margin: calc(var(--step) * 2) 0 0;
  font-size: 14px;
  color: var(--text-dim);
}
/* 图例条目：色块 + 制名。色块线型与盘上的宫头线一一对应 */
.legend__item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.legend__item--primary { color: var(--brass); }
.legend__swatch {
  display: inline-block;
  width: 28px;
  height: 0;
  margin-right: 6px;
  vertical-align: middle;
  border-top: var(--rule) solid var(--brass);
}
.legend__swatch--alt {
  border-top: var(--hair) dashed var(--brass-dim);
}

/* horary 的相位弦（Task 6 传进来）：细、暗，不抢行星的视觉 */
.aspect {
  stroke: var(--indigo);
  stroke-width: var(--hair);
  fill: none;
  opacity: 0.8;
}
.aspect--hard { stroke: var(--danger); }