/* natal-wheel.css — styling for the SVG chart wheel.
 *
 * Every colour resolves through the site's theme tokens, so one stylesheet
 * serves the dark default and the light theme. The element tints are the only
 * hues introduced here; they are kept low-saturation so twelve of them around a
 * ring read as a subtle band rather than a colour wheel.
 */

.nc-wheel { display: block; width: 100%; height: auto; }

/* ── rings and sectors ── */
.nc-ring {
    fill: none;
    stroke: var(--border, #272c37);
    stroke-width: 1;
}
.nc-ring-outer { stroke-width: 1.5; }

/* Element tints. The fill stays low so twelve of them read as one band rather
 * than a colour wheel, but the GLYPH colour is pushed well clear of the fill:
 * at 12% over a near-black background both were landing in the same muddy
 * mid-tone and the signs became hard to tell apart at wheel size. */
.nc-sign { stroke: var(--border, #272c37); stroke-width: 0.75; }
.nc-el-fire  { fill: color-mix(in srgb, #ef7048 17%, transparent); color: #ff9269; }
.nc-el-earth { fill: color-mix(in srgb, #57ad70 16%, transparent); color: #74d08e; }
.nc-el-air   { fill: color-mix(in srgb, #e2b53a 16%, transparent); color: #f2ce63; }
.nc-el-water { fill: color-mix(in srgb, #5a92dc 18%, transparent); color: #7fb2f5; }

[data-theme=light] .nc-el-fire  { fill: color-mix(in srgb, #c9502c 10%, transparent); color: #b9481f; }
[data-theme=light] .nc-el-earth { fill: color-mix(in srgb, #2f7a47 10%, transparent); color: #2b6d3f; }
[data-theme=light] .nc-el-air   { fill: color-mix(in srgb, #b68a12 12%, transparent); color: #8f6c08; }
[data-theme=light] .nc-el-water { fill: color-mix(in srgb, #2e63ad 11%, transparent); color: #29578f; }

.nc-signglyph { fill: none; stroke: currentColor; }
.nc-signglyph path { vector-effect: non-scaling-stroke; stroke-width: 1.4; }

/* ── degree graticule ──
 * Three weights so the eye can count in fives and tens without the ring turning
 * into a grey band: the single-degree marks stay deliberately faint. */
.nc-degtick { stroke: var(--text-muted, #8b93a7); }
.nc-deg1  { stroke-width: 0.5; opacity: .28; }
.nc-deg5  { stroke-width: 0.8; opacity: .5; }
.nc-deg10 { stroke-width: 1.1; opacity: .72; }

/* ── degree readout next to each body ── */
.nc-degtext {
    fill: var(--text-muted, #8b93a7);
    font: 500 11px/1 system-ui, sans-serif;
    text-anchor: middle;
    dominant-baseline: middle;
    font-variant-numeric: tabular-nums;
}
/* The SVG scales with its container, so on a phone this text renders around
   four pixels tall — unreadable, and it crowds the glyphs it belongs to. The
   exact degrees are in the positions table, which is the better place for them
   at that size, so the wheel drops the numbers rather than smudging them. */
@media (max-width: 540px) {
    .nc-degtext { display: none; }
    .nc-retromark { font-size: 13px; }
}

/* ── caption (birth data, travels with the exported file) ── */
.nc-cap {
    fill: var(--text-secondary, #aab2c5);
    font: 400 12px/1 system-ui, sans-serif;
    text-anchor: middle;
    dominant-baseline: middle;
    /* Each line takes its direction from its own first strong character. In an
     * RTL locale the date-time-place line is LTR content, and inheriting the
     * page direction printed its three segments back to front. */
    unicode-bidi: plaintext;
}
.nc-cap-strong { fill: var(--text-primary, #e8eaf0); font-weight: 650; }

/* ── houses ── */
.nc-cusp {
    stroke: var(--border, #272c37);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}
.nc-cusp-angular {
    stroke: var(--text-muted, #8b93a7);
    stroke-width: 1.4;
    stroke-dasharray: none;
}
.nc-housenum {
    fill: var(--text-muted, #8b93a7);
    font: 500 11px/1 system-ui, sans-serif;
    text-anchor: middle;
    dominant-baseline: middle;
}

/* ── angles ── */
.nc-angle {
    stroke: var(--accent, #6f9dff);
    stroke-width: 1.6;
}
.nc-anglelabel {
    fill: var(--accent, #6f9dff);
    font: 600 11px/1 system-ui, sans-serif;
    text-anchor: middle;
    dominant-baseline: middle;
    letter-spacing: .03em;
}

/* ── bodies ── */
.nc-tick { stroke: var(--text-muted, #8b93a7); stroke-width: 1.2; }
/* The leader line only appears when a glyph was nudged off its true degree, so
 * a crowded wheel still shows exactly where each body really sits. */
.nc-leader { stroke: var(--text-muted, #8b93a7); stroke-width: 0.8; opacity: .45; }

.nc-body { color: var(--text-primary, #e8eaf0); }
.nc-body path { vector-effect: non-scaling-stroke; stroke-width: 1.7; }
.nc-retro { color: #d2794a; }
[data-theme=light] .nc-retro { color: #b4551f; }
.nc-retromark {
    fill: #d2794a;
    font: 600 9px/1 system-ui, sans-serif;
    text-anchor: middle;
    dominant-baseline: middle;
}
[data-theme=light] .nc-retromark { fill: #b4551f; }

/* ── aspects ── */
.nc-aspect { stroke-width: 1; fill: none; }
.nc-a-conj    { stroke: #9aa3b8; }
.nc-a-oppo    { stroke: #d4574e; }
.nc-a-square  { stroke: #d4574e; }
.nc-a-trine   { stroke: #3f8fd0; }
.nc-a-sextile { stroke: #3f8fd0; stroke-dasharray: 4 3; }
.nc-a-minor   { stroke: #8b93a7; stroke-dasharray: 2 3; }

[data-theme=light] .nc-a-conj    { stroke: #6b7488; }
[data-theme=light] .nc-a-oppo,
[data-theme=light] .nc-a-square  { stroke: #b83f36; }
[data-theme=light] .nc-a-trine,
[data-theme=light] .nc-a-sextile { stroke: #2a6fa8; }

/* Hover highlighting is a progressive nicety: pointer-only, so it never traps
 * a touch user in a state they cannot leave. */
@media (hover: hover) {
    .nc-body:hover { color: var(--accent, #6f9dff); }
}