/* Shared styling for ChartRender (South + North Indian charts).
 * Theme-agnostic: uses translucent neutrals and inherited text colour so it
 * looks right on both the dark call screen and RasiTalks' light/dark themes
 * without depending on any specific CSS variables. */

.crt-wrap {
  /* Light-golden chart so it reads as a warm "parchment" panel. Text uses an
   * explicit dark ink (NOT inherit) so it stays legible on the golden fill even
   * when the surrounding screen is dark (the call screen) and would otherwise
   * push light text onto a light background. */
  --crt-line: #d8b765;            /* golden grid lines / borders */
  --crt-fill: #fcf3cf;            /* light golden cell background */
  --crt-lagna-bg: #f4e2a1;        /* deeper gold for the lagna cell */
  --crt-accent: #b8860b;          /* dark goldenrod for markers/lagna */
  --crt-ink: #2e2614;             /* near-black brown for planet glyphs */
  --crt-sign-ink: #6b551d;        /* muted brown for sign labels */
  color: inherit;
}

.crt-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px; gap: 8px;
}
.crt-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent, #f3c969); font-weight: 700;
}
.crt-toggle {
  display: inline-flex; border: 1px solid var(--crt-line);
  border-radius: 999px; overflow: hidden; flex-shrink: 0;
}
.crt-toggle button {
  appearance: none; border: none; background: transparent;
  color: inherit; opacity: 0.7; font: inherit; font-size: 11.5px; font-weight: 600;
  padding: 5px 12px; min-height: 30px; cursor: pointer;
}
.crt-toggle button.active { background: var(--crt-accent); color: #241f10; opacity: 1; }

.crt-stage { display: grid; place-items: center; }

/* ── South Indian: 4×4 grid ── */
.crt-south {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1px;
  width: 100%; max-width: 400px; aspect-ratio: 1 / 1;
  background: var(--crt-line);
  border: 1px solid var(--crt-line);
  border-radius: 10px; overflow: hidden;
}
.crt-cell {
  background: var(--crt-fill);
  position: relative;
  padding: 3px 4px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.crt-center { background: var(--crt-fill); }
.crt-cell.crt-lagna { background: var(--crt-lagna-bg); }
.crt-cell.crt-lagna::after {
  content: ""; position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--crt-accent);
}
.crt-sign {
  font-size: 11.5px; font-weight: 700; color: var(--crt-sign-ink); opacity: 1;
  letter-spacing: 0.01em; white-space: nowrap;
}
.crt-planets {
  font-size: 13.5px; line-height: 1.3; color: var(--crt-ink);
  font-weight: 700; margin-top: 1px; overflow: hidden;
}

/* ── North Indian: diamond SVG ── */
.crt-north {
  width: 100%; max-width: 400px; aspect-ratio: 1 / 1;
  background: var(--crt-fill);
  border-radius: 10px;
}
.crt-north .crt-line {
  stroke: var(--crt-line); stroke-width: 1.4; fill: none;
}
.crt-north .crt-n-sign {
  font-size: 11px; font-weight: 700; fill: var(--crt-sign-ink); opacity: 1;
  font-family: inherit;
}
.crt-north .crt-n-sign.crt-n-lagna { fill: var(--crt-accent); }
.crt-north .crt-n-planets {
  font-size: 12px; font-weight: 700; fill: var(--crt-ink);
  font-family: inherit;
}