/* Design tokens. Light theme is the base; dark overrides follow the
   browser's prefers-color-scheme (there is no manual toggle).
   All colors used anywhere in the app come from these variables. */
:root {
  color-scheme: light dark;

  --bg: #f7f5f0;
  --surface: #ffffff;
  --text: #1d1b26;
  --text-muted: #5c5870;
  --border: #ddd8cc;
  --accent: #5b4bb7;

  /* Aspect families (DESIGN §5.3). Each also has a line style in the wheel. */
  --aspect-fusion: #b8860b;
  --aspect-flow: #2f6fbf;
  --aspect-flow-soft: #6a9fd8;
  --aspect-tension: #c0392b;
  --aspect-tension-deep: #8e2a20;

  /* Element tints for the sign ring. */
  --el-fire: #f3dfd6;
  --el-earth: #e3e6d4;
  --el-air: #e6e1ef;
  --el-water: #d8e5ee;

  /* Wheel. */
  --wheel-face: #fbfaf6;
  --wheel-line: #c9c2b2;
  --wheel-ink: #3a3550;
  --node-ink: #7a7590;

  --radius: 12px;
  --gutter: 16px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e0d17;
    --surface: #18162a;
    --text: #ece9f6;
    --text-muted: #a49fbd;
    --border: #2e2a45;
    --accent: #a597ff;

    --aspect-fusion: #e2b84a;
    --aspect-flow: #6aa8f0;
    --aspect-flow-soft: #9cc5f5;
    --aspect-tension: #f06a5c;
    --aspect-tension-deep: #c9483b;

    --el-fire: #3a2422;
    --el-earth: #2b2f22;
    --el-air: #2c2840;
    --el-water: #1f2c38;

    --wheel-face: #141225;
    --wheel-line: #3a3556;
    --wheel-ink: #e4e0f4;
    --node-ink: #9c96b8;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
}

html { -webkit-text-size-adjust: 100%; }

.site-header, #app, .site-footer {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Header */
.site-header {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 8px 16px; padding-block: 16px;
}
.site-header h1 { margin: 0; font-size: 1.75rem; line-height: 1.1; }
.tagline { margin: 0; color: var(--text-muted); }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.moment { margin: 0; font-variant-numeric: tabular-nums; }
.chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text-muted); font-size: 0.9rem;
}
.button {
  min-height: 44px; min-width: 44px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font: inherit; cursor: pointer;
}
.button:hover { border-color: var(--accent); }
.button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Layout: single column on phones, wheel left + side panel on desktop. */
.layout { display: grid; gap: var(--gutter); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .layout { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); align-items: start; }
}
.side { display: grid; gap: var(--gutter); min-width: 0; }
.wheel-box { width: 100%; max-width: 600px; margin: 0 auto; aspect-ratio: 1; }
.note { color: var(--text-muted); font-size: 0.85rem; margin: 8px 0 0; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--gutter);
  min-width: 0;
}
.panel h2 { margin-top: 0; font-size: 1.1rem; }

.positions { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.positions th, .positions td { text-align: left; padding: 6px 4px; border-bottom: 1px solid var(--border); }
.positions th { color: var(--text-muted); font-weight: 600; font-size: 0.85rem; }
@media (max-width: 420px) {
  .positions { font-size: 0.9rem; }
  .positions th, .positions td { padding: 6px 2px; }
}
.glyph { display: inline-block; width: 1.5em; }
.retro { color: var(--aspect-tension); }

.aspect-list { list-style: none; margin: 0; padding: 0; }
.aspect-list li {
  display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.aspect-list .orb { color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Swatch repeats the wheel's line style, so color is never the only cue. */
.aspect-swatch { display: block; height: 0; border-top: 3px solid var(--aspect-flow); }
.aspect-swatch.sextile { border-top-color: var(--aspect-flow-soft); }
.aspect-swatch.tension { border-top-style: dashed; border-top-color: var(--aspect-tension); }
.aspect-swatch.opposition { border-top-color: var(--aspect-tension-deep); }
.aspect-swatch.fusion {
  height: 14px; width: 14px; border: 0; border-radius: 50%; margin: 0 auto;
  background: var(--aspect-fusion); box-shadow: 0 0 6px 2px var(--aspect-fusion);
}

/* Wheel */
.wheel { display: block; width: 100%; height: auto; font-family: var(--font); }
.wheel text { text-anchor: middle; dominant-baseline: central; fill: var(--wheel-ink); }
.wheel-face { fill: var(--wheel-face); stroke: var(--wheel-line); stroke-width: 2; }
.sign path, .house path { stroke: var(--wheel-line); stroke-width: 1.5; }
.sign.el-fire path { fill: var(--el-fire); }
.sign.el-earth path { fill: var(--el-earth); }
.sign.el-air path { fill: var(--el-air); }
.sign.el-water path { fill: var(--el-water); }
.sign-glyph { font-size: 34px; }
.house path { fill: var(--wheel-face); }
.wheel .house-number { font-size: 20px; fill: var(--text-muted); }
.aspect-area { fill: none; stroke: var(--wheel-line); stroke-width: 1.5; }
.axis-line { stroke: var(--wheel-line); stroke-width: 1.5; stroke-dasharray: 2 6; }
.wheel .axis-label { font-size: 18px; font-weight: 600; fill: var(--text-muted); }

.planet .tick { stroke: var(--wheel-ink); stroke-width: 3; }
.planet .leader { stroke: var(--wheel-line); stroke-width: 1.5; }
.planet-glyph { font-size: 40px; }
.wheel .planet-label { font-size: 17px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.wheel .planet.retrograde .planet-label { fill: var(--aspect-tension); }
.wheel .planet.node .planet-glyph { fill: var(--node-ink); font-size: 32px; }
.planet.node .tick { stroke: var(--node-ink); }
.planet[data-body="southnode"] .planet-glyph { font-size: 24px; }
.planet[data-body="southnode"] .planet-label { display: none; }
.halo { fill: var(--aspect-fusion); pointer-events: none; }

.aspect-line { stroke-width: 3; stroke-linecap: round; }
.aspect.flowing .aspect-line { stroke: var(--aspect-flow); }
.aspect.sextile .aspect-line { stroke: var(--aspect-flow-soft); }
.aspect.tension .aspect-line { stroke: var(--aspect-tension); stroke-dasharray: 14 9; }
.aspect.opposition .aspect-line { stroke: var(--aspect-tension-deep); }
/* Wide invisible target so thin lines are easy to tap (selection lands in 3.3). */
.aspect-hit { stroke: transparent; stroke-width: 24; pointer-events: stroke; }

.load-error { color: var(--aspect-tension); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.site-footer { color: var(--text-muted); font-size: 0.85rem; padding-block: 24px; }
a { color: var(--accent); }