/* 时间层：法达时间轴 + 小限整宫环。
   两条硬约束：① 颜色/字体一律走 tokens.css 的变量；
   ② 动效只做"浮现"（§16.2），不加位移、缩放、弹跳。 */

/* ── 法达时间轴 ───────────────────────────────────────────── */
.timeline__title {
  display: flex;
  align-items: baseline;
  gap: calc(var(--step) * 1.5);
  margin: 0 0 var(--step);
  font-size: 16px;
  font-weight: 500;
}
/* 横轴两端是**数据给的**（0–75 / 75–150 / …），故这枚标签只报数，不解释 */
.timeline__span {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 12px;
}
.timeline__track {
  display: flex;
  align-items: stretch;
  min-height: 84px;
  border: var(--hair) solid var(--brass-dim);
  background: var(--ink-2);
}
.band {
  display: flex;
  flex-direction: column;
  min-width: 0;                 /* 让 flex-grow 的比例真的按年数走 */
  padding: calc(var(--step) / 2);
  border-right: var(--hair) solid var(--brass-dim);
}
.band:last-child { border-right: 0; }
.band__planet {
  color: var(--brass);
  font-family: var(--serif);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.band__span, .sub__label {
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
}
.band__subs {
  display: flex;
  margin-top: auto;             /* 副带贴在主带下缘 */
  border-top: var(--hair) solid var(--brass-dim);
}
.sub {
  min-width: 0;
  padding-top: 2px;
  border-right: var(--hair) solid var(--brass-dim);
  text-align: center;
}
.sub:last-child { border-right: 0; }

/* 「现在」：一根竖线 + 一句话。越界时**不出线**（出线就等于夹到轴上了） */
.now {
  position: relative;
  margin-top: calc(var(--step) / 2);
  padding-left: calc(var(--step) * 1.5);
  border-left: var(--rule) solid var(--brass-lit);
  color: var(--brass-lit);
  font-size: 12px;
}
.now--outside {
  border-left-color: var(--danger);   /* 不画在轴上，也就不该用"高亮金" */
  color: var(--danger);
}
.now__label { font-family: var(--mono); margin-right: var(--step); }
.now__planet { color: var(--brass); }
.now--outside .now__planet { color: var(--danger); }
.timeline__note, .profection__note, .profection__now, .timeline__empty,
.profection__empty {
  margin: calc(var(--step)) 0 0;
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1.7;
}
/* 越界/异常态：**不能**看起来像一句普通说明 */
.timeline__note, .profection__note {
  border-left: var(--rule) solid var(--danger);
  padding-left: var(--step);
  color: var(--text);
}

/* ── 小限整宫环 ───────────────────────────────────────────── */
.profection__ring {
  width: min(100%, 420px);
  aspect-ratio: 1;
  display: block;
  margin: 0 auto;
}
.pf-seg {
  fill: var(--indigo);
  stroke: var(--brass-dim);     /* 星座界：整宫制的边界就是星座 */
  stroke-width: var(--hair);
}
.pf-seg--current { fill: var(--ink); stroke: var(--brass); stroke-width: var(--rule); }
.pf-seg--now { fill: var(--brass-dim); fill-opacity: 0.28; }
.pf-seg--current.pf-seg--now { fill: var(--brass-dim); fill-opacity: 0.45; }
.pf-seg__glyph { fill: var(--brass); font-size: 26px; }
.pf-seg__house { fill: var(--text-dim); font-family: var(--mono); font-size: 13px; }
.pf-month {
  fill: var(--text-dim);
  font-family: var(--mono);
  font-size: 11px;
}
.pf-month--now { fill: var(--brass-lit); }
.pf-center {
  fill: var(--brass);
  font-family: var(--serif);
  font-size: 22px;
}
.profection__title {
  display: flex;
  align-items: baseline;
  gap: calc(var(--step) * 1.5);
  margin: 0 0 var(--step);
  font-size: 16px;
  font-weight: 500;
}
.profection__year { color: var(--text-dim); font-family: var(--mono); font-size: 12px; }