/* chart.css — The chart SVG — diamond, cells, planet labels
   Extracted from the single-file UI; loaded by index.html in order. */
  /* ============================ CHART SVG (the centrepiece) ============================ */
  .chartbox {
    display:flex; justify-content:center; padding:22px;
    border-radius:var(--radius-lg);
    background:
      radial-gradient(120% 100% at 50% 0%, color-mix(in srgb,var(--gold) 10%, var(--surface)) 0%, transparent 62%),
      var(--paper-deep);
    border:1px solid color-mix(in srgb,var(--gold) 38%, var(--line));
    box-shadow:
      var(--shadow),
      inset 0 0 0 1px #ffffff60,
      inset 0 0 44px -22px color-mix(in srgb,var(--gold) 70%, transparent);
    position:relative;
  }
  /* fine gilt keyline framing the diagram */
  .chartbox::before {
    content:""; position:absolute; inset:9px; border-radius:8px; pointer-events:none;
    border:1px solid color-mix(in srgb,var(--gold) 30%, transparent);
  }
  .chartbox svg { background:transparent; border-radius:4px; max-width:100%; height:auto; position:relative; z-index:1;
    filter:drop-shadow(0 6px 14px #5c3a1022); }
  .cell-house { fill:var(--gold); font-size:14px; font-weight:700; font-family:var(--mono); }
  .cell-sign  { fill:var(--accent); font-size:14px; font-weight:700; letter-spacing:.5px; }
  .cell-pl    { fill:var(--ink); font-size:16px; font-weight:600; }
  .pl-deva    { font-family:var(--deva); fill:var(--accent-2); font-size:18px; font-weight:700; }
  .cell-pl-eng{ fill:var(--muted); font-size:11px; font-weight:600; font-family:var(--mono); letter-spacing:.5px; }
  .pl-eng-only { font-family:var(--mono); font-size:14px; font-weight:700; letter-spacing:.3px; fill:var(--accent-2); }
  .cell-pl.retro tspan.r { fill:var(--accent-2); }

  .chart-caption { text-align:center; margin-top:18px; font-size:15.5px; color:var(--muted); line-height:1.75; }
  .chart-caption b { color:var(--accent-2); font-family:var(--head); }
  .chart-caption .deg { color:var(--ink); }
  .legend { display:flex; flex-wrap:wrap; gap:7px 16px; justify-content:center; margin-top:14px; font-size:13px; color:var(--muted); }
  .legend span b { color:var(--accent); }