/* kalakarma.app — 星盤資料庫
 *
 * Dark-first, matching the other four surfaces. Every colour is a token so the light
 * variant is a token swap rather than a second stylesheet.
 */
:root {
  --bg: #0b0d14; --bg-raised: #141826; --bg-sunken: #090b11;
  --fg: #e8e4dc; --fg-muted: #9a94a6; --line: #262b3d;
  --accent: #d9a441; --accent-fg: #1a1206;
  --danger: #c9564b; --warn: #d9a441; --ok: #6aa84f;
  --radius: 10px;
}
:root[data-theme="light"] {
  --bg: #f6f4ef; --bg-raised: #fffdf8; --bg-sunken: #ebe7de;
  --fg: #23201b; --fg-muted: #6a6459; --line: #ddd7cb;
  --accent-fg: #1a1206;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: system-ui, -apple-system, "Noto Sans TC", sans-serif;
  line-height: 1.55;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.small { font-size: .85rem; }
.muted { color: var(--fg-muted); }
.spacer { flex: 1; }

.masthead {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--bg-sunken);
  flex-wrap: wrap;
}
.masthead h1 { font-size: 1.05rem; margin: 0; }
.brand-logo { width: 40px; height: auto; }
.surface-note { font-size: .75rem; color: var(--fg-muted); }

.tabs { display: flex; gap: .25rem; padding: 0 1.25rem; border-bottom: 1px solid var(--line); }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: var(--fg-muted); padding: .6rem .9rem; cursor: pointer; font-size: .95rem;
}
.tabs button[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); }

main { padding: 1.25rem; max-width: 1100px; margin: 0 auto; }

.panel {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem;
}
.gate { max-width: 460px; margin: 3rem auto; text-align: center; }
.gate-logo { width: 132px; height: auto; }
.empty { text-align: center; color: var(--fg-muted); }

.cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.card {
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem;
}
.card-head { display: flex; align-items: center; gap: .5rem; justify-content: space-between; }
.card h3 { margin: 0 0 .25rem; font-size: 1rem; }
.pill {
  font-size: .75rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--bg-sunken); border: 1px solid var(--line); color: var(--fg-muted);
}
.placements { display: flex; gap: 1rem; flex-wrap: wrap; margin: .6rem 0; }
.warn { color: var(--warn); }

.row { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .75rem; }
.action {
  background: var(--bg-sunken); color: var(--fg); border: 1px solid var(--line);
  border-radius: 8px; padding: .45rem .9rem; cursor: pointer; font-size: .9rem;
  text-decoration: none; display: inline-block;
}
.action:hover { border-color: var(--accent); }
.action.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.action.destructive { color: var(--danger); }

.form .grid { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1rem; align-items: center; }
.form input, .form select {
  background: var(--bg-sunken); color: var(--fg); border: 1px solid var(--line);
  border-radius: 6px; padding: .4rem .6rem; font: inherit; width: 100%;
}
.form input[type="checkbox"] { width: auto; }

.aspects { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .9rem; }
.aspects th, .aspects td { text-align: left; padding: .3rem .5rem; border-bottom: 1px solid var(--line); }
.aspects th { color: var(--fg-muted); font-weight: 500; }

.notice { padding: .6rem .9rem; border-radius: 8px; margin-bottom: 1rem; border: 1px solid var(--line); }
.notice.error { border-color: var(--danger); color: var(--danger); }
.notice.ok { border-color: var(--ok); color: var(--ok); }

footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); }

/* 375px: the grid collapses rather than forcing a horizontal scroll. */
@media (max-width: 620px) {
  .form .grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  main { padding: 1rem; }
}

/* 地點搜尋下拉。用 button 而不是 div，這樣鍵盤 Tab 就能走到、Enter 就能選 ——
   自訂 autocomplete 最常見的缺陷就是只有滑鼠能用。 */
.place-wrap { position: relative; }
.place-hits { display: flex; flex-direction: column; gap: 2px; margin-top: .35rem; }
.place-hit {
  display: flex; justify-content: space-between; gap: .75rem; align-items: baseline;
  background: var(--bg-sunken); color: var(--fg); border: 1px solid var(--line);
  border-radius: 6px; padding: .35rem .6rem; cursor: pointer; text-align: left; font: inherit;
}
.place-hit:hover, .place-hit:focus-visible { border-color: var(--accent); outline: none; }
.ph-name { flex: 1; }
.ph-meta { color: var(--fg-muted); font-size: .8rem; white-space: nowrap; }
@media (max-width: 620px) {
  .place-hit { flex-direction: column; gap: .1rem; }
  .ph-meta { white-space: normal; }
}

/* ─────────────────────────────── 排盤頁 ─────────────────────────────── */

/* 頁內的頁籤：和頂層 .tabs 同一個外觀，但不吃 main 的左右內距。 */
.chart-tabs { padding: 0; margin: .75rem 0 0; }
.chart-body { margin-top: 1rem; }
.chart-body h3 {
  font-size: .95rem; margin: 1.25rem 0 .4rem; color: var(--fg-muted); font-weight: 600;
}
.chart-body h3:first-child { margin-top: .25rem; }
.chart-body footer { margin-top: 1.5rem; }

/* 四柱。等寬四欄，窄螢幕變兩欄而不是擠成一行看不懂的字。 */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .5rem 0 1rem; }
.pillar {
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem .4rem; text-align: center;
}
.pillar-value { font-size: 1.5rem; line-height: 1.3; letter-spacing: .1em; }
.pillar-label { margin-bottom: .2rem; }

.big-date { text-align: center; padding: 1rem 0 .5rem; }
.big-date-value { font-size: 2rem; letter-spacing: .08em; }

/* 紫微命盤：傳統的四方排列，十二地支繞一圈，中間放基本資料。
   用 grid-area 明確指定每一宮的位置（見 chart-panel.js 的 PALACE_GRID），
   因為地支的順序不是閱讀順序 —— 交給 auto-flow 會排出一張不能看的盤。 */
.ziwei-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, minmax(7.5rem, auto));
  gap: 3px; margin: .5rem 0 1rem;
}
.palace {
  position: relative; background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: 6px; padding: .4rem .45rem; font-size: .8rem; overflow: hidden;
}
.palace.is-ming { border-color: var(--accent); }
.palace.is-body { border-color: var(--ok); }
.palace-head { display: flex; justify-content: space-between; gap: .3rem; align-items: baseline; }
.palace-name { font-weight: 600; }
.palace-gz { color: var(--fg-muted); font-size: .75rem; }
.palace-stars { display: flex; flex-wrap: wrap; gap: .15rem .4rem; margin-top: .3rem; }
.star { color: var(--fg-muted); }
.star.major { color: var(--fg); }
.star.has-sihua { color: var(--accent); }
.star sup { font-size: .65rem; }
.palace .pill { position: absolute; bottom: .3rem; right: .3rem; font-size: .65rem; }
.palace-center {
  grid-area: 2 / 2 / 4 / 4;
  display: flex; flex-direction: column; justify-content: center; gap: .4rem;
  padding: 1rem; text-align: center;
}

/* 375px：命盤在手機上維持四欄會讓每一宮只剩幾十像素，改成兩欄一列六列，
   中央資料塊移到最前面 —— 盤的形狀不重要，讀得到才重要。 */
@media (max-width: 620px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .ziwei-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .palace, .palace-center { grid-area: auto !important; }
  .palace-center { order: -1; }
  .big-date-value { font-size: 1.5rem; }
}

/* 時差欄：數字給機器，右邊那行給人。 */
.offset-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.offset-row input { flex: 0 0 7rem; }
.offset-echo { color: var(--fg-muted); font-size: .82rem; }
@media (max-width: 620px) { .offset-row input { flex: 1 1 100%; } }

/* ───────────────────────────── 本命盤 ─────────────────────────────
 *
 * 版面與顏色分工照 packages/kk-frontend-legacy 的 chart 模組
 * （規格：docs/ai/handoffs/western-chart-ui-spec-20260819.md）。
 *
 * 最強的一個想法是那兩個顏色：--sys-natal（藍）是「性格」的環，它標的是星座名；
 * --sys-mundane（橘）是「事件」的環，它標的是宮號。同一組顏色貫穿表單的兩個小節、
 * 宮位制卡片、圓盤上的兩圈、圖例的兩個點、宮位對照表的兩個標題，以及行星列尾端的
 * N／M 兩個徽章 —— 所以讀者不必回頭找圖例。
 *
 * 顏色一律是 token。原版把 #7cb8ff / #ffb347 直接寫進 index.html 的圖例與行星列，
 * 於是淺色主題下圖例講的顏色與圓盤畫的顏色是兩回事。這裡連相位的紅／藍與每一個
 * 進階點的顏色都走 token，深淺兩套主題各自定義一次。
 */
:root {
  --sys-natal: #7cb8ff; --sys-mundane: #ffb347;
  /* 舊名，仍有樣式在用。 */
  --chart-natal: var(--sys-natal); --chart-mundane: var(--sys-mundane);
  --aspect-hard: #ff6b6b; --aspect-soft: #7cb8ff;

  --planet-sun: #f5c842; --planet-moon: #c8b0ff; --planet-mercury: #88c8ff;
  --planet-venus: #ffd0a0; --planet-mars: #ff8888; --planet-jupiter: #aaffcc;
  --planet-saturn: #ccccff; --planet-uranus: #80ffe8; --planet-neptune: #b0c4ff;
  --planet-pluto: #e8aaff;

  --point-angles: #c9a84c; --point-vertex: #cc33ff;
  --point-node-true: #ff6666; --point-node-mean: #ff9999; --point-node-south: #ff6666;
  --point-lilith-mean: #a0a0a0; --point-lilith-true: #d0d0d0;
  --point-chiron: #ff9933; --point-ceres: #ffcc66; --point-pallas: #66ccff;
  --point-juno: #ff66cc; --point-vesta: #ff3333;
  --point-fortune: #33cc33; --point-spirit: #55cc55;
  --point-algol: #ff4444; --point-regulus: #ffd700;
  --point-spica: #aab6ff; --point-antares: #ff6600;
}
/* 淺色主題：同一組色相，壓到在白底上讀得出來的明度。深色的那一組直接放在白底上，
   黃色與淺藍會整片消失 —— 那正是原版寫死色碼時發生的事。 */
:root[data-theme="light"] {
  --sys-natal: #2f6fb5; --sys-mundane: #a86a12;
  --aspect-hard: #c0392b; --aspect-soft: #2f6fb5;

  --planet-sun: #a97c00; --planet-moon: #6b52b8; --planet-mercury: #1f6fb0;
  --planet-venus: #a35c1a; --planet-mars: #b3372c; --planet-jupiter: #1e7a4a;
  --planet-saturn: #4b4b8f; --planet-uranus: #0f7a6b; --planet-neptune: #34549c;
  --planet-pluto: #7b3f96;

  --point-angles: #8a6d18; --point-vertex: #7a1fa8;
  --point-node-true: #b33a3a; --point-node-mean: #a85f5f; --point-node-south: #b33a3a;
  --point-lilith-mean: #5f5f5f; --point-lilith-true: #7a7a7a;
  --point-chiron: #a35c00; --point-ceres: #8a6a12; --point-pallas: #1f6fb0;
  --point-juno: #a82f7a; --point-vesta: #b32020;
  --point-fortune: #1e7a3a; --point-spirit: #2a7a45;
  --point-algol: #b32020; --point-regulus: #8a6d00;
  --point-spica: #4a55a8; --point-antares: #a34200;
}

/* ── 語言列 ───────────────────────────────────────────────────────────────── */
.lang-bar { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: .9rem; }
.lang-btn {
  background: var(--bg-raised); color: var(--fg-muted); border: 1px solid var(--line);
  border-radius: 999px; padding: .2rem .7rem; font: inherit; font-size: .8rem; cursor: pointer;
}
.lang-btn.is-active { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }

/* ── 宮位制卡片 ───────────────────────────────────────────────────────────── */
.house-sys-section { margin-bottom: 1rem; }
.house-sys-section h4 { margin: 0 0 .5rem; font-size: .9rem; font-weight: 600; }
.natal-head { color: var(--sys-natal); }
.mundane-head { color: var(--sys-mundane); }
.sys-divider { border: 0; border-top: 1px dashed var(--line); margin: 1rem 0; }
.sys-grid { display: grid; gap: .5rem; }
.sys-grid-2 { grid-template-columns: repeat(2, 1fr); }
.sys-grid-4 { grid-template-columns: repeat(4, 1fr); }
.sys-card {
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px;
  padding: .55rem .7rem; text-align: left; font: inherit; color: var(--fg); cursor: pointer;
}
.sys-card:hover { border-color: var(--accent); }
.sys-card.natal-active { border-color: var(--sys-natal); box-shadow: inset 0 0 0 1px var(--sys-natal); }
.sys-card.mundane-active { border-color: var(--sys-mundane); box-shadow: inset 0 0 0 1px var(--sys-mundane); }
.sys-name { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.sys-title { font-weight: 600; font-size: .88rem; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; flex: 0 0 auto; }
.dot-natal { background: var(--sys-natal); }
.dot-mundane { background: var(--sys-mundane); }
.sys-badge {
  font-size: .68rem; padding: .05rem .4rem; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap;
}
.natal-badge { color: var(--sys-natal); }
.mundane-badge { color: var(--sys-mundane); }
.sys-desc { color: var(--fg-muted); font-size: .76rem; margin-top: .3rem; line-height: 1.4; }

/* ── 圓盤 ─────────────────────────────────────────────────────────────────── */
.chart-panel { margin: .5rem 0 1.25rem; }
.chart-panel-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.chart-panel-top h3 { margin: 0; }
.sys-tag {
  font-size: .72rem; padding: .1rem .55rem; border-radius: 999px;
  border: 1px solid currentColor;
}
.sys-tag.natal-tag { color: var(--sys-natal); }
.sys-tag.mundane-tag { color: var(--sys-mundane); }
/* 圓盤的三個檢視頁籤。純重畫，不重問引擎 —— 兩個環的資料在同一次計算裡就都拿到了。 */
.chart-controls { display: flex; gap: .2rem; margin-left: auto; }
.ctab {
  background: var(--bg-sunken); color: var(--fg-muted); border: 1px solid var(--line);
  border-radius: 999px; padding: .15rem .7rem; font: inherit; font-size: .75rem; cursor: pointer;
}
.ctab.is-active { color: var(--fg); border-color: var(--accent); }
.legend { display: flex; gap: 1rem; flex-wrap: wrap; margin: .4rem 0; font-size: .8rem; }
.legend-natal { color: var(--sys-natal); }
.legend-mundane { color: var(--sys-mundane); }
.chart-wrap { position: relative; text-align: center; }
/* 圓盤的預設上限由 JS 的縮放設定（基準 760px × 縮放倍率），這裡只保證它不會超出容器。 */
.wheel { width: 100%; height: auto; display: block; margin: 0 auto; }
.chart-zoom-controls {
  position: absolute; right: 0; bottom: 0; display: flex; gap: .25rem;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 999px; padding: .15rem;
}
.zoom-btn {
  background: none; border: 0; color: var(--fg-muted); font: inherit; font-size: .78rem;
  padding: .15rem .55rem; cursor: pointer; border-radius: 999px; min-width: 2.6rem;
}
.zoom-btn:hover { color: var(--fg); background: var(--bg-sunken); }

/* ── 三欄 ─────────────────────────────────────────────────────────────────── */
.info-grid {
  display: grid; gap: 1rem 1.5rem; margin-top: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.info-grid .panel-col, .info-grid section { min-width: 0; }
/* 下排不並排，是上下兩列：元素表一列、相位交角格一列。
   交角格有 17 個星體、16 個欄，滿格（44px）需要 746px —— 只要跟元素表分欄，無論
   怎麼分都會把格子壓小。獨佔一整列它才是滿格的，三角形也才有地方置中。
   兩張表都不拉滿版面：它們的欄數是固定的，拉寬只會拉出一片空白。各自縮到內容
   寬度後置中，左右自然留邊。 */
.grid-lower { margin-top: 1.5rem; grid-template-columns: 1fr; }
.scroll-x { overflow-x: auto; }

/* 行星位置。每一列是固定的五欄，所以度數與宮位在整欄上對得齊。 */
.planet-list { display: flex; flex-direction: column; gap: .1rem; }
.planet-row {
  display: grid; grid-template-columns: 1.4rem 1fr auto auto auto;
  gap: .4rem; align-items: baseline; font-size: .85rem; padding: .12rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}
.p-sym { text-align: center; }
.p-name { color: var(--fg); }
.p-sign { color: var(--fg-muted); white-space: nowrap; }
.p-retro { color: var(--danger); }
.p-house { font-size: .7rem; padding: 0 .3rem; border-radius: 3px; border: 1px solid currentColor; }
.p-house-natal { color: var(--sys-natal); }
.p-house-mundane { color: var(--sys-mundane); }

/* 星座特質。 */
.trait-card {
  background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 8px;
  padding: .7rem .8rem;
}
.trait-title { font-size: 1.05rem; font-weight: 600; }
.trait-body { font-size: .85rem; margin: .5rem 0; }
.keywords { display: flex; flex-wrap: wrap; gap: .3rem; }
.kw {
  font-size: .72rem; padding: .05rem .5rem; border-radius: 999px;
  background: var(--bg-raised); border: 1px solid var(--line); color: var(--fg-muted);
}
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .6rem; }
.mini-card {
  background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .6rem;
}
.mini-title { font-size: .78rem; color: var(--fg-muted); margin-bottom: .2rem; }
.mini-sign { font-weight: 600; }

/* 宮位對照表。一列看得出這一宮的跨距（起點 ～ 下一個宮首）。 */
.houses-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.house-block h4 { margin: .2rem 0 .3rem; font-size: .82rem; font-weight: 600; }
.house-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.house-table td { padding: .12rem .3rem; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); }
@media (max-width: 560px) { .houses-wrap { grid-template-columns: 1fr; } }

/* 元素 × 形態的交叉表。格子裡放的是星體符號本身，不是一個數字。
   四欄是固定的，所以不拉滿整列（width:auto 會縮到內容寬度），置中擺放。 */
.elmod-grid { border-collapse: collapse; width: auto; margin: 0 auto; font-size: .8rem; }
.elmod-grid th, .elmod-grid td {
  border: 1px solid var(--line); padding: .3rem .45rem; text-align: left; vertical-align: top;
}
/* 標題不能 nowrap：窄螢幕下「基本／開創 (Cardinal)」一行不斷，就會把整張表撐出
   面板外，最後一欄（變動／Mutable）被切掉。原版就是讓它折行的。 */
.elmod-grid th { color: var(--fg-muted); font-weight: 600; }
.elmod-grid td { min-width: 4rem; }
/* inline-block（原版也是）：符號之間沒有空白字元，而這些符號的斷行類別都是 AL，
   當成一整串就永遠不斷行 —— 一個星座擠進六顆以上的星時，那一格會把整張表推寬到
   面板外，最後一欄又被切掉。變成不可分割的行內方塊之後，格子裡才會自己折行。 */
.grid-sym { font-size: 1rem; margin-right: .2rem; display: inline-block; }

/* 相位交角格。落空的格子照畫（虛線、透明），三角形才保持它的形狀。
 *
 * 尺寸與間距照 app.kalakarma.institute 那一版（app-web 的 .aspect-grid-table）：
 *   有相位的格子是一塊與面板差一階的方塊（原本是 --bg-sunken，比面板暗兩階，
 *     整片沉下去）。色階往前景推 7%：深色主題下比面板亮，淺色主題下比面板暗 ——
 *     方向與原版的 --card2 對 --card 一致，兩邊都與落空的格子分得開；
 *   相位符號 1.25rem 粗體，誤差與 A／S 在它下面置中並排（flex + gap，不是靠邊距）；
 *   列首與格子之間、格子與欄首之間各留一段距離，符號才不會貼著那條分隔線。 */
.aspect-grid { border-collapse: collapse; margin: 0 auto; }
.aspect-grid th { color: var(--fg-muted); font-weight: 400; font-size: 1.1rem; text-align: center; }
.a-row-hdr { text-align: right !important; padding: 4px 10px 4px 0; border-right: 1px solid var(--line); }
.a-col-hdr { padding: 8px 4px 0; border-top: 1px solid var(--line); }
.a-cell {
  width: 44px; height: 44px; text-align: center; vertical-align: middle;
  border: 1px solid var(--line); background: color-mix(in srgb, var(--fg) 7%, var(--bg-raised));
  padding: 0;
}
.a-cell.empty { border: 1px dashed color-mix(in srgb, var(--fg) 8%, transparent); background: transparent; }
.a-sym { font-size: 1.25rem; font-weight: 700; line-height: 1; display: block; margin-bottom: 2px; }
.a-det {
  display: flex; justify-content: center; gap: 4px;
  font-size: .65rem; color: var(--fg-muted); line-height: 1.1;
}
.a-orb { font-weight: 700; }
.a-appsep { color: var(--fg-muted); }
.aspect-legend {
  margin-top: 1.25rem; font-size: .85em; background: color-mix(in srgb, var(--fg) 5%, transparent);
  padding: 12px; border-radius: 6px; text-align: left;
}

/* 合盤。
 *
 * 版面刻意不另起一套：雙圈用的是同一個 .wheel，交角格用的是同一個 .aspect-grid，
 * 只在需要區分「這是兩個人」的地方加一層。新看到的東西越少，兩頁越像同一個站。
 *
 * 外圈的星點與宮首都畫成虛線：兩個人的同一顆星是同一個顏色（顏色編碼的是星體，
 * 不是人），所以疊在一起時唯一分得出誰是誰的線索就是實線與虛線。印成黑白也還在。 */
.wheel-synastry .wheel-planet-outer { stroke-dasharray: 3 2; }
.wheel-synastry .outer-ring { opacity: .55; }
.wheel-aspect-cross { stroke-dasharray: 4 3; }

/* 兩個開關跟三個檢視頁籤同一列，但靠左 —— .chart-controls 預設 margin-left:auto。 */
.syn-toggles { margin-left: 0; gap: 1rem; flex-wrap: wrap; }

/* 檢視頁籤（內盤＋外盤／僅內盤／僅外盤）自成一列，在圓盤面板之外 —— 它換的是整頁，
   不是圓盤上的一個環，所以不該擠在圓盤的標題列裡跟環的頁籤混在一起。 */
.syn-view-tabs { margin: 0 0 .75rem; }

/* 人的身分籤。刻意不用 .sys-tag 的藍／橘：那兩個顏色在同一塊面板的圖例裡是
   「先天宮／後天宮」，借過來用會讓同一個藍色在同一個畫面上有兩個意思。 */
.person-tag {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .75rem; padding: .1rem .5rem; border-radius: 999px;
  border: 1px solid var(--line); color: var(--fg-muted);
}
.person-tag.person-a { border-color: var(--accent); color: var(--accent); }
.person-tag.person-b {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--fg) 45%, transparent);
}

/* 兩張同名的表並排時，這一行說出它是誰的。 */
.syn-person-cap { margin: -.25rem 0 .5rem; font-weight: 600; }

/* 合盤的交角格是長方形，不是左下三角，所以它有一整列欄首、也有一整欄列首。
 * 左上角那一格要寫得出「哪一邊是列、哪一邊是欄」——  弄反了整張表就是錯的，
 * 而且錯得看不出來（A♂×B♀ 與 A♀×B♂ 都存在，只是意思不同）。 */
.aspect-grid-cross .a-corner {
  font-size: .7rem; color: var(--fg-muted); text-align: center;
  padding: 4px 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.aspect-grid-cross .a-col-hdr { border-top: 0; border-bottom: 1px solid var(--line); padding: 4px; }
.aspect-grid-cross .a-row-hdr { border-right: 1px solid var(--line); }
.aspect-legend p { margin: .2rem 0; }
.legend-line { display: block; padding-left: 1.2em; color: var(--fg-muted); font-size: .92em; }

/* 「打開了但這個引擎給不出來」的具名空狀態。 */
.unavailable {
  margin-top: 1rem; border: 1px solid var(--warn); border-radius: 8px; padding: .7rem .9rem;
}
.unavailable h4 { margin: 0 0 .3rem; font-size: .85rem; color: var(--warn); }
.unavailable p { margin: .25rem 0; }

/* 選項卡。巢狀 panel，所以底色下沉一階，才不會和外層的卡片糊在一起。 */
.chart-options { background: var(--bg-sunken); margin: 1rem 0 0; padding: 1rem; }
.opt-points {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .3rem .75rem; font-size: .88rem;
}
.opt-check { display: flex; align-items: baseline; gap: .1rem; cursor: pointer; }
/* 灰掉而不是拿掉：使用者要看得到「這個選項存在，但這筆資料撐不起它」。 */
.opt-check.is-blocked { color: var(--fg-muted); cursor: not-allowed; }

.chart-head-actions { margin-top: 0; align-items: center; }
.subject-picker {
  background: var(--bg-sunken); color: var(--fg); border: 1px solid var(--line);
  border-radius: 8px; padding: .45rem .6rem; font: inherit; max-width: 12rem;
}

/* 375px：四欄的宮位制卡片會擠成不能讀的窄條，改成兩欄；相位格本來就會橫向捲動。 */
@media (max-width: 620px) {
  .sys-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .opt-points { grid-template-columns: 1fr; }
  .mini-grid { grid-template-columns: 1fr; }
  .subject-picker { max-width: 100%; }
  .chart-zoom-controls { position: static; margin: .4rem auto 0; width: max-content; }
  .chart-controls { margin-left: 0; flex-basis: 100%; }
}