/**
 * Astrospot — chartwheel: figura, tooltip-ul, panoul de detalii.
 *
 * Tematizare: tema poate suprascrie orice culoare prin variabilele publice
 * --astro-* (aceleași pe care le ascultă și SVG-ul). Valorile de aici sunt
 * fallback-uri: întunecat implicit, luminos sub prefers-color-scheme:light.
 */

.astro-wheel-figure {
	--awf-surface: var(--astro-surface, #191d3c);
	--awf-border: var(--astro-border, rgba(217, 179, 108, 0.38));
	--awf-ink: var(--astro-ink, #e7eaf8);
	--awf-ink-dim: var(--astro-ink-dim, #9aa1c6);
	--awf-gold: var(--astro-gold, #d9b36c);
	--awf-hard: var(--astro-aspect-hard, #e0685f);
	--awf-soft: var(--astro-aspect-soft, #6aa9dd);
	--awf-minor: var(--astro-aspect-minor, #a4a86e);
	--awf-shadow: rgba(6, 8, 22, 0.5);
	--awf-glass: var(--astro-glass, rgba(24, 28, 58, 0.55));
	--awf-glass-fb: var(--astro-glass-fallback, rgba(21, 25, 52, 0.96));
	--awf-specular: rgba(255, 255, 255, 0.16);
	--awf-lg-tint: rgba(28, 33, 70, 0.34);
	--awf-lg-gloss: 0.14;
	--awf-lg-spec: 0.42;
	--awf-lg-glow: rgba(140, 170, 255, 0.28);
	--awf-lg-edge: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(143, 192, 236, 0.32) 34%, rgba(169, 155, 240, 0.3) 62%, rgba(226, 189, 110, 0.6));

	position: relative;
	margin: 2rem auto;
	width: 100%;
	font-family: Georgia, "Palatino Linotype", "Times New Roman", serif;
}

/* Modul luminos vine din sistem (dacă nu s-a forțat întunecat) SAU din
   comutatorul temei (data-theme="light"). OGLINDĂ: cele două blocuri identice. */
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) .astro-wheel-figure {
		--awf-surface: var(--astro-surface, #ffffff);
		--awf-border: var(--astro-border, rgba(31, 41, 76, 0.16));
		--awf-ink: var(--astro-ink, #202540);
		--awf-ink-dim: var(--astro-ink-dim, #565e80);
		--awf-gold: var(--astro-gold, #9a7627);
		--awf-hard: var(--astro-aspect-hard, #b8463a);
		--awf-soft: var(--astro-aspect-soft, #2f6ea8);
		--awf-minor: var(--astro-aspect-minor, #8a90ab);
		--awf-shadow: rgba(30, 42, 82, 0.2);
		--awf-glass: var(--astro-glass, rgba(255, 255, 255, 0.6));
		--awf-glass-fb: var(--astro-glass-fallback, rgba(255, 255, 255, 0.97));
		--awf-specular: rgba(255, 255, 255, 0.9);
		--awf-lg-tint: rgba(236, 242, 252, 0.3);
		--awf-lg-gloss: 0.6;
		--awf-lg-spec: 1;
		--awf-lg-glow: rgba(47, 110, 168, 0.22);
		--awf-lg-edge: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(47, 110, 168, 0.5) 34%, rgba(123, 108, 217, 0.46) 62%, rgba(151, 105, 15, 0.55));
		--awf-lg-rim: rgba(27, 33, 64, 0.1);
	}
}
:root[data-theme="light"] .astro-wheel-figure {
	--awf-surface: var(--astro-surface, #ffffff);
	--awf-border: var(--astro-border, rgba(31, 41, 76, 0.16));
	--awf-ink: var(--astro-ink, #202540);
	--awf-ink-dim: var(--astro-ink-dim, #565e80);
	--awf-gold: var(--astro-gold, #9a7627);
	--awf-hard: var(--astro-aspect-hard, #b8463a);
	--awf-soft: var(--astro-aspect-soft, #2f6ea8);
	--awf-minor: var(--astro-aspect-minor, #8a90ab);
	--awf-shadow: rgba(30, 42, 82, 0.2);
	--awf-glass: var(--astro-glass, rgba(255, 255, 255, 0.6));
	--awf-glass-fb: var(--astro-glass-fallback, rgba(255, 255, 255, 0.97));
	--awf-specular: rgba(255, 255, 255, 0.9);
	--awf-lg-tint: rgba(236, 242, 252, 0.3);
	--awf-lg-gloss: 0.6;
	--awf-lg-spec: 1;
	--awf-lg-glow: rgba(47, 110, 168, 0.22);
	--awf-lg-edge: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(47, 110, 168, 0.5) 34%, rgba(123, 108, 217, 0.46) 62%, rgba(151, 105, 15, 0.55));
	--awf-lg-rim: rgba(27, 33, 64, 0.1);
}

/* Discul roții: stopurile gradientului de fundal au opacități de noapte
   (0.5/0.18/0 — pagina întunecată umple restul). Pe fundal luminos discul
   devine porțelan solid, altfel roata e o fantomă pe alb.
   OGLINDĂ: blocul @media și cel [data-theme="light"] se țin identice. */
.astro-wheel--light .bgc1 { stop-opacity: 1; }
.astro-wheel--light .bgc2 { stop-opacity: 0.94; }

@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) .astro-wheel--auto .bgc1 { stop-opacity: 1; }
	:root:not([data-theme="dark"]) .astro-wheel--auto .bgc2 { stop-opacity: 0.94; }
}
:root[data-theme="light"] .astro-wheel--auto .bgc1 { stop-opacity: 1; }
:root[data-theme="light"] .astro-wheel--auto .bgc2 { stop-opacity: 0.94; }

/* Temele pinuite ale roții pinuiesc și figura (tooltip, panou, legendă),
   indiferent de prefers-color-scheme. Declarate după @media ca să câștige. */
.astro-wheel-figure--dark {
	--awf-glass: var(--astro-glass, rgba(24, 28, 58, 0.55));
	--awf-glass-fb: var(--astro-glass-fallback, rgba(21, 25, 52, 0.96));
	--awf-specular: rgba(255, 255, 255, 0.16);
	--awf-lg-tint: rgba(28, 33, 70, 0.34);
	--awf-lg-gloss: 0.14;
	--awf-lg-spec: 0.42;
	--awf-lg-glow: rgba(140, 170, 255, 0.28);
	--awf-lg-edge: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(143, 192, 236, 0.32) 34%, rgba(169, 155, 240, 0.3) 62%, rgba(226, 189, 110, 0.6));
	--awf-surface: var(--astro-surface, #191d3c);
	--awf-border: var(--astro-border, rgba(217, 179, 108, 0.38));
	--awf-ink: var(--astro-ink, #e7eaf8);
	--awf-ink-dim: var(--astro-ink-dim, #9aa1c6);
	--awf-gold: var(--astro-gold, #d9b36c);
	--awf-hard: var(--astro-aspect-hard, #e0685f);
	--awf-soft: var(--astro-aspect-soft, #6aa9dd);
	--awf-minor: var(--astro-aspect-minor, #a4a86e);
	--awf-shadow: rgba(6, 8, 22, 0.5);
	--awf-glass: var(--astro-glass, rgba(24, 28, 58, 0.55));
	--awf-glass-fb: var(--astro-glass-fallback, rgba(21, 25, 52, 0.96));
	--awf-specular: rgba(255, 255, 255, 0.16);
}

.astro-wheel-figure--light {
	--awf-glass: var(--astro-glass, rgba(255, 255, 255, 0.6));
	--awf-glass-fb: var(--astro-glass-fallback, rgba(255, 255, 255, 0.97));
	--awf-specular: rgba(255, 255, 255, 0.9);
	--awf-lg-tint: rgba(236, 242, 252, 0.3);
	--awf-lg-gloss: 0.6;
	--awf-lg-spec: 1;
	--awf-lg-glow: rgba(47, 110, 168, 0.22);
	--awf-lg-edge: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(47, 110, 168, 0.5) 34%, rgba(123, 108, 217, 0.46) 62%, rgba(151, 105, 15, 0.55));
	--awf-lg-rim: rgba(27, 33, 64, 0.1);
	--awf-surface: var(--astro-surface, #ffffff);
	--awf-border: var(--astro-border, rgba(31, 41, 76, 0.16));
	--awf-ink: var(--astro-ink, #1b2140);
	--awf-ink-dim: var(--astro-ink-dim, #59628a);
	--awf-gold: var(--astro-gold, #97690f);
	--awf-hard: var(--astro-aspect-hard, #c8483f);
	--awf-soft: var(--astro-aspect-soft, #3a7bc8);
	--awf-minor: var(--astro-aspect-minor, #8a90ab);
	--awf-shadow: rgba(30, 42, 82, 0.2);
}

/* align="wide|full": roata iese simetric din coloana de text, până la mărimea cerută
   (dar niciodată mai lată decât ecranul minus marginile). */
.astro-wheel-figure.alignwide,
.astro-wheel-figure.alignfull {
	--awf-w: min(var(--awf-max, 880px), 100vw - 2rem);
	width: var(--awf-w);
	max-width: none !important;
	margin-inline: calc((100% - var(--awf-w)) / 2) !important;
}

.astro-wheel-figure svg.astro-wheel {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 20px 44px var(--awf-shadow));
}

/* ------------------------------------------------------------- legenda. */

.astro-caption {
	margin-top: 1rem;
	text-align: center;
	font-size: 0.93rem;
	font-style: italic;
	letter-spacing: 0.02em;
	color: var(--awf-ink-dim);
}

/* ------------------------------------------------------------- tooltip. */

.astro-tooltip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 30;
	pointer-events: none;
	max-width: 280px;
	padding: 0.62rem 0.9rem 0.68rem;
	border-radius: 16px;
	/* Sticlă lichidă: nuanță abia pusă peste roata încețoșată, luciu diagonal, muchie
	   irizată (::before), reflexie speculară (::after), grosime prin umbrele interioare. */
	background:
		linear-gradient(135deg, rgba(255, 255, 255, var(--awf-lg-gloss)) 0%, rgba(255, 255, 255, 0) 46%),
		var(--awf-lg-tint);
	-webkit-backdrop-filter: blur(7px) saturate(1.9) brightness(1.06);
	backdrop-filter: blur(7px) saturate(1.9) brightness(1.06);
	color: var(--awf-ink);
	font-size: 0.88rem;
	line-height: 1.5;
	box-shadow:
		0 22px 44px -14px var(--awf-shadow),
		0 3px 8px -2px var(--awf-shadow),
		inset 0 1px 0 rgba(255, 255, 255, var(--awf-lg-spec)),
		inset 0 -1px 0 var(--awf-lg-rim, rgba(255, 255, 255, 0.1)),
		inset 0 -14px 22px -16px var(--awf-lg-glow);
	transform-origin: 0 0;
	will-change: left, top, scale;
}

.astro-tooltip::before,
.astro-tooltip::after {
	content: "";
	position: absolute;
	pointer-events: none;
	border-radius: inherit;
}

.astro-tooltip::before {
	inset: 0;
	padding: 1px;
	background: var(--awf-lg-edge);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* reflexia: o fâșie curbă de lumină sub muchia de sus, stinsă spre dreapta */
.astro-tooltip::after {
	top: 2px;
	left: 8px;
	right: 32%;
	height: 46%;
	border-radius: 14px 14px 60% 60% / 14px 14px 100% 100%;
	background: linear-gradient(to bottom, rgba(255, 255, 255, calc(var(--awf-lg-spec) * 0.42)), rgba(255, 255, 255, 0));
	-webkit-mask-image: linear-gradient(to right, #000 30%, transparent);
	mask-image: linear-gradient(to right, #000 30%, transparent);
}

.astro-tooltip > * {
	position: relative;
}

/* intrarea: o picătură care cade pe sticlă și își găsește forma */
.astro-tooltip:not([hidden]) {
	animation: astro-glass-in 0.5s cubic-bezier(0.3, 1.3, 0.5, 1);
}

@keyframes astro-glass-in {
	0% {
		opacity: 0;
		transform: scale(0.7, 0.55);
		border-radius: 28px;
	}

	40% {
		opacity: 1;
		transform: scale(1.05, 0.96);
	}

	70% {
		transform: scale(0.985, 1.02);
	}

	100% {
		opacity: 1;
		transform: none;
		border-radius: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.astro-tooltip:not([hidden]) {
		animation: none;
	}
}

.astro-tooltip[hidden] {
	display: none;
}

.astro-tooltip strong {
	display: block;
	font-weight: 600;
	font-size: 0.97rem;
	letter-spacing: 0.03em;
	color: var(--awf-gold);
}

.astro-tooltip span {
	display: block;
}

/* -------------------------------------------------- panoul de detalii. */

.astro-panel {
	margin-top: 1.1rem;
	padding: 1.15rem 1.35rem 1.25rem;
	border: 1px solid var(--awf-border);
	border-top-color: var(--awf-specular);
	border-radius: 18px;
	background: var(--awf-glass);
	-webkit-backdrop-filter: blur(18px) saturate(1.5);
	backdrop-filter: blur(18px) saturate(1.5);
	color: var(--awf-ink);
	box-shadow:
		0 18px 44px var(--awf-shadow),
		inset 0 1px 0 var(--awf-specular),
		inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}

/* Fallback elegant unde backdrop-filter nu există: sticlă semi-opacă. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.astro-tooltip,
	.astro-panel {
		background: var(--awf-glass-fb);
	}
}

@media (prefers-reduced-motion: reduce) {
	.astro-tooltip:not([hidden]) {
		animation: none;
	}
}

.astro-panel[hidden] {
	display: none;
}

.astro-panel-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	border-bottom: 1px solid var(--awf-border);
	padding-bottom: 0.55rem;
	margin-bottom: 0.8rem;
}

.astro-panel-head h3 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--awf-gold);
}

.astro-retro-badge {
	font-size: 0.78rem;
	font-style: italic;
	color: var(--awf-hard);
	letter-spacing: 0.02em;
}

.astro-panel-close {
	border: 0;
	background: none;
	color: var(--awf-ink-dim);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 0 0.2rem;
}

.astro-panel-close:hover,
.astro-panel-close:focus-visible {
	color: var(--awf-gold);
}

.astro-panel-rows {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0.5rem 1.4rem;
}

.astro-panel-rows dt {
	font-size: 0.78rem;
	color: var(--awf-ink-dim);
	letter-spacing: 0.06em;
}

.astro-panel-rows dd {
	margin: 0.1rem 0 0;
	font-size: 0.98rem;
}

.astro-panel-sub {
	margin: 1rem 0 0.4rem;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	color: var(--awf-ink);
}

.astro-aspect-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 2rem;
}

.astro-aspect-list li {
	break-inside: avoid;
	padding: 0.24rem 0;
	font-size: 0.9rem;
}

.astro-aspect-list em {
	color: var(--awf-ink-dim);
	font-size: 0.82rem;
}

.astro-no-aspects {
	color: var(--awf-ink-dim);
	font-style: italic;
}

.astro-swatch {
	display: inline-block;
	width: 15px;
	height: 3px;
	border-radius: 2px;
	margin-right: 0.5rem;
	vertical-align: middle;
	background: var(--awf-ink-dim);
}

.astro-swatch--conjunction { background: var(--awf-gold); }
.astro-swatch--opposition,
.astro-swatch--square,
.astro-swatch--semisquare,
.astro-swatch--sesquiquadrate { background: var(--awf-hard); }
.astro-swatch--trine,
.astro-swatch--sextile { background: var(--awf-soft); }
.astro-swatch--quincunx,
.astro-swatch--semisextile { background: var(--awf-minor); }

.astro-wheel-error {
	color: #bf4a3e;
	font-style: italic;
}

/* ----------------------------------------------------------- responsive. */

@media (max-width: 640px) {
	.astro-aspect-list {
		columns: 1;
	}
}

/* Pe ecrane mici, textul din interiorul SVG-ului (unități viewBox) crește
   ca să rămână lizibil — CSS-ul documentului se aplică SVG-ului inline. */
@media (max-width: 480px) {
	.astro-wheel-figure .astro-wheel .degnum { font-size: 17px; }
	.astro-wheel-figure .astro-wheel .housenum { font-size: 20px; }
	.astro-wheel-figure .astro-wheel .axis-label { font-size: 27px; }

	.astro-panel {
		padding: 0.85rem 0.9rem 1rem;
	}

	.astro-caption {
		font-size: 0.84rem;
	}
}