/* One palette for report, educational illustration and interactive demo.
   Accent colors are decorative; house numbers and selection outlines carry meaning. */
:root {
  --house-1: var(--primary); --house-2: var(--cyan-300); --house-3: var(--primary);
  --house-4: var(--violet); --house-5: var(--magenta); --house-6: var(--violet);
  --house-7: var(--cyan-300); --house-8: var(--primary); --house-9: var(--cyan-300);
  --house-10: var(--magenta); --house-11: var(--violet); --house-12: var(--magenta);
}
.celestial-house-wheel { isolation: isolate; }
.celestial-house-wheel svg { overflow: visible; }
.celestial-house-wheel .house-disc { fill: var(--ink-800); stroke: var(--border-emphasis); stroke-width: .6; }
.celestial-house-wheel .house-sector {
  fill: color-mix(in srgb, var(--house-color) 18%, var(--ink-800));
  stroke: color-mix(in srgb, var(--house-color) 38%, var(--ink-800));
  stroke-width: var(--house-stroke, .7);
  transition: fill .2s ease, stroke .2s ease, stroke-width .2s ease;
}
.celestial-house-wheel .house-orbit { fill: none; stroke: var(--primary); stroke-width: .45; opacity: .34; pointer-events: none; }
.celestial-house-wheel .house-ticks { stroke: var(--cyan-300); stroke-width: .55; opacity: .48; pointer-events: none; }
.celestial-house-wheel .house-core { fill: var(--ink-800); stroke: var(--violet); stroke-width: .6; }
.celestial-house-wheel .house-number { fill: var(--text); font-family: var(--font-ui); font-weight: 600; pointer-events: none; }
.celestial-house-wheel [role="button"] { cursor: pointer; }
.celestial-house-wheel [role="button"]:focus-visible { outline: none; }
.celestial-house-wheel .house-sector[aria-pressed="true"],
.celestial-house-wheel .house-sector:focus-visible,
.celestial-house-wheel [role="button"]:focus-visible .house-sector,
.celestial-house-wheel [data-selected="true"] .house-sector,
.celestial-house-wheel .is-inspected .house-sector {
  fill: color-mix(in srgb, var(--house-color) 28%, var(--ink-800));
  stroke: var(--text); stroke-width: 2.4; fill-opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .celestial-house-wheel .house-sector[role="button"]:hover,
  .celestial-house-wheel [role="button"]:hover .house-sector {
    fill: color-mix(in srgb, var(--house-color) 28%, var(--ink-800));
    stroke: var(--cyan-300); stroke-width: 1.6;
  }
}
@media (prefers-reduced-motion: reduce) { .celestial-house-wheel .house-sector { transition: none; } }
@media (forced-colors: active) {
  .celestial-house-wheel .house-sector, .celestial-house-wheel .house-disc, .celestial-house-wheel .house-core { fill: Canvas; stroke: CanvasText; }
  .celestial-house-wheel .house-number { fill: CanvasText; }
  .celestial-house-wheel [role="button"]:focus-visible { outline: 2px solid Highlight; }
  .celestial-house-wheel .house-sector[aria-pressed="true"], .celestial-house-wheel [data-selected="true"] .house-sector,
.celestial-house-wheel .is-inspected .house-sector { stroke: Highlight; stroke-width: 3; }
}