/* Natal chart visuals on the shared HD calc framework. Uses calc.css tokens
   (--surface/--text/--accent/--border/--muted/--on-accent) so themes apply.
   Wheel-specific vars are mapped onto those tokens below. */
:root, .calc {
  --dim: var(--muted);
  --tile: var(--surface);
  /* saturated classic palette, tuned for the dark themes (default/midnight/graphite) */
  --asp-hard: #FF6B6B;
  --asp-soft: #6FA8FF;
  --el-fire: #FF6B5E;
  --el-earth: #57CC7A;
  --el-air: #F2C44E;
  --el-water: #5BA8FF;
  --font: inherit;
}
/* light theme needs deeper, readable shades on white */
:root[data-theme="atma-light"], .calc[data-theme="atma-light"] {
  --asp-hard: #D23B3B;
  --asp-soft: #3B73D2;
  --el-fire: #D8392B;
  --el-earth: #2E9E4F;
  --el-air: #C2921A;
  --el-water: #2E78C8;
}

.az-portrait{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 14px;justify-content:center}
.az-ptag{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--text)}

.az-chart{display:flex;justify-content:center;margin:6px 0 14px}
.az-wheel{width:100%;max-width:460px}
.natal-svg{width:100%;height:auto;display:block}
.wk-ring{fill:none;stroke:var(--border);stroke-width:1}
.wk-ring--hub{opacity:.6}
.wk-spoke{stroke:var(--border);stroke-width:1}
.wk-tick{stroke:var(--dim);stroke-width:1;opacity:.65}
.wk-cusp{stroke:var(--border);stroke-width:1;stroke-dasharray:2 3}
.wk-cusp--axis{stroke:var(--accent);stroke-width:1.6;stroke-dasharray:none}
.wk-lead{stroke:var(--dim);stroke-width:1;opacity:.55}
.wk-hnum{fill:var(--dim);font:600 11px var(--font);text-anchor:middle}
.wk-axis-lbl{fill:var(--text);font:700 13px var(--font);text-anchor:middle}
.wk-asp{fill:none}
.wk-asp--hard{stroke:var(--asp-hard);stroke-width:1.1;opacity:.72}
.wk-asp--soft{stroke:var(--asp-soft);stroke-width:1.1;opacity:.72}
.wk-sign{color:var(--text)}
.el-Fire{color:var(--el-fire)}.el-Earth{color:var(--el-earth)}.el-Air{color:var(--el-air)}.el-Water{color:var(--el-water)}
.wk-planet{color:var(--text);cursor:pointer}
.wk-planet--lum{color:var(--accent)}
.wk-pdisc{fill:var(--tile);stroke:var(--border);stroke-width:1}

.az-bigthree{display:grid;gap:12px;grid-template-columns:1fr;margin:0 0 16px}
@media(min-width:620px){.az-bigthree{grid-template-columns:1fr 1fr 1fr}}
.az-big{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--surface)}
.az-big__h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.az-big__g{color:var(--accent);display:flex}
.az-big__t{display:flex;flex-direction:column}
.az-big__role{font-size:13px;color:var(--muted)}
.az-big__sign{font-size:16px;font-weight:700;color:var(--text)}
.az-big__sub{margin:4px 0;font-size:14px;color:var(--text);line-height:1.55}
.az-big__body{margin:4px 0 0;font-size:13px;color:var(--muted)}

.az-sec{margin:16px 0;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:14px}
.az-sec-h{font-size:18px;margin:0 0 12px;color:var(--text)}

.az-bal-grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:560px){.az-bal-grid{grid-template-columns:1fr 1fr}}
.az-bal-row{display:flex;align-items:center;gap:8px;margin:6px 0}
.az-bal-lbl{flex:0 0 84px;font-size:13px;color:var(--muted)}
.az-bal-track{flex:1;height:8px;background:var(--bg);border-radius:6px;overflow:hidden}
.az-bal-bar{display:block;height:100%;background:var(--accent);border-radius:6px}
.az-bal-bar--fire{background:var(--el-fire)}.az-bal-bar--earth{background:var(--el-earth)}
.az-bal-bar--air{background:var(--el-air)}.az-bal-bar--water{background:var(--el-water)}
.az-bal-num{flex:0 0 20px;text-align:right;font-size:13px;color:var(--text);font-weight:600}
.az-bal-note{margin:12px 0 0;font-size:13px;color:var(--muted);line-height:1.55}

.az-planets{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:560px){.az-planets{grid-template-columns:1fr 1fr}}
.az-pcard{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--bg)}
.az-pcard--locked{opacity:.7}
.az-pcard__h{display:flex;align-items:center;gap:10px}
.az-pcard__g{color:var(--accent);display:flex}
.az-pcard__meta{display:flex;flex-direction:column}
.az-pcard__name{font-size:15px;font-weight:600;color:var(--text)}
.az-pcard__pos{font-size:12px;color:var(--muted)}
.az-pcard__body{margin-top:8px}
.az-pcard__desc{margin:6px 0;font-size:14px;color:var(--muted);line-height:1.55}
.az-pcard__locked{margin:8px 0 0;font-size:13px;color:var(--muted);font-style:italic}
.az-kv{margin:4px 0;font-size:13px;color:var(--muted)}
.az-kv b{color:var(--text)}

.az-asp-list{display:flex;flex-direction:column;gap:6px}
.az-asp-row{display:flex;align-items:center;gap:10px}
.az-asp-pair{display:flex;align-items:center;gap:4px;color:var(--text)}
.az-asp-name{font-size:14px;color:var(--text)}
.az-asp-row--hard .az-asp-name{color:var(--asp-hard)}
.az-asp-row--soft .az-asp-name{color:var(--asp-soft)}
.az-asp-text{margin:0 0 6px;font-size:13px;color:var(--muted)}
.az-asp-more{margin:10px 0 0;font-size:13px;color:var(--muted);font-style:italic}

.az-house-grid{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:560px){.az-house-grid{grid-template-columns:1fr 1fr}}
.az-house{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:var(--bg)}
.az-house__h{display:flex;align-items:center;gap:10px}
.az-house__n{flex:0 0 32px;width:32px;height:32px;border-radius:9px;background:var(--accent);color:var(--on-accent,#fff);font-weight:700;display:flex;align-items:center;justify-content:center}
.az-house__t{display:flex;flex-direction:column}
.az-house__title{font-size:14px;font-weight:600;color:var(--text)}
.az-house__sign{font-size:12px;color:var(--muted)}
.az-house__area{margin:8px 0 2px;font-size:13px;color:var(--text)}
.az-house__desc{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.55}