/* 西洋占星術の図 (#471 / 引きに忠実化 #855 / 記号と輪)。
 *
 * - .star-mark: 12 区画の帯 (星座の記号) と、**その回の黄経どおり**に置いた天体の記号。
 *   黄経 0° が左、画面上は反時計回り。天体は図ごとの輪に載る: 最内の実線 = 本人の出生、
 *   外側の破線 = 相手 / 合成 / 時期 / 進行 / 太陽回帰 (在る図だけ)。区別は位置と線の形で付け、
 *   色だけに意味を持たせない。同じ輪で記号が重なる天体は輪に沿って散らし、本当の位置は
 *   輪を横切る短い印と記号への線で示す (#1662)。A-5 は「図は忠実に、名前は出さない」— 記号は線の path として描き、
 *   文字 (惑星名・サイン名) は出さない。図全体は aria-hidden。
 * - 記号はフォント・絵文字を使わないので iOS / Android / desktop で同じ形。線の太さは
 *   vector-effect で scale に依らず一定。
 * - 段階表示は汎用の儀式契約 (#854) に載る: server が開示の瞬間だけ [data-ritual-step] を出し、
 *   ritual controller が .ritual-step--pending を順に外す (輪 → その輪の天体、内から外へ)。
 *   基底 transition は card_pick.css。prefers-reduced-motion では controller が --pending を
 *   付けないので即時表示。JS 無効なら最初から全部見えている (隠すのは controller だけ)。
 */

.star-mark {
  display: block;
  width: 15rem;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1; /* viewBox 200x200 と同じ正方 */
  --star-ink: oklch(45% 0.09 290); /* 伏せ札 (card-fan) と同系の紫 */
}

.star-mark__zodiac,
.star-mark__spoke {
  fill: none;
  stroke: oklch(45% 0.09 290 / 35%);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.star-mark__sign {
  fill: none;
  stroke: oklch(45% 0.09 290 / 70%);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.star-mark__ring {
  fill: none;
  stroke: oklch(45% 0.09 290 / 30%);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* 本人の出生は実線、それ以外の図は破線 (形で分かる) */
.star-mark__ring--outer {
  stroke-dasharray: 2 3;
}

.star-mark__glyph {
  fill: none;
  stroke: var(--star-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.star-mark__dot {
  fill: var(--star-ink);
}

/* 散らした記号の本当の位置の印と、記号への線 (#1662)。記号と同じ色の細線。 */
.star-mark__anchor {
  stroke: var(--star-ink);
  stroke-width: 0.75;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* 触れて読む (#1332)。図の上に「星 N」の <button> を重ねる。口は 44px 四方 (図の幅に依らない)。
 * 密集した星の口は重なるが、どこを触れても中心が最も近い星が選ばれる (star_chart controller)。
 * 選ぶまで線は描かない = 何も選んでいない図は今までと同じ見た目。 */
.star-chart__stage {
  position: relative;
  width: 15rem;
  max-width: 100%;
  margin: 0.25rem auto 0.5rem;
}

.star-chart__stage .divination-figure {
  margin: 0;
}

.star-chart__stage .star-mark {
  width: 100%;
}

.star-chart__point {
  position: absolute;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.star-chart__point:focus-visible {
  outline: 2px solid var(--star-ink, oklch(45% 0.09 290));
  outline-offset: -10px;
}

/* 選んだ星は輪で囲む (色だけに頼らず形で分かる) */
.star-chart__point[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 9999px;
  border: 2px solid oklch(45% 0.09 290);
  background: oklch(45% 0.09 290 / 12%);
}

.star-mark__links {
  display: none;
}

.star-mark__links--shown {
  display: inline;
}

.star-mark__link {
  stroke: oklch(55% 0.14 330 / 75%);
  stroke-width: 1.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.star-chart__guide {
  text-align: center;
  font-size: 0.8125rem;
  opacity: 0.7;
  margin-bottom: 0.75rem;
}

.star-chart__words:has(> :not([hidden])) {
  margin-bottom: 1rem;
}

.star-chart__panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid oklch(45% 0.09 290 / 25%);
  animation: star-chart-in 200ms ease-out;
}

.star-chart__panel[hidden] {
  display: none;
}

.star-chart__name {
  font-size: 0.75rem;
  opacity: 0.6;
}

.star-chart__word {
  font-size: 0.875rem;
}

.star-chart__all-summary {
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0.5rem 0;
}

.star-chart__all[open] > .star-chart__all-summary {
  margin-bottom: 0.5rem;
}

@keyframes star-chart-in {
  from { opacity: 0; transform: translateY(0.25rem); }
}

@media (prefers-reduced-motion: reduce) {
  .star-chart__panel {
    animation: none;
  }
}

/* 段階表示の初期値 (controller が --pending を外すと基底 transition で戻る) */
.star-mark__ring.ritual-step--pending,
.star-mark__star.ritual-step--pending {
  opacity: 0;
}