/*
 * 紫微命盤 renderer 的樣式（搭配 /js/charts/dist/plates/ziwei.js）。
 * 需先載入 chart-common.css —— 調色盤 token 與身分區定義在那裡。
 *
 * 不走 Tailwind —— Tailwind 只掃 templates/lifenav，且 4×4 宮格與星曜排版
 * 用語意 class 比一長串 utility 好讀。
 */

/* ── 外框 ── */

.zw-plate {
  position: relative;
  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", "Microsoft JhengHei", sans-serif;
  line-height: 1.35;
}


/* 走正常流排版而非 absolute —— absolute 會壓在第一宮的星曜上 */
.zw-plate__corner {
  margin: 0 0 6px 2px;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ch-muted);
}

/* ── 4×4 宮格 ── */

.zw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3px;
}

.zw-plate--compact .zw-grid {
  grid-auto-rows: 76px;
}

/* compact 只有主星，直排更接近傳統精簡盤 */
.zw-plate--compact .zw-house__stars { margin-top: 1px; }

.zw-plate--compact .zw-star-row--primary {
  flex-direction: column;
  gap: 0;
}

.zw-plate--full .zw-grid {
  grid-auto-rows: minmax(132px, auto);
  gap: 4px;
}

.zw-house {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 4px 6px 3px;
  background: var(--ch-cell);
  border: 1px solid var(--ch-line);
  border-radius: 6px;
  box-sizing: border-box;
}

.zw-house.is-ming {
  border-color: var(--ch-accent);
  background: linear-gradient(var(--ch-accent-soft), var(--ch-accent-soft)), var(--ch-cell);
}

.zw-house--missing {
  border-style: dashed;
}

/* 空宮（無主星）—— 借宮看對宮，視覺上淡一階 */
.zw-house.is-empty .zw-house__head,
.zw-house.is-empty .zw-house__name {
  opacity: 0.7;
}

.zw-house.is-empty:not(.is-ming) {
  background: transparent;
}

.zw-house__body {
  margin-left: auto;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--ch-gold-soft);
  color: var(--ch-gold);
  font-size: 10px;
  font-weight: 700;
}

/* ── 宮位頁首（宮名／身宮） ── */

.zw-house__head {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--ch-faint);
}

/* ── 星曜 ── */

/* 星曜區：兩列（主星＋六吉六煞 / 乙級星＋雜曜），各自 wrap */
.zw-house__stars {
  display: flex;
  flex: 1;                    /* 佔滿宮名與頁腳之間，讓星曜貼齊上緣而非被撐到中央 */
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 0;
  margin-top: 2px;
}

.zw-star-row {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 1px 6px;
}

/* 乙級星與雜曜獨立一列，與主星拉開一點距離 */
.zw-star-row--minor {
  gap: 1px 5px;
  padding-top: 1px;
}

.zw-star {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.zw-star__label { font-size: 12px; }

.zw-star--main .zw-star__label {
  font-size: 14px;
  font-weight: 700;
}

.zw-plate--compact .zw-star--main .zw-star__label { font-size: 13px; }

.zw-star--lucky .zw-star__label { color: var(--ch-lucky); }
.zw-star--unlucky .zw-star__label { color: var(--ch-unlucky); }

.zw-star--minor .zw-star__label {
  color: var(--ch-muted);
  font-size: 11px;
}

.zw-star--doctor .zw-star__label,
.zw-star--longevity .zw-star__label,
.zw-star--general_front .zw-star__label,
.zw-star--year_front .zw-star__label {
  color: var(--ch-faint);
  font-size: 10.5px;
}

.zw-star--none {
  color: var(--ch-faint);
  font-size: 12px;
}

/* 廟旺弱陷：緊貼星名右下，1=廟 最亮、7=陷 最黯 */
.zw-strength {
  margin-left: 1px;
  color: var(--ch-muted);
  font-size: 9.5px;
}

.zw-strength--1,
.zw-strength--2 { color: var(--ch-lucky); }
.zw-strength--6,
.zw-strength--7 { color: var(--ch-unlucky); }

/* 四化：上標 */
.zw-t4 {
  margin-left: 1px;
  font-size: 9px;
  font-weight: 700;
  vertical-align: super;
}

.zw-t4--祿 { color: var(--ch-t4-lu); }
.zw-t4--權 { color: var(--ch-t4-quan); }
.zw-t4--科 { color: var(--ch-t4-ke); }
.zw-t4--忌 { color: var(--ch-t4-ji); }

/* ── 宮位頁腳 ── */

.zw-house__foot {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--ch-faint);
}

.zw-house__name {
  color: var(--ch-muted);
  letter-spacing: 0.05em;
}

.is-ming .zw-house__name {
  color: var(--ch-accent);
  font-weight: 700;
}

.zw-house__fortune { font-variant-numeric: tabular-nums; }

.zw-house__sb {
  margin-left: auto;
  font-family: "Songti TC", "Noto Serif TC", serif;
}

/* ── 中宮 ── */

.zw-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
  border: 1px dashed var(--ch-line-strong);
  border-radius: 6px;
  box-sizing: border-box;
  color: var(--ch-muted);
  text-align: center;
}

.zw-center__five {
  color: var(--ch-ink);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.zw-plate--compact .zw-center__five { font-size: 13px; }

.zw-center__rows {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 8px;
  font-size: 11.5px;
}

.zw-center__row { display: contents; }

.zw-center__k {
  color: var(--ch-faint);
  text-align: right;
}

.zw-center__v { color: var(--ch-ink); }

@media (prefers-reduced-motion: reduce) {
  .zw-plate.is-clickable { transition: none; }
}


/* ══════════════════════════════════════════════════════════════════
 * 差異盤（比對報告的人物卡）
 *
 * 設計：root 的 `docs/plans/2026-09-21-matching-report-chart-diff.md` §4.2。
 *
 * 🔴 **用 color 淡化，不用 opacity。**
 * 相同的主星要淡、而它身上那顆相異的四化要亮 —— 四化是主星的子節點，
 * 父層一旦吃 opacity 就會連子層一起乘下去，亮不起來。
 *
 * 🔴 **一個新色都不加。**相異處剛好就是本來就有顏色的那些
 * （六吉 --ch-lucky 綠、六煞 --ch-unlucky 紅、四化四色），
 * 相同處剛好是本來最粗最黑的主星 —— 只要把後者換成 --ch-faint 就分得開了。
 *
 * ⚠️ 空宮（.is-empty）與「相異」不會撞：isEmpty 由主星有無決定，
 * 而主星排列被 Z1 釘死 ⇒ 空宮必定落在「相同」那一桶。
 * ══════════════════════════════════════════════════════════════════ */

/* 骨架：宮名、宮干支一律退成底紋 —— 它們依定義與基準盤相同，只是用來認位置 */
.zw-plate--diff .zw-house__head,
.zw-plate--diff .zw-house__name,
.zw-plate--diff .zw-house__foot {
  color: var(--ch-faint);
}

/* 命宮的紅框在差異盤上是噪音：十二宮的宮名全都被釘住，標它沒有資訊 */
.zw-plate--diff .zw-house.is-ming {
  border-color: var(--ch-line);
  background: var(--ch-cell);
}

.zw-plate--diff .is-ming .zw-house__name {
  color: var(--ch-faint);
  font-weight: 400;
}

/* 相同的星：只留輪廓，不搶眼 */
.zw-plate--diff .zw-star.is-same .zw-star__label {
  color: var(--ch-faint);
  font-weight: 400;
}

/* 相異的星：維持原本的 tier 配色，加粗 */
.zw-plate--diff .zw-star:not(.is-same) .zw-star__label {
  font-weight: 700;
}

/* 四化：同一顆主星可以「位置相同、四化不同」，所以它自己判自己 */
.zw-plate--diff .zw-t4.is-same {
  color: var(--ch-faint);
  font-weight: 400;
}

/*
 * 差異盤放得下主星＋相異的那幾顆，所以 primary 列改回橫排 wrap
 * —— compact 的直排是為了「只有主星」那個情境。
 */
.zw-plate--diff .zw-star-row--primary {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 4px;
}

.zw-plate--diff .zw-star--main .zw-star__label { font-size: 12px; }
.zw-plate--diff .zw-star__label { font-size: 11px; }

/* 中宮：列的是差異的成因（生年／性別／身主／大限方向），等於自帶圖例 */
.zw-plate--diff .zw-center__row.is-same .zw-center__k,
.zw-plate--diff .zw-center__row.is-same .zw-center__v {
  color: var(--ch-faint);
}

.zw-plate--diff .zw-center__row:not(.is-same) .zw-center__v {
  color: var(--ch-accent);
  font-weight: 700;
}

.zw-plate--diff .zw-center__five {
  color: var(--ch-faint);
  font-weight: 400;
}

/*
 * 一處差異都沒有時取代整張盤（設計 §4.4）。
 *
 * 🔴 實測 5.66% 的同格配對連生年干支與性別都相同。畫一張全暗的空盤，
 * 讀者看到的是「這個人沒有資料」—— 而事實正好相反：他是最貼近的那一張。
 */
.zw-diff-none {
  margin: 0;
  padding: 10px 12px;
  border: 1px dashed var(--ch-line-strong);
  border-radius: 8px;
  background: var(--ch-cell);
  color: var(--ch-muted);
  font-size: 12px;
  line-height: 1.6;
}