/* xingpan.css — 西洋占星星盤叢集：本命盤圓盤（SVG）、三大星座、行星表、相位清單。
   載在 yongshen.css 之後，沿用其暖象牙 token 與 .ys-* 元件（表單、表格、誠實框）。
   配色克制：星名與數字用深色，相位只分柔和（藍）／緊張（緋）兩色，金色只留上升天頂軸線（見 design-gold-restraint）。 */

:root {
  --soft: #5a7fb0;   /* 三分、六分 */
  --hard: #b45c3f;   /* 四分、對分 */
  --el0: #b45c3f; --el1: #7a6a3f; --el2: #5a7fb0; --el3: #3f7a78;   /* 火土風水：只用在圓盤星座字 */
}

.xp-form { grid-template-columns: repeat(4, 1fr); }
.xp-form input[type="time"], .xp-form input[type="text"] {
  font: inherit; font-size: 0.98rem; color: var(--text); background: var(--bg-input);
  border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; width: 100%; box-sizing: border-box;
}
.xp-form input:disabled { opacity: .45; }
.xp-form .xp-city { grid-column: span 2; }
.xp-form .ys-opt { grid-column: span 2; }
.xp-form button { grid-column: span 2; }

.xp-big { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 10px; }
.xp-big div { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 12px 10px; text-align: center; }
.xp-big small { display: block; font-size: 0.78rem; color: var(--text-dim); letter-spacing: 0.06em; }
.xp-big b { display: block; margin-top: 4px; font-family: var(--lux-serif); font-size: 1.5rem; font-weight: 600; color: var(--text); line-height: 1.2; }
.xp-meta { font-size: 0.84rem; color: var(--text-dim); line-height: 1.8; margin: 0 0 8px; }

.xp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.xp-wheelwrap { max-width: 540px; width: 100%; margin: 0 auto; }
.xp-wheel { width: 100%; height: auto; display: block; }
.xp-ring { fill: none; stroke: var(--border); stroke-width: 1.2; }
.xp-ring.in { fill: var(--bg-input); }
.xp-sline { stroke: var(--border); stroke-width: 1.2; }
.xp-tick { stroke: #cfc6b4; stroke-width: 0.8; }
.xp-sign { font-size: 15px; text-anchor: middle; dominant-baseline: central; font-weight: 600; letter-spacing: 0.05em; }
.xp-sign.el0 { fill: var(--el0); } .xp-sign.el1 { fill: var(--el1); } .xp-sign.el2 { fill: var(--el2); } .xp-sign.el3 { fill: var(--el3); }
.xp-cusp { stroke: #d6cdbb; stroke-width: 0.9; }
.xp-cusp.axis { stroke: var(--gold); stroke-width: 1.8; }
.xp-hnum { font-size: 11px; fill: var(--text-dim); text-anchor: middle; dominant-baseline: central; }
.xp-axis-lbl { font-size: 12px; fill: var(--gold); font-weight: 600; text-anchor: middle; dominant-baseline: central; }
.xp-asp { stroke-width: 1; opacity: .75; }
.xp-asp.soft { stroke: var(--soft); } .xp-asp.hard { stroke: var(--hard); }
.xp-ptick { stroke: var(--text); stroke-width: 1.2; }
.xp-pl { font-size: 18px; fill: var(--text); font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.xp-pl.lum { font-size: 20px; }
.xp-pdeg { font-size: 11px; fill: var(--text-dim); text-anchor: middle; dominant-baseline: central; }
.xp-legend { font-size: 0.78rem; color: var(--text-dim); text-align: center; margin: 4px 0 0; }

.xp-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin: 0 5px 0 2px; vertical-align: 1px; background: var(--text-dim); }
.xp-dot.soft { background: var(--soft); } .xp-dot.hard { background: var(--hard); }

.xp-tally { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 6px; }
.xp-tally > div { background: var(--bg-input); border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; }
.xp-tally small { display: block; font-size: 0.74rem; color: var(--text-dim); margin-bottom: 4px; }
.xp-tal { display: inline-block; margin-right: 10px; font-size: 0.86rem; color: var(--text-dim); }
.xp-tal b { font-family: var(--lux-serif); font-size: 1.15rem; color: var(--text); margin-right: 2px; }

.xp-table { min-width: 0; }
.xp-table th, .xp-table td { padding: 7px 10px; }
.xp-r { display: inline-block; font-size: 0.72rem; color: var(--hard); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; line-height: 1.5; }
.xp-dig { font-size: 0.84rem; color: var(--text); }
.xp-unsure { display: block; font-size: 0.76rem; color: var(--text-dim); }
.article h3.xp-h3, .xp-grid h3 { font-size: 1.08rem; margin: 12px 0 6px; }
.xp-more { margin: 10px 0 0; }
.xp-more summary { cursor: pointer; font-size: 0.92rem; color: var(--text); font-weight: 500; padding: 4px 0; }
.xp-asps { list-style: none; padding: 0; margin: 6px 0 0; font-size: 0.9rem; line-height: 1.95; }
.xp-asps small { color: var(--text-dim); font-size: 0.78rem; }

@media (max-width: 640px) {
  .xp-form { grid-template-columns: repeat(2, 1fr); }
  .xp-form .xp-city, .xp-form .ys-opt, .xp-form button { grid-column: 1 / -1; }
  .xp-big b { font-size: 1.22rem; }
  .xp-tally { grid-template-columns: 1fr; }
  .xp-wheelwrap { margin: 0 -8px; width: auto; }
}