/* /zodiac-birth-chart-calculator only: the natal chart wheel. Scoped under #zbcApp.
   Colours are the kit tokens, so the wheel follows the light and dark themes. */
#zbcApp .zbc-wheel { margin: 12px auto; max-width: 520px; }
#zbcApp .zbc-wheel svg { width: 100%; height: auto; display: block; }
#zbcApp .zbc-ring { stroke: var(--bm-line-2, var(--bm-line)); stroke-width: 1; fill: none; }
#zbcApp .zbc-seg { stroke: var(--bm-line-2, var(--bm-line)); stroke-width: 1; }
#zbcApp .zbc-seg.is-fire { fill: color-mix(in srgb, var(--ic-t3, #f0655f) 12%, transparent); }
#zbcApp .zbc-seg.is-earth { fill: color-mix(in srgb, var(--ic-t5, #2fa36b) 12%, transparent); }
#zbcApp .zbc-seg.is-air { fill: color-mix(in srgb, var(--ic-t4, #e0a100) 12%, transparent); }
#zbcApp .zbc-seg.is-water { fill: color-mix(in srgb, var(--ic-t0, #5b8def) 12%, transparent); }
#zbcApp .zbc-sign { font-size: 15px; fill: var(--bm-ink-2); }
#zbcApp .zbc-tick { stroke: var(--bm-ink-3); stroke-width: 1; }
#zbcApp .zbc-cusp { stroke: var(--bm-line-2, var(--bm-line)); stroke-width: 1; }
#zbcApp .zbc-angle { stroke: var(--bm-ink); stroke-width: 2; }
#zbcApp .zbc-angle-label { font-size: 11px; font-weight: 700; fill: var(--bm-ink); }
#zbcApp .zbc-house { font-size: 10px; fill: var(--bm-ink-3); }
#zbcApp .zbc-planet { font-size: 17px; fill: var(--bm-ink); }
#zbcApp .zbc-deg { font-size: 9px; fill: var(--bm-ink-3); }
#zbcApp .zbc-asp { stroke-width: 1.4; fill: none; opacity: .85; }
#zbcApp .zbc-asp.is-soft { stroke: var(--ic-t0, #5b8def); }
#zbcApp .zbc-asp.is-hard { stroke: var(--ic-bad, #c62f2f); }
#zbcApp .zbc-asp.is-conj { stroke: var(--ic-t4, #e0a100); }
#zbcApp .zbc-asp.is-soft.is-minor { stroke-dasharray: 4 3; }
#zbcApp .zbc-legend { justify-content: center; margin-top: 6px; }
#zbcApp .zbc-legend i.is-soft { background: var(--ic-t0, #5b8def); }
#zbcApp .zbc-legend i.is-hard { background: var(--ic-bad, #c62f2f); }
#zbcApp .zbc-legend i.is-conj { background: var(--ic-t4, #e0a100); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    #zbcApp .zbc-seg { fill: transparent; }
}
@media (forced-colors: active) {
    #zbcApp .zbc-seg, #zbcApp .zbc-ring, #zbcApp .zbc-cusp, #zbcApp .zbc-tick, #zbcApp .zbc-angle, #zbcApp .zbc-asp { stroke: CanvasText; fill: none; }
    #zbcApp .zbc-sign, #zbcApp .zbc-planet, #zbcApp .zbc-deg, #zbcApp .zbc-house, #zbcApp .zbc-angle-label { fill: CanvasText; }
}