/**
 * LoveMsgs Core - Love Messages Wheel styling.
 *
 * Scoped entirely under .lm-wheel-wrapper so this plugin never leaks
 * styles onto the rest of a page it's dropped into (homepage today,
 * /love-clarity-wheel/ in Step 10). Built on the shared tokens in core.css.
 *
 * Canvas colors intentionally mirror the confirmed values baked into
 * wheel.js's drawWheel() (sky gradient #4a1d3e -> #2a0f28 -> #1a0b17,
 * segment-line/label color rgba(233,200,148,*) / #e9c894) so the CSS chrome
 * around the canvas doesn't visually clash with what the canvas itself
 * paints.
 */

.lm-wheel-wrapper,
.lm-wheel-wrapper *,
.lm-wheel-wrapper *::before,
.lm-wheel-wrapper *::after {
	box-sizing: border-box;
}

.lm-wheel-wrapper {
	--lm-wheel-canvas-size: min(320px, 80vw);
	max-width: 640px;
	margin: 0 auto;
	padding: var(--lm-space-lg) var(--lm-space-md);
	font-family: var(--lm-font-body);
	color: var(--lm-text-on-dark);
	text-align: center;
}

/* ---- Gate step ---- */

.lm-gate {
	display: flex;
	flex-direction: column;
	gap: var(--lm-space-sm);
	max-width: 460px;
	margin: 0 auto var(--lm-space-lg);
}

.lm-gate-label {
	font-family: var(--lm-font-display);
	font-size: 1.5rem;
	color: var(--lm-text-heading-on-dark);
}

.lm-gate-select,
.lm-gate-text {
	width: 100%;
	padding: 0.85em 1em;
	border-radius: 8px;
	border: 1px solid var(--lm-border-subtle);
	background: rgba(255, 255, 255, 0.04);
	color: var(--lm-text-on-dark);
	font-family: var(--lm-font-body);
	font-size: 1rem;
}

.lm-gate-text {
	min-height: 4.5em;
	resize: vertical;
}

.lm-gate-hint {
	font-size: 0.85rem;
	opacity: 0.75;
}

.lm-gate-submit,
.lm-spin-trigger,
.lm-form-submit,
.lm-spin-again {
	font-family: var(--lm-font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.85rem;
	padding: 0.9em 1.75em;
	border-radius: 999px;
	border: 1px solid var(--lm-accent);
	background: transparent;
	color: var(--lm-accent);
	cursor: pointer;
	transition: background var(--lm-duration-standard) var(--lm-ease-standard),
		color var(--lm-duration-standard) var(--lm-ease-standard);
}

.lm-gate-submit:hover:not(:disabled),
.lm-spin-trigger:hover:not([aria-disabled='true']),
.lm-form-submit:hover:not(:disabled),
.lm-spin-again:hover {
	background: var(--lm-accent);
	color: var(--lm-color-deep-night);
}

.lm-gate-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.lm-wheel-notice {
	min-height: 1.5em;
	font-size: 0.9rem;
	color: var(--lm-accent-soft);
	opacity: 0;
	transition: opacity var(--lm-duration-standard) var(--lm-ease-standard);
}

.lm-wheel-notice.visible {
	opacity: 1;
}

/* ---- Wheel stage ---- */

.lm-wheel-stage {
	position: relative;
	/* 0.5.0: a rotated square canvas has a larger bounding box than the
	   visible circle; clip it horizontally so a turning wheel can never
	   create sideways scroll on narrow phones. */
	overflow-x: clip;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lm-space-md);
	margin-bottom: var(--lm-space-lg);
}

/* Locked state: dim the wheel and disable pointer interaction on the spin
   trigger until a gate choice has been made. Mirrors the wheel-locked
   class toggled by wheel.js. */
.lm-wheel-wrapper.wheel-locked .lm-wheel-stage {
	opacity: 0.45;
	pointer-events: none;
}

#wheel-canvas {
	width: var(--lm-wheel-canvas-size);
	height: var(--lm-wheel-canvas-size);
	border-radius: 50%;
	transition: transform 4200ms cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
	#wheel-canvas {
		transition-duration: 0.001ms;
	}
}

/* ---- Result card ---- */

.lm-result-card {
	max-width: 560px;
	margin: 0 auto;
	padding: var(--lm-space-lg);
	border-radius: 16px;
	background: var(--lm-bg-surface);
	border: 1px solid var(--lm-border-subtle);
	text-align: left;
	opacity: 0;
	transition: opacity var(--lm-duration-standard) var(--lm-ease-standard);
}

.lm-res-user-question {
	font-family: var(--lm-font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	opacity: 0.7;
}

.lm-res-category {
	font-family: var(--lm-font-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--lm-accent-soft);
	margin-bottom: 0.25em;
}

.lm-res-title {
	font-family: var(--lm-font-display);
	font-size: 1.75rem;
	color: var(--lm-text-heading-on-dark);
	margin: 0.2em 0 0.6em;
}

.lm-res-message,
.lm-res-prompt,
.lm-res-grounding,
.lm-res-next {
	margin: 0 0 1em;
	line-height: 1.6;
}

.lm-res-prompt {
	font-style: italic;
}

.lm-res-crystal {
	font-size: 0.85rem;
	opacity: 0.75;
}

/* ---- Unspoken Letters invite / Kit form ---- */

.lm-letters-invite {
	margin-top: var(--lm-space-lg);
	padding-top: var(--lm-space-md);
	border-top: 1px solid var(--lm-border-subtle);
}

.lm-letters-invite h4 {
	font-family: var(--lm-font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	color: var(--lm-accent);
}

.lm-email-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lm-space-xs);
	margin: var(--lm-space-sm) 0;
}

/* 0.5.0: #lm-email-input is now styled by .lm-kit-email (sanctuary.css). */

.lm-signup-disclaimer,
.lm-email-confirm-msg {
	font-size: 0.8rem;
	opacity: 0.7;
}

.lm-spin-again {
	margin-top: var(--lm-space-md);
}

/* ---- Disclaimer ---- */

.lm-wheel-disclaimer {
	max-width: 560px;
	margin: var(--lm-space-lg) auto 0;
	font-size: 0.8rem;
	line-height: 1.6;
	opacity: 0.65;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

/* ---- 0.5.0 additions (V4.4 result structure + accessibility) ---- */

.lm-visually-hidden {
	position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
	margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
}

.lm-gate-text-label {
	font-size: 0.85rem;
	text-align: left;
	color: #d4bbc7;
	margin-bottom: -0.5rem;
}

.lm-spin-trigger:disabled,
.lm-spin-trigger[aria-disabled='true'] {
	opacity: 0.55;
	cursor: not-allowed;
}

.lm-res-title:focus { outline: none; }
.lm-res-title:focus-visible { box-shadow: var(--lm-focus-ring); border-radius: 6px; }

.lm-res-section { margin: 0 0 1.1em; }
.lm-res-section p { margin: 0; }
.lm-res-label {
	font-family: var(--lm-font-mono);
	font-weight: 400;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lm-accent);
	margin: 0 0 0.35em;
}
.lm-res-label::before { content: '✦ '; }
.lm-res-section--question .lm-res-user-question { font-family: var(--lm-font-body); font-style: italic; font-size: 0.95rem; opacity: 0.85; letter-spacing: 0; }
.lm-res-section--crystal { padding: 0.9em 1em; border-radius: 12px; background: rgba(233, 200, 148, 0.07); border: 1px solid var(--lm-border-subtle); }
.lm-res-section--crystal .lm-res-crystal { font-size: 0.9rem; opacity: 0.9; }
.lm-res-actions { margin: 0.5em 0 0; }
.lm-res-actions a,
.lm-wheel-disclaimer a { color: var(--lm-accent); text-decoration: underline; text-underline-offset: 3px; }

.lm-letters-invite-title {
	font-family: var(--lm-font-display);
	font-weight: 500;
	font-size: 1.45rem;
	color: var(--lm-text-heading-on-dark);
	margin: 0 0 0.3em;
}
.lm-letters-invite > p { margin: 0 0 1em; line-height: 1.55; opacity: 0.85; }
.lm-letters-invite .lm-kit { max-width: none; }