/* Student portal + catalog — product domain. Tokens from Sport master.css. */

.plp-portal {
	max-width: 720px;
	padding-left: max(0px, env(safe-area-inset-left));
	padding-right: max(0px, env(safe-area-inset-right));
	padding-bottom: max(0px, env(safe-area-inset-bottom));
}

.plp-portal .retro-btn,
.plp-portal button,
.plp-portal a.retro-btn {
	touch-action: manipulation;
}

.plp-portal__title {
	margin: 0 0 0.75rem;
}

.plp-portal__status {
	min-height: 1.25rem;
	margin: 0 0 0.5rem;
	font-size: 0.9rem;
	color: var(--retro-sys-color-ok, #1b7a3d);
}

.plp-portal__status.is-error {
	color: var(--retro-sys-color-danger, #a11);
}

.plp-portal__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	list-style: none;
	padding: 0;
	margin: 0 0 1.25rem;
}

.plp-portal__stats li {
	padding: 0.65rem 0.75rem;
	border-radius: var(--retro-sys-shape-corner-small, 6px);
	background: var(--retro-sys-color-surface-variant, #f2f2f2);
	font-size: 0.85rem;
}

.plp-portal__stats strong {
	display: block;
	font-size: 1.15rem;
}

.plp-portal__empty {
	margin: 0.5rem 0 0;
	color: var(--retro-sys-color-on-surface-variant, #666);
}

.plp-homework-card {
	margin-bottom: 0.85rem;
	padding: 1rem;
}

.plp-homework-card.is-done {
	opacity: 0.92;
	border-color: var(--retro-sys-color-ok, #1b7a3d);
}

.plp-homework-card.is-overdue {
	border-color: var(--retro-sys-color-danger, #a11);
}

.plp-homework-card__title {
	margin: 0 0 0.35rem;
	font-size: 1.1rem;
}

.plp-homework-card__due,
.plp-homework-card__desc {
	margin: 0 0 0.5rem;
	font-size: 0.92rem;
	color: var(--retro-sys-color-on-surface-variant, #555);
}

.plp-homework-card__moves {
	list-style: none;
	margin: 0 0 0.85rem;
	padding: 0;
	display: grid;
	gap: 0.65rem;
}

.plp-homework-move {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 0.65rem;
	align-items: start;
}

.plp-homework-move__img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--retro-sys-shape-corner-small, 6px);
	background: var(--retro-sys-color-surface-variant, #eee);
}

.plp-homework-move__body p {
	margin: 0.25rem 0 0;
	font-size: 0.88rem;
	color: var(--retro-sys-color-on-surface-variant, #555);
}

.plp-homework-move__video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-top: 0.4rem;
	border-radius: 6px;
	overflow: hidden;
	background: #111;
}

.plp-homework-move__video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.plp-homework-card__done {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	min-height: 44px;
	margin: 0.35rem 0;
	font-size: 1rem;
}

.plp-homework-card__done input {
	width: 1.25rem;
	height: 1.25rem;
}

.plp-homework-card__difficulty-label,
.plp-homework-card__note {
	display: block;
	margin: 0.75rem 0 0.35rem;
	font-size: 0.9rem;
}

.plp-homework-difficulty {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}

.plp-homework-difficulty__btn {
	min-width: 44px;
	min-height: 44px;
	padding: 0.35rem 0.65rem;
	border: 1px solid var(--retro-sys-color-outline-variant, #ccc);
	border-radius: var(--retro-sys-shape-corner-small, 6px);
	background: var(--retro-sys-color-surface, #fff);
	font-size: 1rem;
	cursor: pointer;
}

.plp-homework-difficulty__btn.is-active {
	background: var(--retro-sys-color-brand, #6b4f3a);
	border-color: var(--retro-sys-color-brand, #6b4f3a);
	color: var(--retro-sys-color-on-brand, #fff);
}

.plp-homework-note {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 0.5rem;
	min-height: 44px;
	font-size: 16px;
	padding: 0.55rem 0.65rem;
}

.plp-homework-card .plp-homework-note-save {
	width: 100%;
	max-width: 20rem;
}

.plp-homework-card__coach {
	margin: 0.75rem 0 0;
	padding: 0.5rem 0.65rem;
	border-radius: var(--retro-sys-shape-corner-small, 6px);
	background: var(--retro-sys-color-surface-variant, #f2f2f2);
	font-size: 0.85rem;
}

.plp-portal--guest .retro-btn {
	margin-top: 0.5rem;
}

/* Catalog item block */
.plp-catalog-item {
	max-width: 40rem;
	box-sizing: border-box;
}

.plp-catalog-item__trigger {
	display: grid;
	grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
	gap: 1rem;
	align-items: start;
	width: 100%;
	margin: 0;
	padding: 1rem;
	border: 1px solid var(--retro-sys-color-outline-variant, #e2e2e2);
	border-radius: var(--retro-sys-shape-corner-medium, 10px);
	background: var(--retro-sys-color-surface, #fff);
	text-align: left;
	font: inherit;
	color: inherit;
	cursor: pointer;
	appearance: none;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.plp-catalog-item__trigger:hover {
	border-color: var(--retro-sys-color-outline, #bbb);
}

.plp-catalog-item__trigger:focus-visible {
	outline: 2px solid var(--retro-sys-color-brand, #2563eb);
	outline-offset: 2px;
}

.plp-catalog-item--empty {
	display: block;
	padding: 1rem;
	color: var(--retro-sys-color-on-surface-variant, #666);
}

.plp-catalog-item--no-media .plp-catalog-item__trigger {
	grid-template-columns: minmax(0, 1fr);
}

.plp-catalog-item__media {
	display: block;
	margin: 0;
	overflow: hidden;
	border-radius: var(--retro-sys-shape-corner-small, 6px);
	background: var(--retro-sys-color-surface-variant, #f3f3f3);
	aspect-ratio: 1 / 1;
}

.plp-catalog-item__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.plp-catalog-item__body {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.plp-catalog-item__type {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--retro-sys-color-on-surface-variant, #666);
}

.plp-catalog-item__title {
	margin: 0;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--retro-sys-color-on-surface, #1a1a1a);
}

.plp-catalog-item__meta,
.plp-catalog-item__desc {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.45;
	color: var(--retro-sys-color-on-surface-variant, #555);
}

/* Catalog modal (front) — tokens come from .retro-root on the modal itself. */
html.plp-catalog-modal-open,
body.retro-admin-modal-open {
	overflow: hidden;
}

#plp-catalog-modal.retro-admin-modal {
	/* Fallbacks if a theme strips custom props before .retro-root cascade */
	--retro-sys-color-scrim: rgba(0, 0, 0, 0.45);
	--retro-sys-color-surface: #fff;
	--retro-sys-color-surface-container: #f3f3f3;
	--retro-sys-color-outline-variant: #e2e2e2;
	--retro-sys-color-on-surface: #1a1a1a;
	--retro-sys-color-on-surface-variant: #555;
	--retro-comp-modal-max-width-md: 560px;
	--retro-comp-modal-max-width-lg: 720px;
	--retro-comp-modal-titlebar-min: 2.5rem;
	z-index: 100000;
}

#plp-catalog-modal .retro-admin-modal__backdrop {
	background: var(--retro-sys-color-scrim, rgba(0, 0, 0, 0.45));
}

#plp-catalog-modal .retro-admin-modal__panel {
	background: var(--retro-sys-color-surface, #fff);
	color: var(--retro-sys-color-on-surface, #1a1a1a);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

#plp-catalog-modal .retro-admin-modal__panel.plp-modal-panel--exercise {
	background: transparent;
	box-shadow: none;
	color: inherit;
}

#plp-catalog-modal .retro-admin-modal__panel.plp-modal-panel--exercise > .retro-admin-modal__head {
	display: flex !important;
}

#plp-catalog-modal .retro-admin-modal__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 0;
}

#plp-catalog-modal .plp-catalog-modal__back {
	flex: 0 0 auto;
	min-width: 2rem;
	padding-inline: 0.45rem;
}

#plp-catalog-modal .plp-catalog-modal__back[hidden] {
	display: none !important;
}

/* Body already has the real title; chrome title overflows the close bar. */
#plp-catalog-modal .retro-admin-modal__title {
	display: none !important;
}

/* Collapse empty titlebar when back is hidden (only close remains). */
#plp-catalog-modal .retro-admin-modal__head:not(:has(.plp-catalog-modal__back:not([hidden]))) {
	display: none;
}

#plp-catalog-modal .plp-lesson-folio__dek:empty,
#plp-catalog-modal .plp-program-guide__dek:empty {
	display: none;
}

#plp-catalog-modal .plp-lesson-folio__dek,
#plp-catalog-modal .plp-program-guide__dek {
	color: var(--retro-sys-color-on-surface-variant, #555);
	line-height: 1.5;
}

#plp-catalog-modal .plp-guide__toolbar {
	margin-bottom: 0.65rem;
}

.plp-catalog-share-panel {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 11rem;
	padding: 0.55rem;
	border: 1px solid var(--retro-sys-color-outline-variant, #e2e2e2);
	border-radius: var(--retro-sys-shape-corner-medium, 10px);
	background: var(--retro-sys-color-surface, #fff);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	/* Above #plp-catalog-modal (z-index 100000); never inherit modal transforms. */
	position: fixed;
	z-index: 100050;
}

.plp-catalog-share-panel__btn {
	width: 100%;
	justify-content: center;
}

/* Harden exercise card chrome against theme resets (themes often restyle header/footer/h2). */
#plp-catalog-modal .plp-exercise-card__shell {
	display: flex !important;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid #c9c9c9;
	border-color: color-mix(in srgb, var(--retro-sys-color-brand, #c3a07a) 22%, var(--retro-sys-color-outline-variant, #c9c9c9));
	border-radius: 12px;
	background: #f8f5f2;
	background: color-mix(in srgb, var(--retro-sys-color-brand, #c3a07a) 9%, var(--retro-sys-color-brand-muted, #f8f5f2));
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#plp-catalog-modal header.plp-exercise-card__header,
#plp-catalog-modal .plp-exercise-card__header {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 0.5rem !important;
	padding: 0 0 0.35rem !important;
	margin: 0 !important;
	border: 0 !important;
	border-bottom: 1.5px solid color-mix(in srgb, var(--retro-sys-color-brand, #c3a07a) 55%, #ddd) !important;
	background: transparent !important;
	visibility: visible !important;
	min-height: 14mm;
}

#plp-catalog-modal .plp-exercise-card__qr,
#plp-catalog-modal .plp-exercise-card__qr-empty {
	display: flex !important;
	flex: 0 0 auto !important;
	visibility: visible !important;
	width: 14mm !important;
	min-width: 14mm !important;
}

#plp-catalog-modal .plp-exercise-card__heading {
	display: flex !important;
	flex-direction: column !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
	visibility: visible !important;
}

#plp-catalog-modal .plp-exercise-card__title,
#plp-catalog-modal h2.plp-exercise-card__title {
	display: -webkit-box !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.98rem !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	color: #171411 !important;
	visibility: visible !important;
	overflow: hidden;
}

#plp-catalog-modal .plp-exercise-card__title-row--meta {
	display: grid !important;
	visibility: visible !important;
}

#plp-catalog-modal .plp-exercise-card--a6 .plp-exercise-card__meta-row {
	/* "Equipment" uppercase needs more than 5.25rem */
	grid-template-columns: 7.25rem minmax(0, 1fr);
}

#plp-catalog-modal .plp-exercise-card__meta-label {
	overflow: visible;
}

#plp-catalog-modal .plp-exercise-card__meta-label-text {
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}

#plp-catalog-modal .plp-exercise-card__site,
#plp-catalog-modal footer.plp-exercise-card__site {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	flex: 0 0 auto;
	margin-top: 0.15rem;
	padding-top: 0.35rem;
	border: 0 !important;
	border-top: 1px dashed var(--retro-sys-color-outline-variant, #ddd) !important;
	background: transparent !important;
	min-width: 0;
	visibility: visible !important;
}

#plp-catalog-modal .plp-exercise-card__image-btn,
#plp-catalog-modal .plp-exercise-card__video-btn,
#plp-catalog-modal .plp-exercise-card__video-fab,
#plp-catalog-modal .plp-exercise-card__qr-open {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

/* Isolated print root — avoids blank pages from fixed modal + visibility tricks */
#plp-catalog-print-root {
	display: none;
}

@media print {
	/* Prefer readable session/program pages over A6 card page size from backend.css */
	@page {
		size: auto;
		margin: 12mm;
	}

	html.plp-catalog-printing,
	html.plp-catalog-printing body {
		background: #fff !important;
	}

	html.plp-catalog-printing body > *:not(#plp-catalog-print-root) {
		display: none !important;
	}

	/* Override admin backend print rules that hide everything then only reveal .plp-guide */
	html.plp-catalog-printing body *,
	html.plp-catalog-printing #plp-catalog-print-root,
	html.plp-catalog-printing #plp-catalog-print-root * {
		visibility: visible !important;
	}

	html.plp-catalog-printing #plp-catalog-print-root {
		display: block !important;
		position: static !important;
		inset: auto !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 12mm !important;
		background: #fff !important;
		color: #111 !important;
	}

	html.plp-catalog-printing #plp-catalog-print-root .plp-guide__toolbar,
	html.plp-catalog-printing #plp-catalog-print-root .plp-catalog-movement-cards {
		display: none !important;
	}

	html.plp-catalog-printing #plp-catalog-print-root .plp-lesson-folio__masthead,
	html.plp-catalog-printing #plp-catalog-print-root .plp-program-guide__header {
		display: flex !important;
		flex-direction: column !important;
		gap: 0.45rem !important;
		margin: 0 0 1rem !important;
		visibility: visible !important;
	}

	html.plp-catalog-printing #plp-catalog-print-root .plp-lesson-folio__title,
	html.plp-catalog-printing #plp-catalog-print-root .plp-program-guide__title,
	html.plp-catalog-printing #plp-catalog-print-root .plp-lesson-folio__dek,
	html.plp-catalog-printing #plp-catalog-print-root .plp-program-guide__dek,
	html.plp-catalog-printing #plp-catalog-print-root .plp-lesson-folio__kicker,
	html.plp-catalog-printing #plp-catalog-print-root .plp-lesson-folio__byline,
	html.plp-catalog-printing #plp-catalog-print-root .plp-lesson-folio__diff {
		display: block !important;
		visibility: visible !important;
		color: #111 !important;
	}

	html.plp-catalog-printing #plp-catalog-print-root .plp-lesson-folio__dek:empty,
	html.plp-catalog-printing #plp-catalog-print-root .plp-program-guide__dek:empty {
		display: none !important;
	}

	html.plp-catalog-printing #plp-catalog-print-root .plp-exercise-card__qr-code img,
	html.plp-catalog-printing #plp-catalog-print-root .plp-exercise-card__qr-code canvas {
		display: block !important;
		visibility: visible !important;
		width: 100% !important;
		height: 100% !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	html.plp-catalog-printing #plp-catalog-print-root .plp-exercise-card__qr a::after,
	html.plp-catalog-printing #plp-catalog-print-root .plp-exercise-card__qr-open::after,
	html.plp-catalog-printing #plp-catalog-print-root .plp-exercise-card__site-url::after,
	html.plp-catalog-printing #plp-catalog-print-root .plp-guide--movement a::after {
		content: none !important;
		display: none !important;
	}

	html.plp-catalog-printing #plp-catalog-print-root .plp-exercise-card--a6,
	html.plp-catalog-printing #plp-catalog-print-root .plp-guide--movement {
		max-width: 105mm;
		margin: 0 auto;
	}

	html.plp-catalog-printing #plp-catalog-print-root .plp-guide--lesson,
	html.plp-catalog-printing #plp-catalog-print-root .plp-guide--program {
		max-width: 40rem;
		margin: 0 auto;
	}
}

.plp-catalog-item-editor__toolbar {
	display: grid;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding: 0.85rem;
	border: 1px dashed var(--retro-sys-color-outline-variant, #ccc);
	border-radius: 8px;
	background: var(--retro-sys-color-surface-variant, #f7f7f7);
}

@media (max-width: 480px) {
	.plp-portal__stats {
		grid-template-columns: 1fr;
	}

	.plp-homework-move {
		grid-template-columns: 1fr;
	}

	.plp-homework-move__img {
		width: 100%;
		max-width: 12rem;
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.plp-homework-card .plp-homework-note-save {
		max-width: none;
	}

	.plp-catalog-item__trigger {
		grid-template-columns: 1fr;
	}

	.plp-catalog-item__media {
		max-width: 12rem;
		margin-inline: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.plp-homework-card,
	.plp-homework-difficulty__btn {
		transition: none;
	}
}