:root {
  --bg: #0f1117;
  --panel: #171a22;
  --line: #2a2f3a;
  --fg: #e7e9ee;
  --muted: #9aa3b2;
  --accent: #f0b429;
  --retro: #c0392b;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
}
header {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
}
header h1 { margin: 0; font-size: 20px; letter-spacing: .5px; }
.engine { color: var(--muted); font-size: 12px; }
main {
  display: grid; gap: 16px; padding: 16px;
  grid-template-columns: 1fr;
  max-width: 1100px; margin: 0 auto;
}
@media (min-width: 860px) {
  main { grid-template-columns: 360px 1fr; grid-template-areas: "form chart" "pos chart"; align-items: start; }
  form { grid-area: form; } .chart { grid-area: chart; } .positions { grid-area: pos; }
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
label { display: flex; flex-direction: column; font-size: 12px; color: var(--muted); gap: 4px; flex: 1; min-width: 90px; }
input, select, button {
  font: inherit; color: var(--fg); background: #0d0f15;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
}
button {
  background: var(--accent); color: #1a1205; border: 0; font-weight: 600;
  cursor: pointer; align-self: flex-end; padding: 9px 16px;
}
button:hover { filter: brightness(1.06); }
.err { color: var(--retro); min-height: 1em; margin: 4px 0 0; font-size: 13px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
td { padding: 5px 6px; border-bottom: 1px solid var(--line); font-family: "AstroSym", system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
td.sym { font-size: 18px; width: 1.4em; }
td.deg { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.r { color: var(--retro); font-weight: 600; }

/* ---- ZET-style wheel ---- */
@font-face {
  font-family: "AstroSym";
  src: url("/fonts/astro-symbols.woff2") format("woff2");
  font-display: block;
}
.chart { background: #eef1f5; }
.cap { color: var(--muted); font-size: 12px; margin-left: auto; }
svg { width: 100%; height: auto; display: block; }
.bg { fill: #ffffff; }
.houseband { fill: #e3edf7; }
.ring { fill: none; stroke: #9c9c9c; stroke-width: .9; }
.graycircle { fill: none; stroke: #8a949e; stroke-width: 1; }
.zsec { stroke: #ffffff; stroke-width: .6; }
/* sign glyphs: plain, like ordinary letters (neutral, not emphasised) */
.signglyph { fill: #3a3a3a; font-family: "AstroSym", sans-serif; font-size: 20px; font-weight: 400; text-anchor: middle; dominant-baseline: central; }
.tick { stroke: #707070; stroke-width: .5; }
.tick0 { stroke: #303030; stroke-width: 1; }
.cusp { stroke: #9fb3c8; stroke-width: .7; }
.axis { stroke: #8893a0; stroke-width: 1; }
.housenum { fill: #5a6b7a; font-size: 13px; text-anchor: middle; dominant-baseline: central; }
/* chart angles — tails stick out past the outer ring */
.angle.asc { stroke: #d23b3b; stroke-width: 1.6; }
.angle.mc  { stroke: #2a6fb0; stroke-width: 1.6; }
.angle.dsc, .angle.ic { stroke: #98a3b0; stroke-width: 1.2; }
.ascarrow { fill: #d23b3b; }
.anglelabel { font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.anglelabel.asc { fill: #d23b3b; }
.anglelabel.mc  { fill: #2a6fb0; }
.anglelabel.dsc, .anglelabel.ic { fill: #7a8794; }
/* planets sit on the gray circle (no disc, just glyphs) */
.hub { fill: #fff; stroke: #8a949e; stroke-width: 1; }
.ptick { stroke: #3a3a3a; stroke-width: 1; }
.leader { stroke: #c2c2c2; stroke-width: .6; }
.planet { fill: #16263a; font-family: "AstroSym", sans-serif; font-size: 20px; text-anchor: middle; dominant-baseline: central; }
.planet.sm { font-size: 15px; }
.retro { fill: #d23b3b; font-size: 9px; text-anchor: middle; dominant-baseline: central; }
.plabel { fill: #5a6878; font-family: "AstroSym", system-ui, sans-serif; font-size: 9px; text-anchor: middle; dominant-baseline: central; }
.phl { fill: #ffd34d; opacity: 0; }                 /* hover highlight halo */
.phit { fill: transparent; pointer-events: all; cursor: pointer; }
.pgroup.active .phl { opacity: .55; }
.pgroup.active .planet { fill: #000; }
/* aspect lines + glyph on the line: red = tense, green = harmonious */
.asp { stroke-width: 1; fill: none; }
.asp.sext   { stroke: #1f9d3a; stroke-dasharray: 5 3; }
.asp.trine  { stroke: #1f9d3a; }
.asp.square { stroke: #d23b3b; }
.asp.opp    { stroke: #d23b3b; }
.asp.qcnx   { stroke: #e08a2b; stroke-dasharray: 2 3; }
.aspbg { fill: #ffffff; opacity: .9; }
.aspglyph { font-family: "AstroSym", sans-serif; font-size: 13px; text-anchor: middle; dominant-baseline: central; }
.aspglyph.sext, .aspglyph.trine { fill: #1f9d3a; }
.aspglyph.square, .aspglyph.opp { fill: #d23b3b; }
.asphit { stroke: transparent; stroke-width: 9; fill: none; pointer-events: stroke; cursor: pointer; }

/* hoverable regions */
.zsec { pointer-events: all; cursor: pointer; }
.zsec.hi { stroke: #444; stroke-width: 2.2; }
.house { fill: transparent; pointer-events: all; cursor: pointer; }
.house.hi { fill: rgba(255, 211, 77, .30); }
.phit { fill: transparent; pointer-events: all; cursor: pointer; }

/* everything else is decorative — let the regions above receive the events */
.signglyph, .tick, .tick0, .housenum, .cusp, .axis, .angle, .anglelabel, .ascarrow,
.ring, .graycircle, .hub, .leader, .ptick, .plabel, .planet, .phl, .retro,
.aspbg, .aspglyph, .asp { pointer-events: none; }

/* hover: dim everything except the highlighted aspects (keep & enlarge their glyph) */
svg.hovering .asp { opacity: .12; }
svg.hovering .asp.hi { opacity: 1; stroke-width: 2.4; }
svg.hovering .aspbg, svg.hovering .aspglyph { opacity: .05; }
svg.hovering .aspbg.hi { opacity: 1; r: 13px; }
svg.hovering .aspglyph.hi { opacity: 1; }
.aspglyph.hi { font-size: 18px; }
/* tooltip */
.tip {
  position: fixed; z-index: 10; pointer-events: none;
  background: #0d1320; color: #e7e9ee; border: 1px solid #2a2f3a;
  border-radius: 8px; padding: 7px 10px; font-size: 13px; line-height: 1.35;
  font-family: "AstroSym", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  box-shadow: 0 6px 20px rgba(0,0,0,.4); max-width: 240px;
}
.tip b { color: #f0b429; }
.tip .tag { color: #9aa3b2; font-size: 11px; border: 1px solid #2a2f3a; border-radius: 4px; padding: 0 4px; margin-right: 4px; }
.tip[hidden] { display: none; }
/* form: second-chart inputs */
.second { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px 2px; margin: 0 0 10px; }
.second legend { color: var(--muted); font-size: 12px; padding: 0 6px; }
/* hidden must win over .row { display:flex } */
[hidden] { display: none !important; }