/* archforsense concept ontology — styles
   Every knob is a custom property. With data-theme="auto" the script
   overwrites the fonts, sizes and colours at runtime from what your theme
   actually renders; the values here are the fallbacks. */

.afs3d {
	/* colour */
	--afs-accent:  var(--ast-global-color-1, #5b7fa6);
	--afs-tension: var(--ast-global-color-2, #b4703f);
	--afs-line:    var(--ast-border-color, #cfc8b9);
	--afs-panel:   var(--ast-global-color-5, #fff);

	/* orb tint per depth band */
	--afs-layer-0: #c7d3e1;
	--afs-layer-1: #99b0c8;
	--afs-layer-2: var(--afs-accent);
	--afs-layer-3: var(--afs-tension);

	/* typography */
	--afs-font: inherit;
	--afs-font-display: inherit;
	--afs-weight-display: 600;
	--afs-spacing-display: normal;
	--afs-size-title: 1.35rem;
	--afs-size-note: 1rem;
	--afs-size-body: .95rem;
	--afs-lh-body: 1.62;
	--afs-size-label: .82rem;
	--afs-weight-label: 400;
	--afs-size-ui: .78rem;

	/* node images */
	--afs-img-radius: 50%;
	--afs-img-ring: 1px solid var(--afs-line);
	--afs-img-shadow: 0 6px 18px rgba(0, 0, 0, .16);

	position: relative;
	width: 100%;
	height: var(--afs-height, clamp(520px, 82vh, 900px));
	font-family: var(--afs-font);
	color: inherit;
	overflow: hidden;
	border-radius: 10px;
	touch-action: none;
}

.afs3d-stage { position: absolute; inset: 0; }
.afs3d-stage canvas { display: block; outline: none; }

/* projected node overlays */
.afs3d-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.afs3d-node { position: absolute; left: 0; top: 0; will-change: transform; }

.afs3d-node .pic {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--afs-img-radius);
	border: var(--afs-img-ring);
	box-shadow: var(--afs-img-shadow);
	overflow: hidden;
	background: var(--afs-panel);
}
.afs3d-node .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

.afs3d-node .orb {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .20));
}

.afs3d-node b {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 7px;
	white-space: nowrap;
	font-family: var(--afs-font);
	font-size: var(--afs-size-label);
	font-weight: var(--afs-weight-label);
	line-height: 1;
	text-shadow: 0 0 6px var(--afs-panel), 0 0 6px var(--afs-panel);
}

/* controls */
.afs3d-hud { position: absolute; top: 12px; right: 12px; z-index: 3; display: flex; gap: 6px; }

.afs3d-hud button,
.afs3d-find input {
	font-family: var(--afs-font);
	font-size: var(--afs-size-ui);
	line-height: 1;
	padding: .5em .8em;
	border-radius: 999px;
	border: 1px solid var(--afs-line);
	background: var(--afs-panel);
	color: inherit;
	cursor: pointer;
	opacity: .85;
}
.afs3d-hud button:hover { opacity: 1; }
.afs3d-hud button[aria-pressed="true"] { border-color: var(--afs-accent); }

.afs3d-find { position: absolute; top: 12px; left: 12px; z-index: 3; margin: 0; }
.afs3d-find input { cursor: text; width: 11em; }

.afs3d-find input:focus-visible,
.afs3d-hud button:focus-visible,
.afs3d-close:focus-visible { outline: 2px solid var(--afs-accent); outline-offset: 2px; }

.afs3d-legend {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	opacity: .45;
	line-height: 1.9;
	pointer-events: none;
}
.afs3d-legend span { display: block; }
.afs3d-legend span::before {
	content: "";
	display: inline-block;
	width: 14px;
	height: 1px;
	background: currentColor;
	margin-right: .6em;
	vertical-align: middle;
}

.afs3d-status {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	max-width: 60%;
	text-align: right;
	font-size: .72rem;
	opacity: .4;
	pointer-events: none;
}
.afs3d-status[data-error] { opacity: .85; }

/* concept panel */
.afs3d-panel {
	position: absolute;
	z-index: 4;
	right: 12px;
	top: 56px;
	width: min(360px, calc(100% - 24px));
	max-height: calc(100% - 84px);
	overflow: auto;
	padding: 1.2rem 1.3rem 1.4rem;
	background: var(--afs-panel);
	border: 1px solid var(--afs-line);
	border-radius: 10px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, .13);
	font-family: var(--afs-font);
}

.afs3d-panel h3 {
	margin: .15rem 0 .5rem;
	font-family: var(--afs-font-display);
	font-size: var(--afs-size-title);
	font-weight: var(--afs-weight-display);
	letter-spacing: var(--afs-spacing-display);
	line-height: 1.2;
}

.afs3d-kicker { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; opacity: .5; }
.afs3d-note { font-style: italic; opacity: .75; margin: 0 0 .8rem; font-size: var(--afs-size-note); }
.afs3d-body { font-size: var(--afs-size-body); line-height: var(--afs-lh-body); }

.afs3d-neighbours { margin-top: 1rem; }
.afs3d-neighbours b {
	display: block;
	font-weight: inherit;
	opacity: .5;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .64rem;
	margin-bottom: .45rem;
}
.afs3d-neighbours button {
	font-family: var(--afs-font);
	font-size: .8rem;
	background: none;
	cursor: pointer;
	border: 1px solid var(--afs-line);
	border-radius: 999px;
	padding: .28em .7em;
	margin: 0 .25em .35em 0;
	color: inherit;
}
.afs3d-neighbours button:hover { border-color: var(--afs-accent); }

.afs3d-more { display: inline-block; margin-top: 1rem; font-size: .86rem; }
.afs3d-more[hidden] { display: none; }

.afs3d-close {
	position: absolute;
	top: .5rem;
	right: .6rem;
	background: none;
	border: 0;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: .45;
	padding: 0;
}
.afs3d-close:hover { opacity: 1; }

@media (max-width: 600px) {
	.afs3d {
		height: var(--afs-height-mobile, clamp(420px, 74vh, 640px));
		--afs-size-label: .75rem;
	}
	.afs3d-panel { right: 8px; left: 8px; width: auto; top: auto; bottom: 8px; max-height: 52%; }
	.afs3d-legend { display: none; }
	.afs3d-find input { width: 8em; }
}

/* ============================================================
   style="nebula" — dark stage, glowing orbs, depth haze
   Everything below only applies inside a nebula widget, so the
   plain look is untouched.
   ============================================================ */

.afs3d[data-style="nebula"] {
	--afs-void: #080b12;
	--afs-glow: var(--afs-accent);
	background:
		radial-gradient(ellipse at 30% 20%, rgba(80, 120, 180, .16), transparent 60%),
		radial-gradient(ellipse at 75% 75%, rgba(200, 130, 60, .12), transparent 55%),
		var(--afs-void);
	color: #e8eef7;
}

.afs3d[data-style="nebula"] .afs3d-node .orb {
	filter:
		drop-shadow(0 0 4px var(--afs-node))
		drop-shadow(0 0 14px var(--afs-node))
		drop-shadow(0 0 34px var(--afs-node));
}

.afs3d[data-style="nebula"] .afs3d-node b {
	color: #eef3fb;
	text-shadow: 0 0 10px rgba(8, 11, 18, .95), 0 0 3px rgba(8, 11, 18, 1);
	letter-spacing: .02em;
}

/* out-of-focus specks in the background, decorative only */
.afs3d-bokeh { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.afs3d-bokeh i {
	position: absolute;
	border-radius: 50%;
	background: currentColor;
	filter: blur(6px);
	animation: afs-drift 26s ease-in-out infinite alternate;
}
@keyframes afs-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(14px, -18px, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.afs3d-bokeh i { animation: none; }
}

.afs3d[data-style="nebula"] .afs3d-panel {
	background: rgba(12, 16, 25, .92);
	border-color: rgba(150, 180, 220, .22);
	color: #e8eef7;
	backdrop-filter: blur(9px);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

.afs3d[data-style="nebula"] .afs3d-hud button,
.afs3d[data-style="nebula"] .afs3d-find input,
.afs3d[data-style="nebula"] .afs3d-neighbours button {
	background: rgba(14, 19, 30, .8);
	border-color: rgba(150, 180, 220, .26);
	color: #dfe7f2;
}

.afs3d[data-style="nebula"] .afs3d-legend,
.afs3d[data-style="nebula"] .afs3d-status { color: #cdd8e8; }

.afs3d-body p { margin: 0 0 .85em; }
.afs3d-body p:last-child { margin-bottom: 0; }

.afs3d-hud button[data-act="lang"] {
	min-width: 3.4em;
	letter-spacing: .08em;
}