/*
 * 八字命盤 renderer 的樣式（搭配 /js/charts/dist/plates/ew.js）。
 * 需先載入 chart-common.css —— 調色盤 token 與身分區定義在那裡。
 *
 * 版面：四柱為四欄的 grid，欄內由上而下是 柱名／十神／天干／地支／納音／藏干。
 * 節氣進度條與大運列在四柱下方（古書命例無此二者，renderer 直接不畫）。
 */

/* ── 外框 ── */

.ew-chart {
  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;
}

.ew-chart__corner {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ch-accent);
  margin-bottom: 6px;
}

/* ── 盤面摘要 ── */

.ew-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 12.5px;
  color: var(--ch-muted);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ch-line);
  margin-bottom: 8px;
}

.ew-meta__k { color: var(--ch-faint); margin-right: 3px; }
.ew-meta__v { color: var(--ch-ink); }

.ew-meta__gender {
  margin-left: auto;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid currentColor;
}

/* 升／日／月（只有 commercial 報告帶）：接手靠右的 auto，性別緊跟在後 */
.ew-meta__signs {
  margin-left: auto;
  padding: 1px 8px;
  border: 1px solid var(--ch-line-strong);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ch-muted);
  white-space: nowrap;
}
.ew-meta__signs + .ew-meta__gender { margin-left: 0; }

.ew-meta__gender.is-m { color: var(--ch-t4-quan); }
.ew-meta__gender.is-f { color: var(--ch-accent); }

/* ── 四柱 ── */

.ew-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--ch-line);
  border-radius: 8px;
  overflow: hidden;
}

.ew-pillar {
  min-width: 0;
  text-align: center;
  padding: 4px 2px 0;
  background: var(--ch-bg);
  border-right: 1px solid var(--ch-line);
  display: flex;
  flex-direction: column;
}

.ew-pillar:last-child { border-right: none; }

/* 日柱是讀盤的基準（十神都相對於日主），底色點出來 */
.ew-pillar.is-day { background: var(--ch-cell); }

.ew-pillar__scale {
  font-size: 11px;
  color: var(--ch-faint);
  letter-spacing: 0.1em;
}

.ew-pillar__head {
  min-height: 1.5em;
  font-size: 12.5px;
  color: var(--ch-muted);
}

.ew-pillar__self {
  color: var(--ch-accent);
  font-weight: 700;
}

.ew-pillar__stem,
.ew-pillar__branch {
  font-size: clamp(20px, 6.5vw, 30px);
  font-weight: 500;
  line-height: 1.15;
}

.ew-chart--compact .ew-pillar__stem,
.ew-chart--compact .ew-pillar__branch {
  font-size: clamp(18px, 5vw, 24px);
}

/* 坐日柱空亡的柱，地支加虛線圈註記 */
.ew-pillar.is-void .ew-pillar__branch {
  text-decoration: underline dotted var(--ch-faint);
  text-underline-offset: 3px;
}

.ew-pillar__nayin {
  font-size: 11px;
  color: var(--ch-faint);
  margin-top: 2px;
}

/* 藏干：每列一個「天干＋十神」，各柱之間橫線對齊 */
.ew-pillar__hidden {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--ch-muted);
}

.ew-hidden {
  border-top: 1px solid var(--ch-line);
  padding: 1px 0;
  white-space: nowrap;
  min-height: 1.45em;
}

.ew-hidden__stem { color: var(--ch-ink); margin-right: 2px; }
.ew-hidden__reaction { color: var(--ch-muted); }
.ew-hidden--pad { color: transparent; }

/* ── 節氣位置 ── */

.ew-terms { margin-top: 10px; }

.ew-terms__labels {
  display: flex;
  align-items: baseline;
  font-size: 11.5px;
  color: var(--ch-muted);
  margin-bottom: 3px;
}

.ew-terms__mid { margin: 0 auto; color: var(--ch-faint); }
.ew-terms__name { margin-right: 3px; }

.ew-terms__branch {
  display: inline-block;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--ch-accent-soft);
  color: var(--ch-accent);
  font-size: 11px;
}

.ew-terms__track {
  height: 16px;
  border-radius: 8px;
  background: var(--ch-cell);
  border: 1px solid var(--ch-line);
  overflow: hidden;
}

.ew-terms__bar {
  height: 100%;
  min-width: 2.6em;
  box-sizing: border-box;
  padding-right: 4px;
  text-align: right;
  font-size: 10.5px;
  line-height: 14px;
  color: var(--ch-bg);
  background: var(--ch-t4-quan);
  white-space: nowrap;
}

/* ── 大運 ── */

.ew-fortunes { margin-top: 10px; }

.ew-fortunes__title {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ch-faint);
  margin-bottom: 3px;
}

/* 條數不寫死，窄螢幕橫向捲動而不是把欄壓到看不清 */
.ew-fortunes__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ew-fortunes__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(46px, 1fr);
  border: 1px solid var(--ch-line);
  border-radius: 8px;
  overflow: hidden;
  /* border-box：否則 min-width:100% 再加左右邊框就會多出 2px，桌機也冒出捲軸 */
  box-sizing: border-box;
  min-width: 100%;
  /*
   * max-content：沒有它，strip 只有容器寬，自己的 overflow:hidden 把多出來的欄剪掉，
   * 外層 __scroll 也就沒東西可捲 —— 手機上最右（最年輕）那步大運被切一半（2026-09-28）
   */
  width: max-content;
}

.ew-fortune {
  text-align: center;
  padding: 3px 1px 0;
  border-right: 1px solid var(--ch-line);
  min-width: 0;
}

.ew-fortune:last-child { border-right: none; }

.ew-fortune__age {
  font-size: 10px;
  color: var(--ch-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ew-fortune__reaction { font-size: 11.5px; color: var(--ch-muted); }

.ew-fortune__stem,
.ew-fortune__branch {
  font-size: 17px;
  line-height: 1.15;
}

.ew-fortune__hidden {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--ch-muted);
}

/* ── 手機 ── */

@media (max-width: 560px) {
  .ew-chart { padding: 8px; }
  .ew-pillar__hidden { font-size: 11px; }
  .ew-hidden__reaction { letter-spacing: -0.02em; }
}

/* ══════════════════════════════════════════════════════════════════
 * 差異盤（比對報告的人物卡）
 *
 * 設計：root 的 `docs/plans/2026-09-21-matching-report-chart-diff.md` §5、§7。
 *
 * 🔴 **極性與紫微相反：這裡亮的是「相同」。**
 * 判準是「亮數量少的那一邊」—— 八字同盤釘住五個字（B3）或八個字（B4），
 * 亮相異的話 B4 會端出一張整片暗的盤，而那一階的全部意義正是「連八個字都一樣」。
 *
 * 🔴 天干與地支**各自判定**。B3 的月柱正好是「月支相同、月干不同」
 * （月干隨年干以五虎遁而動），整柱一起標會把那件事抹掉。
 *
 * 一樣用 color 不用 opacity（紫微那邊的理由同此：子節點會被乘下去）。
 * ══════════════════════════════════════════════════════════════════ */

/* 不同的字：退成底紋。八字盤只有八個字，退了照樣讀得清楚 —— 不會有「空盤」的觀感 */
.ew-chart--diff .ew-pillar__stem,
.ew-chart--diff .ew-pillar__branch {
  color: var(--ch-faint);
  font-weight: 400;
}

/* 相同的字：實色加粗 —— 這是「為什麼你們會被配在一起」 */
.ew-chart--diff .ew-pillar.is-stem-same .ew-pillar__stem,
.ew-chart--diff .ew-pillar.is-branch-same .ew-pillar__branch {
  color: var(--ch-ink);
  font-weight: 700;
}

/* 整柱都相同時再加一層底 —— B4（四柱全同）於是整排都有底色 */
.ew-chart--diff .ew-pillar.is-pillar-same {
  background: var(--ch-accent-soft);
}

/* 十神、藏干、納音跟著各自的字走 */
.ew-chart--diff .ew-pillar__nayin,
.ew-chart--diff .ew-pillar__reaction,
.ew-chart--diff .ew-hidden {
  color: var(--ch-faint);
}

.ew-chart--diff .ew-pillar.is-branch-same .ew-hidden {
  color: var(--ch-muted);
}

/*
 * 性別：八個字全同而性別不同的兩個人，**大運是反著走的** ——
 * 那是這張盤上唯一還能不同的東西，所以它不同時要看得見。
 */
.ew-chart--diff .ew-meta__gender {
  outline: 1px solid var(--ch-accent);
  outline-offset: 1px;
  border-radius: 3px;
}

.ew-chart--diff.is-gender-same .ew-meta__gender {
  outline: none;
}