/*
 * 命盤 renderer 的共用基礎：調色盤 token、身分區、可點擊行為。
 *
 * token 掛在 `.chart-plate`（各 lens 的盤面根元素）與 `.chart-surface`
 * （非盤面但需要同一套配色者，如輪播的放大面板）。
 *
 * 所有 lens（紫微、占星…）的根元素都帶 `chart-plate` class，因此只需維護一份配色，
 * 且身分區（人名／照片／來源）在各 lens 之間長得一樣。
 *
 * 色彩在三種主題狀態下都定義：
 *   - 明亮（bare .chart-plate）
 *   - 系統深色（prefers-color-scheme，排除已明示 light 者）
 *   - 明示深色（[data-theme="dark"]）
 */

.chart-plate,
.chart-surface {
  --ch-bg: #ffffff;
  --ch-cell: #f7f8f6;
  --ch-line: #e0e3de;
  --ch-line-strong: #c9cec7;
  --ch-ink: #24292f;
  --ch-muted: #68717d;
  --ch-faint: #9aa2ac;
  --ch-accent: #b23a2c;
  --ch-accent-soft: rgba(178, 58, 44, 0.08);
  --ch-lucky: #2f7d5f;
  --ch-unlucky: #b23a2c;
  --ch-gold: #8f7327;
  --ch-gold-soft: rgba(143, 115, 39, 0.12);
  --ch-t4-lu: #2f7d5f;
  --ch-t4-quan: #2f6fa8;
  --ch-t4-ke: #8f7327;
  --ch-t4-ji: #b23a2c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chart-plate,
  :root:not([data-theme="light"]) .chart-surface {
    --ch-bg: #1e232a;
    --ch-cell: #232931;
    --ch-line: #2c333c;
    --ch-line-strong: #3a424d;
    --ch-ink: #e6e4de;
    --ch-muted: #9aa3ae;
    --ch-faint: #6c757f;
    --ch-accent: #d96a55;
    --ch-accent-soft: rgba(217, 106, 85, 0.13);
    --ch-lucky: #5cb490;
    --ch-unlucky: #d96a55;
    --ch-gold: #c9a85c;
    --ch-gold-soft: rgba(201, 168, 92, 0.14);
    --ch-t4-lu: #5cb490;
    --ch-t4-quan: #6fa8d9;
    --ch-t4-ke: #c9a85c;
    --ch-t4-ji: #d96a55;
  }
}

/*
 * ⚠️ 兩個選擇器都要帶 `:root[data-theme="dark"]`（2026-09-21 修）。
 * 原本第二個寫成光禿禿的 `.chart-surface`，於是它**無條件**吃深色 token ——
 * 淺色頁面上的輪播放大面板、差異盤的圖例與「全都相同」那一句全都是深底。
 * 上面兩個區塊都有正確的前綴，這一處是 2026-08-13 加 `.chart-surface` 時漏的。
 */
:root[data-theme="dark"] .chart-plate,
:root[data-theme="dark"] .chart-surface {
  --ch-bg: #1e232a;
  --ch-cell: #232931;
  --ch-line: #2c333c;
  --ch-line-strong: #3a424d;
  --ch-ink: #e6e4de;
  --ch-muted: #9aa3ae;
  --ch-faint: #6c757f;
  --ch-accent: #d96a55;
  --ch-accent-soft: rgba(217, 106, 85, 0.13);
  --ch-lucky: #5cb490;
  --ch-unlucky: #d96a55;
  --ch-gold: #c9a85c;
  --ch-gold-soft: rgba(201, 168, 92, 0.14);
  --ch-t4-lu: #5cb490;
  --ch-t4-quan: #6fa8d9;
  --ch-t4-ke: #c9a85c;
  --ch-t4-ji: #d96a55;
}


/* ── 可點擊（多張並排 → 點擊放大） ── */

.chart-plate.is-clickable {
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}

.chart-plate.is-clickable:hover {
  border-color: var(--ch-accent);
  transform: translateY(-1px);
}

.chart-plate.is-clickable:focus-visible {
  outline: 2px solid var(--ch-accent);
  outline-offset: 2px;
}

/* ── 身分區（瀏覽模式；盲測不會出現） ──
 * 與盤面資料是兄弟關係，樣式獨立於 .zw-plate 內部結構，
 * 好讓占星 renderer 沿用同一個 header。
 */

.chart-identity {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 10px;
  padding: 0 2px 10px;
  border-bottom: 1px solid var(--ch-line);
}

.chart-identity__photo {
  width: 56px;
  height: 56px;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--ch-line);
  background: var(--ch-cell);
}

.chart-identity__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chart-identity__title {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.chart-identity__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ch-ink);
}

.chart-identity__gender {
  padding: 0 6px;
  border: 1px solid var(--ch-line-strong);
  border-radius: 999px;
  font-size: 11px;
  color: var(--ch-muted);
}

.chart-identity__meta {
  font-size: 12.5px;
  color: var(--ch-muted);
}

.chart-identity__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.chart-identity__cat {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--ch-cell);
  border: 1px solid var(--ch-line);
  font-size: 11px;
  color: var(--ch-muted);
}

.chart-identity__source {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ch-accent);
  text-decoration: none;
  align-self: flex-start;
}

.chart-identity__source:hover { text-decoration: underline; }

/*
 * 差異盤底下那行圖例。
 *
 * 🔴 **由 renderer 畫、跟著那張盤走**，不放在段落層級 —— 極性是逐盤的
 * （紫微亮相異、八字亮相同），而且紫微「一處差異都沒有」改印一句話時，
 * 圖例要跟著消失。段落層級的一句話兩件事都做不到。
 *
 * 與人物卡的大頭照署名同一個判準：它屬於**那張圖**，不屬於那一段。
 */
.chart-legend {
  margin: 5px 2px 0;
  color: var(--ch-faint);
  font-size: 11px;
  line-height: 1.5;
}