/**
 * GENE Motion — Scroll Hero: editor canvas.
 *
 * The canvas shows the calm hero (background + heading) at a natural height —
 * never the full-viewport pin, which is hostile to edit.
 */
.gene-hero--editor {
	.gene-hero__pin {
		min-height: 240px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: clamp( 1.5rem, 4vw, 3rem );
	}
	.gene-hero__beats {
		gap: 1.5rem;
	}
	&[ data-has-bg='0' ] {
		background: #14161c;
		color: #fff;
		border-radius: 4px;
	}
	/* Reflect the bottom-left placement in the calm editor preview too. */
	&[ data-pos='bottom-left' ] .gene-hero__pin {
		align-items: flex-end;
		justify-content: flex-start;
	}
	&[ data-pos='bottom-left' ] .gene-hero__beats {
		text-align: left;
	}
}

/* Free-placement canvas: a real editing stage — drag each heading on the frame,
   trim its scroll window on the track below, and (for video) the frame scrubs to
   the moment being edited. */
.gene-hero--timeline-edit.gene-hero--editor {
	.gene-hero__pin {
		min-height: 58vh;
		align-items: stretch;
		justify-content: stretch;
		padding: 0;
	}
	.gene-hero__beats {
		position: absolute;
		inset: 0;
		width: auto;
		gap: 0;
		display: block;
		text-align: center;
	}
	.gene-hero__beat {
		position: absolute;
		width: min( 480px, 70% );
		margin: 0;
		text-align: center;
		outline: 1px dashed rgba( 255, 255, 255, 0.4 );
		outline-offset: 6px;
		border-radius: 2px;
		touch-action: none;
		&:hover {
			outline-color: rgba( 255, 255, 255, 0.7 );
		}
		&.is-selected {
			outline: 2px solid #3858e9;
			outline-offset: 6px;
		}
		/* Editing in place (double-clicked): solid frame + a text caret, and the
		   text is selectable (dragging is off while editing). */
		&.is-editing {
			outline: 2px solid #3858e9;
			outline-offset: 6px;
			cursor: text;
			user-select: text;
			-webkit-user-select: text;
		}
	}
	/* Buttons sit on the placed point following the beat's alignment (default
	   centered); a button item's frame hugs its pill(s) so what you grab is the
	   button itself. */
	.gene-hero__actions {
		justify-content: var( --gene-hero-actions-justify, center );
	}
	.gene-hero__beat--btn {
		width: max-content;
		max-width: 70%;
	}
	.gene-hero__beat--btn .gene-hero__actions {
		margin-top: 0;
	}
}

/* Toolbar strip above the stage. */
.gene-hero__tl-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 10px;
	background: #1e1f26;
	color: #cfd2dc;
	font-size: 12px;
	border-radius: 4px 4px 0 0;
}
.gene-hero__tl-tip {
	opacity: 0.85;
}
.gene-hero__tl-dev {
	display: inline-flex;
	gap: 4px;
	flex: none;
	/* The Desktop/Phone buttons sit on the dark toolbar — the WP button's
	   default dark text is invisible there, so force a light, readable style
	   (the pressed one gets an accent fill). */
	.components-button {
		color: #cfd2dc;
		box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.25 );
		&:hover:not( :disabled ) {
			color: #fff;
			box-shadow: inset 0 0 0 1px rgba( 255, 255, 255, 0.5 );
		}
		&.is-pressed {
			color: #fff;
			background: #3858e9;
			box-shadow: none;
		}
	}
}

/* Timeline track: one row per heading, bands are the [in,out] windows. */
.gene-hero__tl-track-wrap {
	background: #14151b;
	border-radius: 0 0 4px 4px;
	padding: 8px 10px 6px;
}
.gene-hero__tl-track {
	position: relative;
	background: #24262f;
	border-radius: 3px;
	overflow: hidden;
	min-height: 30px;
}
.gene-hero__tl-band {
	position: absolute;
	height: 22px;
	box-sizing: border-box;
	background: rgba( 56, 88, 233, 0.35 );
	border: 1px solid rgba( 120, 145, 245, 0.6 );
	border-radius: 3px;
	display: flex;
	align-items: center;
	cursor: grab;
	touch-action: none;
	overflow: hidden;
	&.is-selected {
		background: rgba( 56, 88, 233, 0.6 );
		border-color: #9db0ff;
	}
}
.gene-hero__tl-label {
	flex: 1;
	min-width: 0;
	padding: 0 8px;
	font-size: 11px;
	line-height: 22px;
	color: #eef0f6;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}
.gene-hero__tl-h {
	flex: none;
	width: 8px;
	align-self: stretch;
	cursor: ew-resize;
	touch-action: none;
	background: rgba( 255, 255, 255, 0.25 );
	&:hover {
		background: rgba( 255, 255, 255, 0.55 );
	}
}
.gene-hero__tl-playhead {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	margin-left: -1px;
	background: #ff5a5a;
	pointer-events: none;
}
.gene-hero__tl-scale {
	display: flex;
	justify-content: space-between;
	margin-top: 5px;
	font-size: 10px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #767a89;
}

/* Multi-scene canvas: a row of numbered chapter tabs above a calm static
   preview of the selected chapter (the sequence itself plays only live). */
.gene-hero__ms-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	padding: 6px 8px;
	background: #1e2129;
	border-radius: 4px 4px 0 0;
}
.gene-hero__ms-tab {
	width: 26px;
	height: 26px;
	border: 1px solid #3a3f4b;
	border-radius: 4px;
	background: #2a2e39;
	color: #cbd0dc;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;

	&.is-on {
		background: #3858e9;
		border-color: #3858e9;
		color: #fff;
	}
}
.gene-hero__ms-tip {
	margin-left: auto;
	font-size: 11px;
	color: #767a89;
}
/* Chapter preview: a quiet note that this chapter carries several headings. */
.gene-hero__ms-count {
	margin: 1rem 0 0;
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.6;
}

/* Placement guides (timeline editor): a faint centre cross while dragging a
   heading; a bright line when the drag snaps to an anchor (edge / quarter /
   centre). Pointer-through so it never blocks the drag. */
.gene-hero__tl-guides {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}
.gene-hero__tl-guide {
	position: absolute;
	background: rgba( 255, 255, 255, 0.28 );

	&.is-snap {
		background: #3858e9;
		box-shadow: 0 0 6px rgba( 56, 88, 233, 0.6 );
	}
}
.gene-hero__tl-guide--v {
	top: 0;
	bottom: 0;
	width: 1px;
	margin-left: -0.5px;
}
.gene-hero__tl-guide--h {
	left: 0;
	right: 0;
	height: 1px;
	margin-top: -0.5px;
}
