/**
 * Session recording detail page styles.
 */

.recording-detail {
	padding-top: 0;
}

.recording-detail-hero {
	margin-bottom: 2.5rem;
	padding: 2.25rem 2rem;
}

@media (min-width: 768px) {
	.recording-detail-hero {
		padding: 2.75rem 3rem;
	}
}

.recording-detail-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
}

.recording-detail-kind {
	color: var(--copan-cyan-200, #7dcbe8);
}

.recording-detail-hero-sep {
	color: rgba(255, 255, 255, 0.3);
}

.recording-detail-role-link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
}

.recording-detail-role-link:hover {
	color: #fff;
}

.recording-detail-title {
	max-width: 56rem;
}

.recording-detail-summary {
	max-width: 48rem;
	color: rgba(255, 255, 255, 0.8) !important;
}

.recording-detail-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem 1.5rem;
	margin-top: 1.75rem;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.8);
}

.recording-detail-facts span {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.recording-detail-facts svg {
	width: 1rem;
	height: 1rem;
	color: var(--copan-cyan-200, #7dcbe8);
}

.recording-detail-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
	align-items: stretch;
}

@media (min-width: 1024px) {
	.recording-detail-layout {
		grid-template-columns: 2fr 1fr;
		gap: 2rem;
	}
}

.recording-detail-main-col,
.recording-detail-sidebar-col {
	min-height: 100%;
}

.recording-detail-sidebar-col {
	display: flex;
	flex-direction: column;
}

.recording-detail-main-col {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

.recording-detail-section + .recording-detail-section,
.recording-detail-tip + .recording-detail-section {
	margin-top: 2.5rem;
}

.recording-detail-section-label {
	margin: 0 0 0;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--copan-border, #e3e8ef);
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--copan-brand-strong, #117bb5);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.recording-detail-body {
	margin: 1rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--copan-foreground, #0b1b33);
	padding: 0 !important;
}

.recording-detail-note {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	font-style: italic;
	color: var(--copan-foreground-subtle, #6b7588);
	padding: 0 !important;
}

.recording-detail-highlights {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.recording-detail-highlights li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.65;
	color: var(--copan-foreground, #0b1b33);
}

.recording-detail-highlights li::before {
	content: "";
	flex-shrink: 0;
	width: 0.375rem;
	height: 0.375rem;
	margin-top: 0.5rem;
	border-radius: 999px;
	background: var(--copan-brand, #1b96d3);
}

.recording-detail-tip {
	margin-top: 2.5rem;
	border-left: 4px solid var(--copan-brand, #1b96d3);
	border-radius: var(--copan-radius, 10px);
	background: color-mix(in srgb, var(--copan-brand-soft, #e8f4fc) 40%, transparent);
	padding: 1.25rem;
}

.recording-detail-tip-label {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--copan-brand-strong, #117bb5);
	padding: 0 !important;
}

.recording-detail-explore-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 1rem;
	align-items: stretch;
}

@media (min-width: 640px) {
	.recording-detail-explore-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.recording-detail-explore-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--copan-border, #e3e8ef);
	border-radius: var(--copan-radius, 10px);
	background: var(--copan-surface, #fff);
	padding: 1.25rem;
	text-decoration: none;
	color: inherit;
}

.recording-detail-explore-card h4 {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1rem;
	color: var(--copan-foreground, #0b1b33);
	font-weight: 400;
}

.recording-detail-explore-card p {
	margin: 0.5rem 0 0;
	flex: 1;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--copan-foreground-muted, #54627a);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.recording-detail-explore-card span {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin-top: 0.75rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--copan-brand-strong, #117bb5);
}

.recording-detail-chapters {
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
	border: 1px solid var(--copan-border, #e3e8ef);
	border-radius: var(--copan-radius, 10px);
	background: var(--copan-surface, #fff);
	overflow: hidden;
}

.recording-detail-chapters li {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.875rem 1.25rem;
	font-size: 0.875rem;
	border-top: 1px solid var(--copan-border, #e3e8ef);
}

.recording-detail-chapters li:first-child {
	border-top: 0;
}

.recording-detail-chapter-time {
	flex-shrink: 0;
	width: 4rem;
	font-family: ui-monospace, monospace;
	font-size: 0.75rem;
	color: var(--copan-brand-strong, #117bb5);
}

.recording-detail-transcript {
	margin: 1rem 0 0;
	border-left: 4px solid var(--copan-brand, #1b96d3);
	border-radius: var(--copan-radius, 10px);
	background: color-mix(in srgb, var(--copan-brand-soft, #e8f4fc) 40%, transparent);
	padding: 1.25rem;
	font-size: 0.9375rem;
	font-style: italic;
	line-height: 1.65;
	color: var(--copan-foreground, #0b1b33);
}

.recording-detail-sidebar {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 1.5rem;
}

.recording-detail-playback,
.recording-detail-facts-card,
.recording-detail-tags-card {
	border: 1px solid var(--copan-border, #e3e8ef);
	border-radius: var(--copan-radius, 10px);
	background: var(--copan-surface, #fff);
	box-shadow: var(--copan-shadow-sm, 0 1px 2px rgba(11, 27, 51, 0.06));
	overflow: hidden;
}

.recording-detail-playback-media {
	position: relative;
	aspect-ratio: 16 / 9;
}

.recording-detail-playback-body,
.recording-detail-facts-card,
.recording-detail-tags-card {
	padding: 1.25rem;
}

.recording-detail-sidebar-label {
	margin: 0;
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--copan-brand-strong, #117bb5);
}

.recording-detail-sidebar-label--muted {
	color: var(--copan-foreground-subtle, #6b7588);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.recording-detail-sidebar-label--muted svg {
	width: 0.75rem;
	height: 0.75rem;
	flex-shrink: 0;
}

.recording-detail-playback-copy {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	line-height: 1.625;
	color: var(--copan-foreground-muted, #54627a);
}

.recording-detail-playback-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	margin-top: 1rem;
	border-radius: var(--copan-radius-sm, 6px);
	background: var(--copan-brand, #1b96d3);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.625rem 1rem;
	text-decoration: none;
}

.recording-detail-playback-btn:hover {
	background: var(--copan-brand-strong, #117bb5);
	color: #fff;
}

.recording-detail-playback-btn svg {
	width: 0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
}

.recording-detail-password {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--copan-border, #e3e8ef);
}

.recording-detail-password-label {
	margin: 0;
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--copan-foreground-subtle, #6b7588);
}

.recording-detail-password-field {
	margin-top: 0.5rem;
}

.recording-password-reveal {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: var(--copan-radius-sm, 6px);
	background: rgba(6, 18, 36, 0.9);
	padding: 0.375rem 0.75rem;
	color: #fff;
	max-width: 100%;
}

.recording-password-value,
body.copan-app-shell .recording-detail .recording-password-reveal code.recording-password-value,
html.theme-dark body.copan-app-shell .recording-detail .recording-password-reveal code.recording-password-value {
	display: inline;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent !important;
	color: #fff !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.875rem;
	line-height: 1.25;
	letter-spacing: 0.05em;
	user-select: all;
	white-space: nowrap;
}

.recording-password-toggle,
.recording-password-copy {
	border: 0;
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	cursor: pointer;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
}

.recording-password-toggle:hover,
.recording-password-copy:hover {
	color: #fff;
}

.recording-password-toggle svg,
.recording-password-copy svg {
	width: 0.875rem;
	height: 0.875rem;
}

.recording-password-copy.is-copied {
	color: var(--copan-cyan-200, #7dcbe8);
}

.recording-password-copy.is-error {
	color: #fcd34d;
}

.recording-detail-facts-list {
	margin: 1rem 0 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	font-size: 0.875rem;
}

.recording-detail-facts-list div {
	display: block;
}

.recording-detail-facts-list dt {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--copan-foreground-subtle, #6b7588);
}

.recording-detail-facts-list dd {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	line-height: 1.375;
	color: var(--copan-foreground, #0b1b33);
}

.recording-detail-sidebar-role-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--copan-brand-strong, #117bb5);
	text-decoration: none;
}

.recording-detail-sidebar-role-link:hover {
	text-decoration: underline;
	color: var(--copan-brand-strong, #117bb5);
}

.recording-detail-sidebar-role-link svg {
	width: 1rem;
	height: 1rem;
	flex-shrink: 0;
}

.recording-detail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
}

.recording-detail-tag {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: var(--copan-brand-soft, #e8f4fc);
	color: var(--copan-brand-strong, #117bb5);
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.125rem 0.625rem;
	text-transform: capitalize;
	text-decoration: none;
	box-shadow: 0 0 0 1px var(--copan-cyan-100, #c6e7f6);
	transition: background-color 0.15s ease;
	line-height: normal;
}

.recording-detail-tag:hover {
	background: var(--copan-cyan-100, #c6e7f6);
	color: var(--copan-brand-strong, #117bb5);
}

.recording-detail-related {
	margin-top: 3.5rem;
}

.recording-detail-related-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--copan-border, #e3e8ef);
}

.recording-detail-related-label {
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--copan-foreground-subtle, #6b7588);
	padding: 0 !important;
}

.recording-detail-related-link {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 13px;
	font-weight: 500;
	color: var(--copan-brand-strong, #117bb5);
	text-decoration: none;
}

.recording-detail-related-link:hover {
	text-decoration: underline;
}

.recording-detail-related-link svg {
	width: 0.75rem;
	height: 0.75rem;
}

.recording-detail-related-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	margin-top: 1.25rem;
	align-items: stretch;
}

.recording-detail-related-grid .recording-card-wrap {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.recording-detail-related-grid .recording-card {
	display: flex;
	flex: 1;
	flex-direction: column;
	height: 100%;
}

.recording-detail-related-grid .recording-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.recording-detail-related-grid .recording-card-summary {
	flex: 1;
}

@media (min-width: 768px) {
	.recording-detail-related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.recording-detail-related-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.recording-detail-related.rise-in-delay-3 {
	animation-delay: 240ms;
}

body.copan-app-shell .recording-detail-hero p,
body.copan-app-shell .recording-detail-hero .recording-detail-role-link {
	color: inherit;
}

body.copan-app-shell .recording-detail-hero .hero-title,
body.copan-app-shell .recording-detail-hero .recording-detail-kind {
	color: #fff !important;
}

body.copan-app-shell .recording-detail-hero .recording-detail-kind {
	color: var(--copan-cyan-200, #7dcbe8) !important;
}

/* Salient theme resets can override sidebar card typography — match React tokens. */
body.copan-app-shell .recording-detail-sidebar p {
	margin-bottom: 0;
}

body.copan-app-shell .recording-detail-sidebar .recording-detail-sidebar-label {
	font-size: 12px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.18em !important;
	color: var(--copan-brand-strong, #117bb5) !important;
	padding: 0 !important;
}

body.copan-app-shell .recording-detail-sidebar .recording-detail-sidebar-label--muted {
	color: var(--copan-foreground-subtle, #6b7588) !important;
}

body.copan-app-shell .recording-detail-sidebar .recording-detail-playback-copy {
	font-size: 0.8125rem !important;
	line-height: 1.625 !important;
	color: var(--copan-foreground-muted, #54627a) !important;
	padding: 0 !important;
}

body.copan-app-shell .recording-detail-sidebar .recording-detail-password-label {
	font-size: 12px !important;
	color: var(--copan-foreground-subtle, #6b7588) !important;
	padding: 0 !important;
}

body.copan-app-shell .recording-detail-sidebar .recording-detail-facts-list dt {
	font-size: 0.75rem !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.14em !important;
	color: var(--copan-foreground-subtle, #6b7588) !important;
}

body.copan-app-shell .recording-detail-sidebar .recording-detail-facts-list dd {
	font-size: 0.875rem !important;
	line-height: 1.375 !important;
	color: var(--copan-foreground, #0b1b33) !important;
	padding: 0 !important;
}

body.copan-app-shell .recording-detail-sidebar .recording-detail-sidebar-role-link {
	color: var(--copan-brand-strong, #117bb5) !important;
}

body.copan-app-shell .recording-detail-sidebar .recording-detail-tag {
	font-size: 0.75rem !important;
	color: var(--copan-brand-strong, #117bb5) !important;
}

html.theme-dark .recording-detail-tag,
html.theme-dark body.copan-app-shell .recording-detail-sidebar .recording-detail-tag {
	background: rgba(27, 150, 211, 0.14) !important;
	color: var(--copan-cyan-200, #7dcbe8) !important;
	box-shadow: inset 0 0 0 1px rgba(125, 203, 232, 0.35) !important;
}

html.theme-dark .recording-detail-tag:hover,
html.theme-dark body.copan-app-shell .recording-detail-sidebar .recording-detail-tag:hover {
	background: rgba(27, 150, 211, 0.22) !important;
	color: var(--copan-cyan-200, #7dcbe8) !important;
}