/*
 * 占星圓盤 renderer 的樣式（搭配 /js/charts/dist/plates/horoscope.js）。
 * 需先載入 chart-common.css —— 調色盤 token 與身分區定義在那裡。
 */

.ho-chart,
.sb-band {
  --ho-fire: rgba(214, 82, 60, 0.20);
  --ho-earth: rgba(198, 158, 48, 0.22);
  --ho-air: rgba(64, 142, 208, 0.18);
  --ho-water: rgba(40, 164, 118, 0.18);
  /* 相位色：比照 Astrolog（合黃、沖藍、刑紅、三合綠、六合青） */
  --ho-conj: #a8860b;
  --ho-oppo: #2f6fa8;
  --ho-square: #c0392b;
  --ho-trine: #2f9e5f;
  --ho-sextile: #1f96a3;

  background: var(--ch-bg);
  color: var(--ch-ink);
  border: 1px solid var(--ch-line);
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
  font-family: "PingFang TC", "Noto Sans TC", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ho-chart,
  :root:not([data-theme="light"]) .sb-band {
    --ho-fire: rgba(232, 112, 88, 0.34);
    --ho-earth: rgba(220, 180, 82, 0.32);
    --ho-air: rgba(104, 176, 238, 0.32);
    --ho-water: rgba(78, 198, 150, 0.30);
    --ho-conj: #d9c04a;
    --ho-oppo: #6fa8d9;
    --ho-square: #e07a6a;
    --ho-trine: #5cc48f;
    --ho-sextile: #59c7d4;
  }
}

:root[data-theme="dark"] .ho-chart,
:root[data-theme="dark"] .sb-band {
  --ho-fire: rgba(232, 112, 88, 0.34);
  --ho-earth: rgba(220, 180, 82, 0.32);
  --ho-air: rgba(104, 176, 238, 0.32);
  --ho-water: rgba(78, 198, 150, 0.30);
  --ho-conj: #d9c04a;
  --ho-oppo: #6fa8d9;
  --ho-square: #e07a6a;
  --ho-trine: #5cc48f;
  --ho-sextile: #59c7d4;
}

.ho-chart__corner {
  margin: 0 0 4px 2px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ch-muted);
}

.ho-wheel {
  display: block;
  width: 100%;
  height: auto;
}

/* ── 星座環 ── */

.ho-sign { stroke: none; }
.ho-sign--fire { fill: var(--ho-fire); }
.ho-sign--earth { fill: var(--ho-earth); }
.ho-sign--air { fill: var(--ho-air); }
.ho-sign--water { fill: var(--ho-water); }

.ho-sign__divider {
  stroke: var(--ch-line-strong);
  stroke-width: 1;
}

.ho-sign__glyph {
  fill: var(--ch-ink);
  opacity: 0.85;
  font-size: 15px;
}

.ho-ring {
  fill: none;
  stroke: var(--ch-line-strong);
  stroke-width: 1;
}

/* ── 宮位 ── */

.ho-cusp {
  stroke: var(--ch-line);
  stroke-width: 1;
}

.ho-cusp--axis {
  stroke: var(--ch-line-strong);
  stroke-width: 2;
}

.ho-house-num {
  fill: var(--ch-faint);
  font-size: 11px;
}

.ho-axis-label {
  fill: var(--ch-accent);
  font-size: 11px;
  font-weight: 700;
}

/* ── 點位 ── */

.ho-point__tick {
  stroke: var(--ch-muted);
  stroke-width: 1.2;
}

.ho-point__leader {
  stroke: var(--ch-line-strong);
  stroke-width: 0.6;
}

.ho-point__glyph {
  fill: var(--ch-ink);
  font-size: 17px;
}

.ho-point__deg {
  fill: var(--ch-faint);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
}

/* 四軸與交點比行星淡一階，避免搶走主角 */
.ho-point--axis .ho-point__glyph,
.ho-point--node .ho-point__glyph {
  fill: var(--ch-muted);
  font-size: 14px;
}

.ho-point--fixed_star .ho-point__glyph,
.ho-point--lot .ho-point__glyph {
  fill: var(--ch-faint);
  font-size: 12px;
}

/* ── 相位 ── */

.ho-aspect {
  stroke-width: 1.2;
  opacity: 0.75;
}

.ho-aspect--conj { stroke: var(--ho-conj); }
.ho-aspect--oppo { stroke: var(--ho-oppo); }
.ho-aspect--square { stroke: var(--ho-square); }
.ho-aspect--trine { stroke: var(--ho-trine); }
.ho-aspect--sextile { stroke: var(--ho-sextile); }

.ho-aspect--minor {
  stroke: var(--ch-faint);
  stroke-dasharray: 3 3;
}

.ho-aspect--thin {
  stroke-width: 0.7;
  opacity: 0.5;
}

/* ── compact ── */

.ho-chart--compact .ho-sign__divider {
  stroke: var(--ch-line-strong);
  stroke-width: 1;
}

.ho-sign__glyph { font-size: 17px; }
.ho-chart--compact .ho-point__glyph { font-size: 20px; }
.ho-chart--compact .ho-point--axis .ho-point__glyph { font-size: 16px; }
.ho-chart--compact .ho-aspect { stroke-width: 1.6; }

/* 字形一律走文字呈現，避免被當成彩色 emoji（配合 TEXT_PRESENTATION 選擇符） */
.ho-sign__glyph,
.ho-point__glyph {
  font-family: "Apple Symbols", "Segoe UI Symbol", "Noto Sans Symbols 2", serif;
  font-variant-emoji: text;
}

/* ══════════════════════════════════════════════════════════════════
 * 十二星座橫帶（比對報告人物卡的差異圖，搭配 plates/sign-band.ts）
 *
 * 設計：root 的 `docs/plans/2026-09-21-matching-report-chart-diff.md` §6。
 *
 * 外框、調色盤與元素色（--ho-fire…）與輪盤共用 —— 上面三個 token 區塊都掛了 .sb-band。
 *
 * 🔴 極性：亮**相同**（與八字同一邊、與紫微相反，設計 §7）。
 * 同盤只保證四顆星同星座，其餘六顆大半不同 —— 亮相異的話整條帶都在亮。
 * 一樣用 color 不用 opacity（子節點會被乘下去）。
 * ══════════════════════════════════════════════════════════════════ */

.sb-grid {
  display: grid;
  /* 列名一欄 ＋ 十二星座。320px 的卡片裡每格約 22px —— 剛好放得下一個字形 */
  grid-template-columns: auto repeat(12, minmax(0, 1fr));
  gap: 1px;
  align-items: stretch;
}

.sb-head {
  padding: 2px 0;
  border-radius: 3px;
  text-align: center;
  font-size: 13px;
  color: var(--ch-muted);
}

.sb-head--fire  { background: var(--ho-fire); }
.sb-head--earth { background: var(--ho-earth); }
.sb-head--air   { background: var(--ho-air); }
.sb-head--water { background: var(--ho-water); }

.sb-row-label {
  padding: 3px 6px 3px 0;
  font-size: 11px;
  color: var(--ch-faint);
  white-space: nowrap;
  align-self: center;
}

.sb-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 22px;
  padding: 2px 0;
  border-radius: 3px;
  background: var(--ch-cell);
}

.sb-planet {
  font-size: 14px;
  line-height: 1.1;
  color: var(--ch-faint);
  font-family: "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols", "PingFang TC", sans-serif;
}

/* 相同：同一顆星在同一個星座 —— 實色加粗 */
.sb-band--diff .sb-planet.is-same {
  color: var(--ch-ink);
  font-weight: 700;
}

/* 兩列都有「相同」的那一欄整欄加底 —— 同盤的四個星座一眼就找得到 */
.sb-band--diff .sb-cell.is-hit {
  background: var(--ch-accent-soft);
}

.sb-band--diff .sb-head.is-hit {
  color: var(--ch-ink);
  font-weight: 700;
  outline: 1px solid var(--ch-accent);
  outline-offset: -1px;
}