/**
 * Loupely Toy Kit - shared runtime styles.
 *
 * The caret for self-writing text and the hint halo. Every motion sits inside a
 * no-preference media query, so a reduced-motion visitor gets the steady look
 * with nothing moving. Classes carry the lc- prefix and are applied only to
 * elements a toy opts in, so they cannot reach the rest of a page.
 */

.lc-caret {
	display: inline-block;
	width: 2px;
	height: 1em;
	margin-left: 1px;
	background: currentColor;
	vertical-align: text-bottom;
	opacity: 0.85;
}

.lc-caret-rest {
	opacity: 0.4;
}

.lc-halo {
	position: relative;
	border-radius: 5px;
	box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	outline: 1px solid rgba(255, 255, 255, 0.001);
}

.lc-halo::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: 0 0 0 2px rgba(120, 120, 120, 0.28), 0 0 14px 2px rgba(120, 120, 120, 0.22);
	opacity: 0.9;
}

@media (prefers-reduced-motion: no-preference) {
	.lc-halo-bob {
		animation: lcBob 2.8s ease-in-out infinite;
	}
	.lc-halo-radiate::after {
		animation: lcRadiate 2s ease-out infinite;
	}
	.lc-halo-pulse::after {
		animation: lcPulse 2s ease-in-out infinite;
	}

	@keyframes lcBob {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-4px); }
	}

	@keyframes lcRadiate {
		0% { transform: scale(1); opacity: 0.6; }
		100% { transform: scale(1.28); opacity: 0; }
	}

	@keyframes lcPulse {
		0%, 100% { opacity: 0.55; }
		50% { opacity: 1; }
	}

	.lc-splat {
		animation: lcSplat 0.7s ease-out forwards;
	}

	@keyframes lcSplat {
		0% { transform: scale(0.4); opacity: 0; }
		60% { transform: scale(1.08); opacity: 0.95; }
		100% { transform: scale(1); opacity: 0.82; }
	}

	.lc-undercut {
		animation: lcDraw 0.45s ease-out forwards;
	}

	@keyframes lcDraw {
		0% { transform: rotate(-1.5deg) scaleX(0); }
		100% { transform: rotate(-1.5deg) scaleX(1); }
	}

	.lc-static {
		animation: lcFlickerIn 0.3s ease-out forwards;
	}

	@keyframes lcFlickerIn {
		0% { opacity: 0; }
		100% { opacity: inherit; }
	}

	.lc-redaction {
		animation: lcWipe 0.35s ease-out forwards;
	}

	@keyframes lcWipe {
		0% { transform: scaleX(0); }
		100% { transform: scaleX(1); }
	}
}

.lc-ink-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: visible;
}

.lc-beam-tilt {
	transition: transform .5s cubic-bezier(0.34, 1.10, 0.64, 1);
	will-change: transform;
}

.lc-splat {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0.82;
}

.lc-undercut {
	position: absolute;
	height: 2px;
	pointer-events: none;
	transform: rotate(-1.5deg);
	transform-origin: left center;
	border-radius: 1px;
}

.lc-static {
	position: absolute;
	pointer-events: none;
	font-family: monospace;
	line-height: 1;
}

.lc-ring {
	position: absolute;
	pointer-events: none;
	line-height: 1;
	font-weight: 700;
}

.lc-redaction {
	position: absolute;
	pointer-events: none;
	background: #11161d;
	color: rgba(255, 255, 255, 0.45);
	transform-origin: left center;
	font-size: 8px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 1px;
}

/* Toy controls: tokenized, inherit the page's color, override with --lc-ctl-accent */
.lc-ctl {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font: inherit;
	font-size: 0.85em;
	color: var(--lc-ctl-accent, currentColor);
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 5px;
	padding: 0.35em 0.9em;
	cursor: pointer;
	line-height: 1;
	opacity: 0.78;
}

.lc-ctl:hover,
.lc-ctl:focus-visible {
	opacity: 1;
}

.lc-ctl-icon {
	display: inline-flex;
	width: 1.1em;
	height: 1.1em;
}

.lc-ctl-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.lc-sound-toggle[aria-pressed="true"] {
	opacity: 1;
}

/* Guide figure and the character demo placement */
.lc-tk-figure { width: var(--lc-fig-w, 160px); max-width: 100%; margin: 0 auto; }
.lc-tk-figure svg { width: 100%; height: auto; display: block; }
.lc-tk-guide { max-width: 640px; margin: 0 auto; text-align: center; }
.lc-tk-guide-name { font-family: Georgia, 'Times New Roman', serif; font-size: 28px; margin: 0 0 4px; }
.lc-tk-guide-what { color: #4A5A76; margin: 0 auto 16px; max-width: 46ch; }
.lc-tk-guide-zoom { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: 13px; color: #4A5A76; }
.lc-tk-guide-line { font-size: 22px; line-height: 1.6; min-height: 1.8em; text-align: center; margin: 12px auto 0; max-width: 42ch; }
.lc-tk-guide-moods { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.lc-tk-guide-moods button {
	border: 1px solid var(--lc-ctl-accent, #1A2C5A);
	background: #fff;
	color: var(--lc-ctl-accent, #1A2C5A);
	border-radius: 5px;
	padding: 6px 12px;
	cursor: pointer;
	font: inherit;
}
.lc-tk-guide-moods button:hover { background: var(--lc-ctl-accent, #1A2C5A); color: #fff; }

/* Floating guide: one per page, mounted by the runtime from character data.
   Position and the move transition sit on the container; the float and the
   emotion pose sit on the inner figure body, so the two never fight over the
   transform. Static placement sits outside the reduced-motion query; only the
   move transition and the resting float sit inside it. */
.lc-tk-guide {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 172px;
	max-width: 60vw;
	z-index: 2147483000;
	pointer-events: none;
}

.lc-tk-guide .lc-tk-figure {
	width: var(--lc-fig-w, 120px);
	margin-left: auto;
	pointer-events: auto;
	cursor: default;
}

.lc-tk-guide .lc-tk-figbody svg {
	width: 100%;
	height: auto;
	display: block;
	overflow: visible;
}

.lc-tk-guide-bubble {
	position: relative;
	box-sizing: border-box;
	/* Desktop: own width (not the 172px guide box). Grow toward the toy so a
	   wider bubble stays right-aligned with the figure. */
	width: min(32vw, 320px);
	max-width: calc(100vw - 48px);
	left: calc(100% - min(32vw, 320px));
	background: #FBF6EA;
	border: 1px solid #C8BAA8;
	border-radius: 5px;
	padding: 12px 28px 12px 14px;
	margin-bottom: 9px;
	min-height: 1.2em;
	box-shadow: 2px 3px 9px rgba(0, 0, 0, 0.13);
	pointer-events: auto;
}

.lc-tk-guide-bubble[hidden] {
	display: none;
}

.lc-tk-guide-bubble::after {
	content: "";
	position: absolute;
	bottom: -9px;
	right: 30px;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 9px solid #C8BAA8;
}

.lc-tk-guide-bubble::before {
	content: "";
	position: absolute;
	bottom: -7px;
	right: 31px;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-top: 8px solid #FBF6EA;
	z-index: 1;
}

.lc-tk-guide-line {
	font-family: 'Special Elite', 'Courier New', monospace;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	margin: 0;
	color: #2A2018;
}

.lc-tk-guide-x {
	position: absolute;
	top: 4px;
	right: 7px;
	border: 0;
	background: none;
	color: #9A8F7A;
	font-family: 'Special Elite', monospace;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}

.lc-tk-guide-x:hover,
.lc-tk-guide-x:focus-visible {
	color: #1A2C5A;
}

/* Citation tab: zero resting footprint; 22x16 visible, 44x44 hit via ::before. */
.lc-tk-guide-cite-tab {
	position: absolute;
	right: -9px;
	bottom: 10px;
	width: 22px;
	height: 16px;
	background: #3D2C1D;
	border-radius: 0 3px 3px 0;
	border: none;
	padding: 0;
	cursor: pointer;
	z-index: 2;
}

.lc-tk-guide-cite-tab[hidden] {
	display: none;
}

.lc-tk-guide-cite-tab::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.lc-tk-guide-cite-tab::after {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #9A7A28;
	transform: translate(-50%, -50%);
}

.lc-tk-guide-cite-card {
	margin-top: 6px;
	margin-left: 14px;
	margin-bottom: 6px;
	background: #3D2C1D;
	border-radius: 3px;
	padding: 5px 9px;
	max-width: min(70vw, 220px);
	font-family: 'Libre Baskerville', Georgia, serif;
	font-style: italic;
	font-size: 11px;
	line-height: 1.4;
	color: #EDE5D4;
	pointer-events: none;
}

.lc-tk-guide-cite-card[hidden] {
	display: none;
}

/* Sent away: tucked off the bottom of the viewport, no longer interactive.
   This is the resting hidden pose and sits outside the motion query so a
   reduced-motion visitor still gets a guide that simply appears and leaves. */
.lc-tk-guide.away {
	transform: translateY(185%);
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.lc-tk-guide {
		/* Position locks are set once; do not ease left/top/bottom or a
		   growing bubble looks like Wren is sliding down the page. */
		transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1),
			opacity 0.8s ease;
	}

	.lc-tk-guide-float {
		animation: lcGuideFloat 3.2s ease-in-out infinite;
	}

	@keyframes lcGuideFloat {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-5px); }
	}
}

@media (max-width: 560px) {
	.lc-tk-guide { width: 150px; right: 14px; bottom: 14px; }
	/* Mobile: wider text column without widening the guide/figure box. */
	.lc-tk-guide-bubble {
		width: min(78vw, 260px);
		max-width: calc(100vw - 28px);
		left: calc(100% - min(78vw, 260px));
	}
}

/* Shared diagnostics panel (admin viewer only; markup created in JS). */
#lc-tk-diag-tab {
	position: fixed;
	right: 12px;
	bottom: 12px;
	z-index: 99990;
	padding: 8px 12px;
	border: 1px solid #3d3d3d;
	border-radius: 2px 2px 0 0;
	background: #1e1e1e;
	color: #f0f0f0;
	font: 12px/1.2 Menlo, Consolas, monospace;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

#lc-tk-diag-tab.is-open {
	bottom: auto;
	top: 48px;
}

#lc-tk-diag-panel {
	position: fixed;
	right: 12px;
	bottom: 48px;
	top: 48px;
	width: min(420px, calc(100vw - 24px));
	z-index: 99989;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	border: 1px solid #3d3d3d;
	background: #121212;
	color: #e8e8e8;
	font: 12px/1.4 Menlo, Consolas, monospace;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

#lc-tk-diag-panel[hidden] {
	display: none !important;
}

#lc-tk-diag-panel .lc-tk-diag-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

#lc-tk-diag-panel .lc-tk-diag-head strong {
	flex: 1 1 auto;
	font-size: 13px;
}

#lc-tk-diag-panel select,
#lc-tk-diag-panel button {
	font: inherit;
	color: #f0f0f0;
	background: #2a2a2a;
	border: 1px solid #555;
	padding: 6px 8px;
	cursor: pointer;
}

#lc-tk-diag-panel button.is-on {
	outline: 1px solid #8ec8ff;
	background: #243044;
}

#lc-tk-diag-panel .lc-tk-diag-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

#lc-tk-diag-panel .lc-tk-diag-state {
	color: #b7d4ff;
}

#lc-tk-diag-log {
	flex: 1 1 auto;
	margin: 0;
	padding: 8px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
	background: #0a0a0a;
	border: 1px solid #333;
	min-height: 120px;
}

#lc-tk-diag-panel .lc-tk-diag-note {
	margin: 0;
	color: #9a9a9a;
	font-size: 11px;
}

.lc-tk-diag-nojs-banner {
	margin: 0 0 8px;
	padding: 8px 10px;
	background: #fff3cd;
	color: #3b2f00;
	border: 1px solid #e0c35a;
	font: 13px/1.3 Fraunces, Georgia, serif;
}

.lc-tk-diag-nojs-preview {
	outline: 2px dashed #e0c35a;
}