/*
 * rsg-tutorial.css — tutorial video slots, transcripts and screenshot placeholders
 * (NWB-RSG-140). Used inside the console help drawer and on the public /guide/ page, so it uses
 * plain colours with the console tokens as optional overrides. Contrast: #1a1a1a on #fff 17.4:1,
 * #4a4a4a on #f2f4f8 7.9:1, #01579B on #fff 8.6:1. Targets are 44px; no motion at all.
 */
.rsg-tutorial,
.rsg-shot {
	box-sizing: border-box;
	margin: 16px 0;
	padding: 12px;
	border: 1px solid var(--rsg-line, #c9c9d1);
	border-radius: 12px;
	background: #f2f4f8;
	color: var(--rsg-ink, #1a1a1a);
}

.rsg-tutorial__title {
	margin: 0 0 8px;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
}

.rsg-tutorial__video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	background: #030400;
	border-radius: 8px;
}

.rsg-tutorial__video:focus-visible {
	outline: 3px solid var(--rsg-black, #030400);
	outline-offset: 2px;
}

.rsg-tutorial__pending,
.rsg-tutorial__note {
	margin: 8px 0;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--rsg-muted, #4a4a4a);
}

.rsg-tutorial__transcript {
	margin-top: 8px;
}

.rsg-tutorial__transcript > summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 4px 8px;
	border-radius: 8px;
	color: var(--rsg-sea, #01579B);
	font-weight: 600;
	cursor: pointer;
}

.rsg-tutorial__transcript > summary:focus-visible {
	outline: 3px solid var(--rsg-black, #030400);
	outline-offset: 2px;
}

.rsg-tutorial__text p {
	margin: 8px 0;
	font-size: 1rem;
	line-height: 1.6;
}

.rsg-shot {
	text-align: center;
}

.rsg-shot img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 8px;
}

.rsg-shot--pending {
	border-style: dashed;
}

.rsg-shot__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.5;
	text-align: left;
	color: var(--rsg-muted, #4a4a4a);
}