/*
 * The Love Bridge: frontend styles. Design tokens live on the plugin roots only (the bridge, a
 * story page, the list), never globally.
 */

.lb-root,
.lb-story,
.lb-list {
	/* Colour tokens */
	--lb-midnight-900: #0b1426;
	--lb-midnight-800: #111d36;
	--lb-midnight-700: #1b2a4a;
	--lb-teal-500: #1f6f78;
	--lb-turquoise-400: #4fb3b8;
	--lb-gold-400: #e9c27a;
	--lb-brass-500: #b8894a;
	--lb-ivory-100: #f6f0e4;
	--lb-ivory-300: #d9d0bf;
	--lb-panel-bg: rgba(17, 29, 54, 0.72);
	--lb-panel-border: rgba(233, 194, 122, 0.22);
	--lb-focus: #f3d79b;

	/* Type */
	--lb-font-display: "Love Bridge Display", Georgia, "Times New Roman", serif;
	--lb-font-ui: "Love Bridge UI", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Spacing scale (4/8 px) and radii */
	--lb-space-1: 4px;
	--lb-space-2: 8px;
	--lb-space-3: 12px;
	--lb-space-4: 16px;
	--lb-space-6: 24px;
	--lb-space-8: 32px;
	--lb-radius-sm: 0px;
	--lb-radius-md: 0px;
	--lb-radius-lg: 0px;
}

.lb-root {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: 420px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--lb-radius-md);
	background:
		radial-gradient(120% 80% at 50% 100%, rgba(31, 111, 120, 0.45) 0%, transparent 60%),
		linear-gradient(180deg, var(--lb-midnight-700) 0%, var(--lb-midnight-900) 100%);
	color: var(--lb-ivory-100);
	font-family: var(--lb-font-ui);
	font-size: 16px;
	line-height: 1.5;
}

.lb-root *,
.lb-root *::before,
.lb-root *::after {
	box-sizing: inherit;
}

@media (max-width: 600px) {
	.lb-root {
		aspect-ratio: auto;
		min-height: 100vh;
		border-radius: 0;
	}
}

.lb-stage {
	position: absolute;
	inset: 0;
}

/* Loading / status */
.lb-status {
	position: absolute;
	inset: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--lb-space-4);
	padding: var(--lb-space-6);
	text-align: center;
	pointer-events: none;
}

.lb-root[data-lb-state="loading"] .lb-status,
.lb-root[data-lb-state="context-lost"] .lb-status,
.lb-root[data-lb-state="error"] .lb-status {
	display: flex;
}

.lb-root[data-lb-state="context-lost"] .lb-status {
	background: rgba(11, 20, 38, 0.55);
}

.lb-status__text {
	margin: 0;
	font-family: var(--lb-font-display);
	font-size: 1.125rem;
	letter-spacing: 0.02em;
	color: var(--lb-ivory-300);
}

.lb-status__glow {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--lb-gold-400);
	box-shadow: 0 0 18px 6px rgba(233, 194, 122, 0.45);
	animation: lb-lantern 2.4s ease-in-out infinite;
}

.lb-root[data-lb-state="error"] .lb-status__glow {
	animation: none;
	opacity: 0.5;
}

@keyframes lb-lantern {
	0%, 100% { opacity: 0.55; transform: scale(0.9); }
	50% { opacity: 1; transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
	.lb-status__glow {
		animation: none;
	}
}

/* Scene canvas */
.lb-canvas {
	display: block;
	width: 100%;
	height: 100%;
	outline: none;
}

.lb-canvas:focus-visible {
	outline: 2px solid var(--lb-focus);
	outline-offset: -4px;
}

/* In-scene controls */
.lb-controls {
	position: absolute;
	top: var(--lb-space-3);
	right: var(--lb-space-3);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--lb-space-2);
	max-width: calc(100% - var(--lb-space-6));
	padding: var(--lb-space-1) var(--lb-space-2);
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-lg);
	background: var(--lb-panel-bg);
	font-size: 0.875rem;
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
	.lb-controls {
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}

.lb-root:not([data-lb-state="ready"]) .lb-controls {
	display: none;
}

.lb-button,
.lb-select {
	min-height: 32px;
	padding: var(--lb-space-1) var(--lb-space-3);
	border: 1px solid transparent;
	border-radius: var(--lb-radius-md);
	background: transparent;
	color: var(--lb-ivory-100);
	font: inherit;
	line-height: 1.2;
	cursor: pointer;
}

.lb-select {
	border-color: var(--lb-panel-border);
	background: rgba(11, 20, 38, 0.6);
}

.lb-button:hover {
	border-color: var(--lb-panel-border);
	color: var(--lb-gold-400);
}

.lb-button[aria-pressed="false"] {
	color: var(--lb-ivory-300);
}

.lb-button:focus-visible,
.lb-select:focus-visible {
	outline: 2px solid var(--lb-focus);
	outline-offset: 1px;
}

.lb-controls__quality {
	display: inline-flex;
	align-items: center;
	gap: var(--lb-space-2);
	color: var(--lb-ivory-300);
}

/* Customize panel (admins only): side drawer on desktop, bottom sheet on phones */
.lb-customize {
	position: absolute;
	top: 64px;
	right: var(--lb-space-3);
	bottom: var(--lb-space-3);
	z-index: 3;
	display: flex;
	flex-direction: column;
	width: min(360px, calc(100% - var(--lb-space-6)));
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-md);
	background: rgba(11, 20, 38, 0.88);
	font-size: 0.875rem;
	color: var(--lb-ivory-100);
}

.lb-customize[hidden] {
	display: none;
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
	.lb-customize {
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
}

.lb-customize__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lb-space-2);
	padding: var(--lb-space-3) var(--lb-space-4) 0;
}

.lb-customize__title {
	margin: 0;
	font-family: var(--lb-font-display);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.3;
	color: var(--lb-ivory-100);
}

.lb-customize__title:focus {
	outline: none;
}

.lb-customize__note {
	margin: var(--lb-space-1) var(--lb-space-4) var(--lb-space-2);
	color: var(--lb-gold-400);
	font-size: 0.8125rem;
}

.lb-customize__body {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	padding: 0 var(--lb-space-4) var(--lb-space-3);
	overscroll-behavior: contain;
}

.lb-customize__group {
	padding: var(--lb-space-2) 0;
	border-top: 1px solid var(--lb-panel-border);
}

.lb-customize__group-title {
	margin: 0 0 var(--lb-space-2);
	font-weight: 600;
	color: var(--lb-ivory-100);
	cursor: pointer;
}

.lb-customize__editing {
	padding: var(--lb-space-3);
	margin: var(--lb-space-1) 0 var(--lb-space-2);
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-sm);
	background: rgba(233, 194, 122, 0.08);
}

.lb-customize__editing .lb-select {
	width: 100%;
	margin-top: var(--lb-space-1);
}

.lb-customize__style-line {
	display: flex;
	gap: var(--lb-space-2);
	align-items: center;
}

.lb-customize__style-line .lb-select {
	flex: 1 1 auto;
	min-width: 0;
}

.lb-customize__field {
	margin: var(--lb-space-2) 0 var(--lb-space-3);
}

.lb-customize__field-head {
	display: flex;
	justify-content: space-between;
	gap: var(--lb-space-2);
	margin-bottom: var(--lb-space-1);
}

.lb-customize__label {
	color: var(--lb-ivory-100);
}

.lb-customize__value {
	color: var(--lb-gold-400);
	font-variant-numeric: tabular-nums;
}

.lb-customize__range {
	width: 100%;
	accent-color: var(--lb-gold-400);
}

.lb-customize__color {
	width: 64px;
	height: 32px;
	padding: 2px;
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-sm);
	background: rgba(11, 20, 38, 0.6);
	cursor: pointer;
}

.lb-customize__field .lb-select {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	text-overflow: ellipsis;
}

.lb-customize__switch {
	display: inline-flex;
	align-items: center;
	gap: var(--lb-space-2);
	color: var(--lb-ivory-300);
}

.lb-customize__check {
	width: 18px;
	height: 18px;
	accent-color: var(--lb-gold-400);
}

.lb-customize__help {
	margin: var(--lb-space-1) 0 0;
	color: var(--lb-ivory-300);
	font-size: 0.75rem;
	line-height: 1.4;
}

.lb-customize__hint {
	color: var(--lb-gold-400);
}

.lb-customize__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--lb-space-2);
	padding: var(--lb-space-3) var(--lb-space-4);
	border-top: 1px solid var(--lb-panel-border);
}

.lb-customize__status {
	flex: 1 1 10rem;
	margin: 0;
	color: var(--lb-ivory-300);
	font-size: 0.8125rem;
}

.lb-customize__actions {
	display: flex;
	gap: var(--lb-space-2);
}

.lb-button--primary {
	border-color: var(--lb-gold-400);
	background: var(--lb-gold-400);
	color: #1b1408;
	font-weight: 600;
}

.lb-button--primary:hover {
	background: var(--lb-ivory-100);
	color: #1b1408;
}

.lb-button--quiet {
	border-color: var(--lb-panel-border);
}

.lb-button:disabled,
.lb-button:disabled:hover {
	opacity: 0.45;
	cursor: default;
	border-color: transparent;
	background: transparent;
	color: var(--lb-ivory-300);
}

.lb-customize__close:focus-visible,
.lb-customize input:focus-visible,
.lb-customize summary:focus-visible {
	outline: 2px solid var(--lb-focus);
	outline-offset: 2px;
}

.lb-button--customize[aria-expanded="true"] {
	border-color: var(--lb-gold-400);
	color: var(--lb-gold-400);
}

@media (max-width: 600px) {
	.lb-customize {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: 60%;
		border-radius: var(--lb-radius-md) var(--lb-radius-md) 0 0;
	}
}

/* Admin-only notes inside the scene */
.lb-preview-note {
	position: absolute;
	top: var(--lb-space-3);
	left: 50%;
	margin: 0;
	padding: var(--lb-space-1) var(--lb-space-3);
	transform: translateX(-50%);
	border-radius: var(--lb-radius-lg);
	background: rgba(184, 137, 74, 0.92);
	color: #1b1408;
	font-size: 0.8125rem;
	font-weight: 600;
	pointer-events: none;
}

.lb-debug {
	position: absolute;
	top: var(--lb-space-3);
	left: var(--lb-space-3);
	margin: 0;
	padding: var(--lb-space-2) var(--lb-space-3);
	border-radius: var(--lb-radius-sm);
	background: rgba(0, 0, 0, 0.62);
	color: #d9f2e4;
	font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	pointer-events: none;
	white-space: pre;
}

/* Fallback (no WebGL, or no JavaScript): the explanation, then the list of locks */
.lb-fallback {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--lb-space-4);
	padding: var(--lb-space-6);
	overflow: auto;
}

.lb-fallback > .lb-list {
	width: 100%;
	max-width: 40rem;
	padding: var(--lb-space-4) var(--lb-space-6);
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-lg);
	background: var(--lb-panel-bg);
}

.lb-fallback[hidden] {
	display: none;
}

.lb-fallback__inner {
	max-width: 34rem;
	padding: var(--lb-space-6);
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-lg);
	background: var(--lb-panel-bg);
	text-align: center;
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
	.lb-fallback__inner {
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}

.lb-fallback__art {
	display: block;
	width: 100%;
	max-width: 320px;
	height: auto;
	margin: 0 auto var(--lb-space-4);
	border-radius: var(--lb-radius-sm);
}

.lb-fallback__title {
	margin: 0 0 var(--lb-space-2);
	font-family: var(--lb-font-display);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--lb-ivory-100);
}

.lb-fallback__text {
	margin: 0 0 var(--lb-space-2);
	color: var(--lb-ivory-300);
}

/* Footer links */
.lb-footer {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--lb-space-2) var(--lb-space-4);
	padding: var(--lb-space-2) var(--lb-space-4);
	font-size: 0.875rem;
	/* background: linear-gradient(0deg, rgba(11, 20, 38, 0.75), transparent); */
}

.lb-footer__account,
.lb-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-4);
}

.lb-link {
	color: var(--lb-gold-400);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.lb-link:hover {
	color: var(--lb-ivory-100);
}

.lb-link:focus-visible {
	outline: 2px solid var(--lb-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

/* Admin-only note for a second [love_bridge] on one page */
.lb-admin-notice {
	margin: 1em 0;
	padding: 12px 16px;
	border-left: 4px solid #b8894a;
	background: #fff8e6;
	color: #3c2f1a;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 14px;
}

/* ------------------------------------------------------------------ Stage 3: locks */

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

.lb-stage--pointer .lb-canvas {
	cursor: pointer;
}

/* Keyboard locks region: sits over the scene, never takes pointer input. */
.lb-locknav {
	position: absolute;
	inset: 0;
	pointer-events: none;
	outline: none;
}

.lb-locknav:focus-visible {
	box-shadow: inset 0 0 0 2px var(--lb-focus);
}

.lb-root:not([data-lb-state="ready"]) .lb-locknav {
	display: none;
}

/* Hover tooltip: the inscription. */
.lb-tooltip {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	max-width: 18rem;
	padding: var(--lb-space-1) var(--lb-space-3);
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-sm);
	background: rgba(11, 20, 38, 0.88);
	color: var(--lb-ivory-100);
	font-family: var(--lb-font-display);
	font-size: 1rem;
	line-height: 1.3;
	white-space: nowrap;
	pointer-events: none;
	unicode-bidi: isolate;
}

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

/* Short messages over the scene. */
.lb-notice {
	position: absolute;
	top: 64px;
	left: 50%;
	z-index: 4;
	max-width: calc(100% - var(--lb-space-6));
	margin: 0;
	padding: var(--lb-space-2) var(--lb-space-4);
	transform: translateX(-50%);
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-md);
	background: rgba(11, 20, 38, 0.9);
	color: var(--lb-ivory-100);
	font-size: 0.875rem;
	text-align: center;
}

.lb-notice[hidden] {
	display: none;
}

.lb-button--discover {
	border-color: var(--lb-panel-border);
	color: var(--lb-gold-400);
}

/* The sheet: story panel and discovery. Side panel on desktop, bottom sheet on phones. */
.lb-sheet {
	position: absolute;
	top: 64px;
	right: var(--lb-space-3);
	bottom: var(--lb-space-3);
	z-index: 3;
	display: flex;
	flex-direction: column;
	width: min(380px, calc(100% - var(--lb-space-6)));
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-md);
	background: rgba(11, 20, 38, 0.9);
	color: var(--lb-ivory-100);
	font-size: 0.9375rem;
}

.lb-sheet[hidden] {
	display: none;
}

@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
	.lb-sheet {
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
}

.lb-sheet__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--lb-space-2);
	padding: var(--lb-space-3) var(--lb-space-4) var(--lb-space-2);
	border-bottom: 1px solid var(--lb-panel-border);
}

.lb-sheet__back {
	flex: 0 0 100%;
	align-self: flex-start;
	padding-left: 0;
	color: var(--lb-gold-400);
	text-align: left;
}

.lb-sheet__back[hidden] {
	display: none;
}

.lb-sheet__title {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	font-family: var(--lb-font-display);
	font-size: 1.625rem;
	font-weight: 400;
	line-height: 1.2;
	overflow-wrap: anywhere;
	color: var(--lb-ivory-100);
	unicode-bidi: isolate;
}

.lb-sheet[data-lb-view="discover"] .lb-sheet__title {
	font-size: 1.25rem;
}

.lb-sheet__title:focus {
	outline: none;
}

.lb-sheet__close {
	flex: 0 0 auto;
	min-width: 36px;
	font-size: 1.375rem;
	line-height: 1;
}

.lb-sheet__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: var(--lb-space-3) var(--lb-space-4) var(--lb-space-4);
	overscroll-behavior: contain;
}

.lb-sheet__status {
	margin: var(--lb-space-2) 0;
	color: var(--lb-ivory-300);
}

.lb-sheet__status[hidden] {
	display: none;
}

.lb-sheet a:focus-visible,
.lb-sheet button:focus-visible,
.lb-sheet input:focus-visible,
.lb-sheet select:focus-visible,
.lb-sheet summary:focus-visible {
	outline: 2px solid var(--lb-focus);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.lb-sheet {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: 60%;
		border-radius: var(--lb-radius-md) var(--lb-radius-md) 0 0;
	}
}

/* Story panel content */
.lb-story-meta,
.lb-story-where {
	margin: 0 0 var(--lb-space-1);
	color: var(--lb-ivory-300);
	font-size: 0.875rem;
}

.lb-story-where {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-1) var(--lb-space-3);
	margin-bottom: var(--lb-space-3);
}

.lb-story-where__id {
	color: var(--lb-gold-400);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.04em;
}

.lb-story-private {
	margin: var(--lb-space-3) 0 0;
	padding: var(--lb-space-3);
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-sm);
	background: rgba(233, 194, 122, 0.08);
	color: var(--lb-ivory-100);
}

.lb-story-photo {
	margin: 0 0 var(--lb-space-3);
}

.lb-story-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lb-radius-sm);
}

.lb-story-text {
	unicode-bidi: isolate;
	overflow-wrap: anywhere;
}

.lb-story-text p {
	margin: 0 0 var(--lb-space-3);
}

.lb-story-long {
	margin: 0 0 var(--lb-space-3);
}

.lb-story-long summary {
	margin-bottom: var(--lb-space-2);
	color: var(--lb-gold-400);
	cursor: pointer;
}

.lb-story-link {
	margin: 0 0 var(--lb-space-3);
	overflow-wrap: anywhere;
}

.lb-story-link a {
	unicode-bidi: isolate;
}

.lb-story-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-2);
	margin-top: var(--lb-space-4);
}

.lb-story-actions .lb-button {
	text-decoration: none;
}

.lb-story-share-status {
	min-height: 1.5em;
	margin: var(--lb-space-2) 0 0;
	color: var(--lb-ivory-300);
	font-size: 0.875rem;
}

/* Discovery */
.lb-discover__label {
	display: block;
	margin-bottom: var(--lb-space-1);
	color: var(--lb-ivory-300);
	font-size: 0.875rem;
}

.lb-discover__row {
	display: flex;
	gap: var(--lb-space-2);
}

.lb-discover__input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 36px;
	padding: var(--lb-space-1) var(--lb-space-3);
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-sm);
	background: rgba(11, 20, 38, 0.6);
	color: var(--lb-ivory-100);
	font: inherit;
}

.lb-discover__tabs {
	display: flex;
	gap: var(--lb-space-1);
	margin: var(--lb-space-4) 0 var(--lb-space-3);
	border-bottom: 1px solid var(--lb-panel-border);
}

.lb-discover__tab {
	padding: var(--lb-space-2) var(--lb-space-3);
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--lb-ivory-300);
	font: inherit;
	cursor: pointer;
}

.lb-discover__tab[aria-selected="true"] {
	border-bottom-color: var(--lb-gold-400);
	color: var(--lb-ivory-100);
}

.lb-discover__section {
	margin-bottom: var(--lb-space-3);
}

.lb-discover__section[hidden] {
	display: none;
}

.lb-discover__select {
	width: 100%;
}

.lb-discover__status {
	margin: 0 0 var(--lb-space-2);
	color: var(--lb-ivory-300);
	font-size: 0.875rem;
}

.lb-discover__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lb-discover__pick {
	display: flex;
	align-items: center;
	gap: var(--lb-space-3);
	width: 100%;
	padding: var(--lb-space-2);
	border: 1px solid transparent;
	border-radius: var(--lb-radius-sm);
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.lb-discover__pick:hover {
	border-color: var(--lb-panel-border);
	background: rgba(233, 194, 122, 0.06);
}

.lb-discover__image {
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	object-fit: contain;
}

.lb-discover__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.lb-discover__inscription {
	font-family: var(--lb-font-display);
	font-size: 1.125rem;
	line-height: 1.25;
	overflow-wrap: anywhere;
	unicode-bidi: isolate;
}

.lb-discover__meta,
.lb-discover__where {
	color: var(--lb-ivory-300);
	font-size: 0.8125rem;
}

.lb-discover__more {
	margin-top: var(--lb-space-2);
}

.lb-discover__more[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ [love_bridge_list] */

.lb-list {
	box-sizing: border-box;
	color: var(--lb-ivory-100);
	font-family: var(--lb-font-ui);
	line-height: 1.5;
}

.lb-list:not(.lb-fallback > .lb-list) {
	padding: var(--lb-space-6);
	border-radius: var(--lb-radius-md);
	background: linear-gradient(180deg, var(--lb-midnight-700) 0%, var(--lb-midnight-900) 100%);
}

.lb-list *,
.lb-list *::before,
.lb-list *::after {
	box-sizing: inherit;
}

.lb-list__title {
	margin: 0 0 var(--lb-space-3);
	font-family: var(--lb-font-display);
	font-size: 1.5rem;
	font-weight: 400;
	color: var(--lb-ivory-100);
}

.lb-list__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--lb-space-3);
}

.lb-list__field {
	display: flex;
	flex: 1 1 12rem;
	flex-direction: column;
	gap: var(--lb-space-1);
	color: var(--lb-ivory-300);
	font-size: 0.875rem;
}

.lb-list__field input,
.lb-list__field select {
	min-height: 36px;
	padding: var(--lb-space-1) var(--lb-space-3);
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-sm);
	background: rgba(11, 20, 38, 0.6);
	color: var(--lb-ivory-100);
	font: inherit;
	font-size: 1rem;
}

.lb-list__submit {
	min-height: 36px;
	padding: var(--lb-space-1) var(--lb-space-4);
	border: 1px solid var(--lb-gold-400);
	border-radius: var(--lb-radius-sm);
	background: var(--lb-gold-400);
	color: #1b1408;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.lb-list__status {
	margin: var(--lb-space-4) 0 var(--lb-space-2);
	color: var(--lb-ivory-300);
	font-size: 0.875rem;
}

.lb-list__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lb-list__item {
	display: flex;
	align-items: center;
	gap: var(--lb-space-3);
	padding: var(--lb-space-2) 0;
	border-top: 1px solid var(--lb-panel-border);
}

.lb-list__image {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

.lb-list__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.lb-list__inscription {
	color: var(--lb-gold-400);
	font-family: var(--lb-font-display);
	font-size: 1.25rem;
	line-height: 1.25;
	overflow-wrap: anywhere;
	unicode-bidi: isolate;
}

.lb-list__meta {
	color: var(--lb-ivory-300);
	font-size: 0.8125rem;
}

.lb-list__pages {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-2);
	margin-top: var(--lb-space-4);
}

.lb-list__page {
	min-width: 36px;
	padding: var(--lb-space-1) var(--lb-space-2);
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-sm);
	color: var(--lb-ivory-100);
	text-align: center;
	text-decoration: none;
}

.lb-list__page[aria-current="page"] {
	border-color: var(--lb-gold-400);
	color: var(--lb-gold-400);
}

.lb-list a:focus-visible,
.lb-list input:focus-visible,
.lb-list select:focus-visible,
.lb-list button:focus-visible {
	outline: 2px solid var(--lb-focus);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ Story page */

.lb-story {
	box-sizing: border-box;
	max-width: 46rem;
	margin: var(--lb-space-8) auto;
	padding: 0 var(--lb-space-4);
	font-family: var(--lb-font-ui);
	line-height: 1.6;
}

.lb-story *,
.lb-story *::before,
.lb-story *::after {
	box-sizing: inherit;
}

.lb-story__card {
	padding: var(--lb-space-8);
	border-radius: var(--lb-radius-lg);
	background:
		radial-gradient(120% 60% at 50% 0%, rgba(31, 111, 120, 0.35) 0%, transparent 60%),
		linear-gradient(180deg, var(--lb-midnight-700) 0%, var(--lb-midnight-900) 100%);
	color: var(--lb-ivory-100);
}

.lb-story__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lb-space-6);
	margin-bottom: var(--lb-space-6);
}

.lb-story__lock {
	flex: 0 0 auto;
	width: 160px;
	height: 160px;
	object-fit: contain;
}

.lb-story__heading {
	flex: 1 1 16rem;
	min-width: 0;
}

.lb-story__eyebrow {
	margin: 0 0 var(--lb-space-1);
	color: var(--lb-gold-400);
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lb-story__inscription,
.lb-story__title {
	margin: 0 0 var(--lb-space-2);
	font-family: var(--lb-font-display);
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--lb-ivory-100);
	overflow-wrap: anywhere;
	unicode-bidi: isolate;
}

.lb-story__title {
	font-size: clamp(1.5rem, 4vw, 2.25rem);
}

.lb-story__meta,
.lb-story__where,
.lb-story__text {
	margin: 0 0 var(--lb-space-1);
	color: var(--lb-ivory-300);
}

.lb-story__meta span + span,
.lb-story__where .lb-story__id {
	margin-left: var(--lb-space-1);
}

.lb-story__id {
	color: var(--lb-gold-400);
	letter-spacing: 0.04em;
}

.lb-story__note {
	margin: 0 0 var(--lb-space-4);
	padding: var(--lb-space-3);
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-sm);
	background: rgba(233, 194, 122, 0.08);
}

.lb-story__photo {
	margin: 0 0 var(--lb-space-6);
}

.lb-story__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--lb-radius-md);
}

.lb-story__message {
	font-size: 1.125rem;
	unicode-bidi: isolate;
	overflow-wrap: anywhere;
}

.lb-story__message p {
	margin: 0 0 var(--lb-space-4);
}

.lb-story__long summary {
	margin-bottom: var(--lb-space-3);
	color: var(--lb-gold-400);
	cursor: pointer;
}

.lb-story__link {
	overflow-wrap: anywhere;
}

.lb-story a {
	color: var(--lb-gold-400);
}

.lb-story__link a {
	unicode-bidi: isolate;
}

.lb-story__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lb-space-3);
	margin-top: var(--lb-space-6);
}

.lb-story__button {
	display: inline-block;
	min-height: 40px;
	padding: var(--lb-space-2) var(--lb-space-4);
	border: 1px solid var(--lb-gold-400);
	border-radius: var(--lb-radius-sm);
	background: var(--lb-gold-400);
	color: #1b1408 !important;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.lb-story__button--quiet {
	background: transparent;
	color: var(--lb-gold-400) !important;
}

.lb-story__button[hidden] {
	display: none;
}

.lb-story__share-status {
	color: var(--lb-ivory-300);
	font-size: 0.875rem;
}

.lb-story__permalink {
	display: flex;
	flex-direction: column;
	gap: var(--lb-space-1);
	margin: var(--lb-space-4) 0 0;
	color: var(--lb-ivory-300);
	font-size: 0.875rem;
}

.lb-story__url {
	width: 100%;
	padding: var(--lb-space-2) var(--lb-space-3);
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-sm);
	background: rgba(11, 20, 38, 0.6);
	color: var(--lb-ivory-100);
	font: inherit;
}

.lb-story a:focus-visible,
.lb-story button:focus-visible,
.lb-story input:focus-visible,
.lb-story summary:focus-visible {
	outline: 2px solid var(--lb-focus);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.lb-story__card {
		padding: var(--lb-space-6) var(--lb-space-4);
	}

	.lb-story__lock {
		width: 112px;
		height: 112px;
	}
}

/* ------------------------------------------------------------------ Stage 4: control bar */

.lb-button--create {
	white-space: nowrap;
}

/* Wide scenes: the view settings sit inline and the View button is not needed. */
.lb-controls__menu {
	display: contents;
}

.lb-controls__view {
	display: none;
}

/* Narrow scenes (Alex, Stage 4): Place a lock, Discover and View stay on one row; the view
   settings open from View as a small menu under the bar. */
.lb-controls--compact {
	flex-wrap: nowrap;
}

.lb-controls--compact .lb-controls__view {
	display: inline-block;
	border-color: var(--lb-panel-border);
}

.lb-controls--compact .lb-controls__menu {
	position: absolute;
	top: calc(100% + var(--lb-space-1));
	right: 0;
	z-index: 4;
	display: none;
	flex-direction: column;
	align-items: stretch;
	gap: var(--lb-space-2);
	min-width: 200px;
	padding: var(--lb-space-2);
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-md);
	background: rgba(11, 20, 38, 0.94);
}

.lb-controls--compact.lb-controls--open .lb-controls__menu {
	display: flex;
}

.lb-controls--compact .lb-controls__menu .lb-button {
	text-align: left;
}

.lb-controls--compact .lb-controls__quality {
	justify-content: space-between;
}

.lb-controls__view[aria-expanded="true"] {
	border-color: var(--lb-gold-400);
	color: var(--lb-gold-400);
}

/* ------------------------------------------------------------------ Stage 4: the wizard */

.lb-wiz {
	display: flex;
	flex-direction: column;
	gap: var(--lb-space-3);
}

.lb-wiz__progress {
	margin: 0;
	color: var(--lb-ivory-300);
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.lb-wiz__progress[hidden] {
	display: none;
}

.lb-wiz__heading {
	margin: 0;
	font-family: var(--lb-font-display);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--lb-ivory-100);
}

.lb-wiz__heading:focus {
	outline: none;
}

.lb-wiz__hold {
	margin: 0;
	padding: var(--lb-space-2) var(--lb-space-3);
	border: 1px solid var(--lb-gold-400);
	color: var(--lb-gold-400);
	font-variant-numeric: tabular-nums;
}

.lb-wiz__hold[hidden] {
	display: none;
}

.lb-wiz__body {
	display: flex;
	flex-direction: column;
	gap: var(--lb-space-3);
}

.lb-wiz__text,
.lb-wiz__hint,
.lb-wiz__counter,
.lb-wiz__held {
	margin: 0;
}

.lb-wiz__hint,
.lb-wiz__counter {
	color: var(--lb-ivory-300);
	font-size: 0.875rem;
}

.lb-wiz__held {
	color: var(--lb-gold-400);
}

.lb-wiz__status {
	min-height: 1.5em;
	margin: 0;
	color: var(--lb-ivory-300);
}

.lb-wiz__error {
	margin: var(--lb-space-1) 0 0;
	color: #ffb4a8;
	font-size: 0.875rem;
}

.lb-wiz__error::before {
	content: "! ";
	font-weight: 700;
}

.lb-wiz__error[hidden] {
	display: none;
}

.lb-wiz__field {
	display: flex;
	flex-direction: column;
	gap: var(--lb-space-1);
}

.lb-wiz__label {
	color: var(--lb-ivory-100);
	font-weight: 600;
}

.lb-wiz__input,
.lb-wiz__textarea,
.lb-wiz__select,
.lb-wiz__file {
	width: 100%;
	min-height: 40px;
	padding: var(--lb-space-2) var(--lb-space-3);
	border: 1px solid var(--lb-panel-border);
	border-radius: var(--lb-radius-sm);
	background: rgba(11, 20, 38, 0.7);
	color: var(--lb-ivory-100);
	font: inherit;
	font-size: 1rem;
}

.lb-wiz__textarea {
	resize: vertical;
}

.lb-wiz__input--inscription {
	font-family: "Love Bridge Engraving", var(--lb-font-display);
	font-size: 1.25rem;
	letter-spacing: 0.03em;
}

.lb-wiz [aria-invalid="true"] {
	border-color: #ffb4a8;
}

.lb-wiz__choices {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-2);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.lb-wiz__choices legend {
	margin-bottom: var(--lb-space-2);
	padding: 0;
}

.lb-wiz__choice {
	display: flex;
	flex: 1 1 100%;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lb-space-1) var(--lb-space-2);
	padding: var(--lb-space-2) var(--lb-space-3);
	border: 1px solid var(--lb-panel-border);
	cursor: pointer;
}

.lb-wiz__choice:has(input:checked) {
	border-color: var(--lb-gold-400);
	background: rgba(233, 194, 122, 0.08);
}

.lb-wiz__choice input {
	accent-color: var(--lb-gold-400);
}

.lb-wiz__choice-note {
	flex: 1 1 100%;
	color: var(--lb-ivory-300);
	font-size: 0.875rem;
}

.lb-wiz__choices--styles .lb-wiz__choice {
	flex: 1 1 calc(50% - var(--lb-space-2));
	flex-direction: column;
	align-items: flex-start;
}

.lb-wiz__choice-image {
	width: 72px;
	height: 72px;
	object-fit: contain;
}

.lb-wiz__actions,
.lb-wiz__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-2);
	margin: 0;
}

.lb-wiz__nav {
	position: sticky;
	bottom: calc(-1 * var(--lb-space-4));
	justify-content: flex-end;
	padding: var(--lb-space-3) 0;
	background: rgba(11, 20, 38, 0.96);
}

.lb-wiz__cancel {
	margin-right: auto;
}

.lb-wiz__heart {
	align-self: flex-start;
}

.lb-wiz__photo img,
.lb-wiz__photo-image {
	display: block;
	max-width: 100%;
	height: auto;
}

.lb-wiz__review {
	display: grid;
	grid-template-columns: minmax(7rem, auto) 1fr;
	gap: var(--lb-space-1) var(--lb-space-3);
	margin: 0;
}

.lb-wiz__review dt {
	color: var(--lb-ivory-300);
}

.lb-wiz__review dd {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--lb-space-2);
	margin: 0;
	overflow-wrap: anywhere;
}

.lb-wiz__review-value {
	unicode-bidi: isolate;
}

.lb-button--link {
	min-height: 0;
	padding: 0;
	color: var(--lb-gold-400);
	text-decoration: underline;
}

.lb-wiz__terms {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--lb-space-2);
}

.lb-wiz__terms input {
	margin-top: 0.3em;
	accent-color: var(--lb-gold-400);
}

.lb-wiz__terms label {
	flex: 1 1 0;
}

.lb-wiz__terms .lb-wiz__error {
	flex: 1 1 100%;
}

/* The live preview (3D canvas, or the pre-rendered image with the inscription under it). */
.lb-preview {
	position: relative;
	width: 100%;
	height: 200px;
	margin: 0;
	background: radial-gradient(60% 70% at 50% 45%, rgba(246, 240, 228, 0.12) 0%, transparent 70%);
}

.lb-preview__canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.lb-preview--image {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: auto;
}

.lb-preview__image {
	width: 160px;
	height: 160px;
	object-fit: contain;
}

.lb-preview__engraving {
	min-height: 1.5em;
	font-family: "Love Bridge Engraving", var(--lb-font-display);
	font-size: 1.25rem;
	color: var(--lb-gold-400);
	unicode-bidi: isolate;
}

/* ------------------------------------------------------------------ Stage 4: dashboard */

.lb-root.lb-dash {
	aspect-ratio: auto;
	min-height: 0;
	overflow: visible;
	padding: var(--lb-space-6);
}

.lb-dash__title {
	margin: 0 0 var(--lb-space-3);
	font-family: var(--lb-font-display);
	font-size: 1.75rem;
	font-weight: 400;
	color: var(--lb-ivory-100);
}

.lb-dash__text,
.lb-dash__status,
.lb-dash__limits,
.lb-dash__note {
	margin: 0 0 var(--lb-space-3);
}

.lb-dash__status,
.lb-dash__limits,
.lb-dash__note,
.lb-dash__meta {
	color: var(--lb-ivory-300);
}

.lb-dash__status:empty,
.lb-dash__note:empty {
	display: none;
}

.lb-dash__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lb-space-2);
	margin: 0;
}

.lb-dash__account {
	margin-bottom: var(--lb-space-6);
}

.lb-dash__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lb-dash__lock {
	display: flex;
	flex-direction: column;
	gap: var(--lb-space-3);
	padding: var(--lb-space-4) 0;
	border-top: 1px solid var(--lb-panel-border);
}

.lb-dash__head {
	display: flex;
	align-items: flex-start;
	gap: var(--lb-space-3);
}

.lb-dash__image {
	flex: 0 0 auto;
	width: 72px;
	height: 72px;
	object-fit: contain;
}

.lb-dash__inscription {
	margin: 0;
	font-family: "Love Bridge Engraving", var(--lb-font-display);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--lb-ivory-100);
	unicode-bidi: isolate;
}

.lb-dash__meta,
.lb-dash__state {
	margin: var(--lb-space-1) 0 0;
}

.lb-badge {
	display: inline-block;
	padding: 0 var(--lb-space-2);
	border: 1px solid currentColor;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--lb-turquoise-400);
}

.lb-badge--soon {
	color: var(--lb-gold-400);
}

.lb-badge--expired,
.lb-badge--suspended {
	color: var(--lb-ivory-300);
}

.lb-dash__url {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lb-space-2);
}

.lb-dash__url .lb-wiz__label,
.lb-dash__url .lb-dash__links {
	flex: 1 1 100%;
}

.lb-dash__url .lb-wiz__input {
	flex: 1 1 14rem;
	width: auto;
}

.lb-dash__edit summary {
	color: var(--lb-gold-400);
	cursor: pointer;
}

.lb-dash__form,
.lb-dash__photo {
	display: flex;
	flex-direction: column;
	gap: var(--lb-space-3);
	margin-top: var(--lb-space-3);
}

.lb-dash__form .lb-button--primary {
	align-self: flex-start;
}

.lb-dash a:focus-visible,
.lb-dash button:focus-visible,
.lb-dash input:focus-visible,
.lb-dash textarea:focus-visible,
.lb-dash select:focus-visible,
.lb-dash summary:focus-visible,
.lb-list__create a:focus-visible {
	outline: 2px solid var(--lb-focus);
	outline-offset: 2px;
}

/* The wizard as a page dialog on the dashboard. */
.lb-sheet--page {
	position: fixed;
	top: 50%;
	right: auto;
	bottom: auto;
	left: 50%;
	z-index: 100000;
	width: min(560px, calc(100% - var(--lb-space-6)));
	max-height: min(90vh, 900px);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 100vmax rgba(5, 9, 18, 0.6);
}

@media (max-width: 600px) {
	.lb-root.lb-dash {
		min-height: 0;
		padding: var(--lb-space-4);
	}

	.lb-sheet--page {
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: 90vh;
		transform: none;
	}
}

.lb-list__create {
	margin: 0 0 var(--lb-space-4);
}

.lb-list__create .lb-button {
	display: inline-block;
	text-decoration: none;
}

.lb-wiz__any {
	align-self: flex-start;
}