/* VedicDisha Kundali chart (SVG). Pairs with js/vd-kundali-chart.js. 2026-10-17 */

.vd-chart {
	--vdc-ink: #2b2b2b;
	--vdc-line: #8a5a1f;
	--vdc-soft: #f0d3a8;
	--vdc-bg: #fffdf8;
	--vdc-lagna: #ffeccc;
	--vdc-accent: #c25f00;
	display: block;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	box-sizing: border-box;
	color: var(--vdc-ink);
	text-align: center;
}
.vd-chart *, .vd-chart *::before, .vd-chart *::after { box-sizing: border-box; }

/* Toggle row: chart style + letters */
.vd-chart__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 12px;
	margin: 0 0 10px;
}
.vd-chart__group {
	display: inline-flex;
	border: 1px solid var(--vdc-soft);
	border-radius: 999px;
	overflow: hidden;
	background: #fff;
}
.vd-chart .vd-chart__btn {
	margin: 0;
	padding: 6px 13px;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: #7a4a14;
	font: 600 13px/1.2 "Work Sans", system-ui, sans-serif;
	cursor: pointer;
	text-transform: none;
	letter-spacing: 0;
	min-height: 32px;
}
.vd-chart .vd-chart__btn + .vd-chart__btn { border-left: 1px solid var(--vdc-soft); }
.vd-chart .vd-chart__btn:hover { background: #fff4e3; color: #7a4a14; }
.vd-chart .vd-chart__btn[aria-pressed="true"] { background: var(--vdc-accent); color: #fff; }
.vd-chart .vd-chart__btn:focus-visible { outline: 3px solid #1a5fb4; outline-offset: -3px; }

/* The picture */
/* The chart itself is capped at 340px (2026-10-18); the toggle row above it may use the full width of the card. */
.vd-chart__svg {
	display: block;
	width: 100%;
	max-width: 340px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	overflow: visible;
	font-family: "Work Sans", "Noto Sans Devanagari", "Nirmala UI", system-ui, sans-serif;
}
.vd-chart__bg { fill: var(--vdc-bg); }
.vd-chart__house { fill: none; stroke: var(--vdc-line); stroke-width: 1.4; stroke-linejoin: round; }
.vd-chart__house.is-lagna { fill: var(--vdc-lagna); }
.vd-chart__frame { fill: none; stroke: var(--vdc-line); stroke-width: 3; }
.vd-chart__centre { fill: var(--vdc-bg); stroke: var(--vdc-line); stroke-width: 1.4; }
.vd-chart__lagna-mark { stroke: var(--vdc-accent); stroke-width: 2.2; stroke-linecap: round; }
.vd-chart__centre-title { font-size: 25px; font-weight: 700; fill: #7a4a14; }
.vd-chart__centre-sub { font-size: 18px; font-weight: 500; fill: #7a4a14; }
.vd-chart__sign { font-size: 12.5px; font-weight: 600; fill: #7d6a52; }

/* Planet labels: bold short name, lighter small degree, small retrograde mark. */
.vd-chart__body { fill: var(--vdc-ink); }
.vd-chart__ab { font-weight: 700; }
.vd-chart__deg { font-weight: 600; opacity: .9; }
.vd-chart__retro { font-weight: 700; }
.vd-chart__body--asc     { fill: #111827; }
.vd-chart__body--sun     { fill: #c2410c; }
.vd-chart__body--moon    { fill: #334155; }
.vd-chart__body--mars    { fill: #b91c1c; }
.vd-chart__body--mercury { fill: #15803d; }
.vd-chart__body--jupiter { fill: #8a5a00; }
.vd-chart__body--venus   { fill: #be185d; }
.vd-chart__body--saturn  { fill: #1d4ed8; }
.vd-chart__body--rahu    { fill: #6b21a8; }
.vd-chart__body--ketu    { fill: #7c2d12; }
.vd-chart__body--muntha  { fill: #4d7c0f; font-style: italic; }
.vd-chart__body--uranus,
.vd-chart__body--neptune,
.vd-chart__body--pluto   { fill: #0f766e; }

.vd-chart__legend {
	margin: 10px auto 0;
	max-width: 340px;
	font: 400 13px/1.45 "Work Sans", system-ui, sans-serif;
	color: #5b4a38;
	text-align: center;
}

/* Compact variant (homepage hero) */
.vd-chart--compact { max-width: 300px; }
.vd-chart--compact .vd-chart__bar { margin: 5px 0 0; order: 2; }
.vd-chart--compact { display: flex; flex-direction: column; }
.vd-chart--compact .vd-chart__svg { order: 1; }
.vd-chart--compact .vd-chart__btn { padding: 3px 9px; font-size: 11.5px; min-height: 24px; }

/* Chart boxes (Birth Chart page and home hero): the chart fills the box, centred. */
.chart-container.vd-chart-on { position: relative; width: 100% !important; height: auto !important; max-width: 420px; margin-left: auto !important; margin-right: auto !important; }

/* Homepage hero: sized to the slide's visible area (the toggle sits under the chart, above the cards that
   overlap the bottom of the slide). The minimum height is the drawn chart plus toggle, so the slide does not
   jump when the chart appears a moment after the page loads. */
.lagna-chart-home.chart-container.vd-chart-on { width: 240px !important; height: auto !important; min-height: 271px; margin-top: -46px !important; }
.lagna-chart-home.chart-container.vd-chart-on .vd-chart--compact { max-width: 240px; }

/* Varshphal card */
.vp-chart-card .vd-chart { margin-top: 6px; }

@media print {
	.vd-chart__bar { display: none; }
	.vd-chart__legend { font-size: 11px; }
}
@media (max-width: 480px) {
	.vd-chart .vd-chart__btn { padding: 6px 10px; font-size: 12.5px; }
}