/*
 * study.css
 * Tailwind-inspired study mode styling (token-based).
 */

.view-study {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(900px 480px at 15% -120px, color-mix(in srgb, var(--color-accent-light) 34%, transparent), transparent 74%),
		radial-gradient(760px 420px at 92% 0%, color-mix(in srgb, var(--color-surface) 68%, transparent), transparent 78%),
		var(--color-surface-alt);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--space-4);
}

.study-header {
	width: min(100%, 1120px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2);
	border: 1px solid color-mix(in srgb, var(--color-border-focus) 14%, var(--color-border));
	border-radius: var(--radius-xl);
	background: color-mix(in srgb, var(--color-surface) 96%, var(--color-surface-alt));
	box-shadow: var(--shadow-sm);
	backdrop-filter: blur(3px);
}

.study-header > :first-child,
.study-header > :last-child {
	justify-self: start;
}

.study-header > :last-child {
	justify-self: end;
}

.study-header-center {
	justify-self: center;
	text-align: center;
	min-width: 0;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--color-surface) 90%, var(--color-surface-alt));
	border: 1px solid color-mix(in srgb, var(--color-border-focus) 10%, var(--color-border));
}

.study-header .study-header-left,
.study-header .study-header-right {
	min-height: 2.5rem;
	padding: var(--space-2) var(--space-4);
	border-radius: var(--radius-full);
	border: 1px solid color-mix(in srgb, var(--color-border-focus) 12%, var(--color-border));
	background: color-mix(in srgb, var(--color-surface) 92%, var(--color-surface-alt));
	box-shadow: var(--shadow-sm);
}

.study-title {
	font-size: var(--text-lg);
	line-height: var(--leading-tight);
	letter-spacing: 0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.study-container {
	width: min(100%, 1120px);
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
	grid-template-rows: auto auto;
	grid-template-areas:
		"progress controls"
		"card controls";
	column-gap: var(--space-5);
	row-gap: var(--space-4);
	align-items: start;
}

.study-progress {
	grid-area: progress;
	width: min(100%, 780px);
	justify-self: center;
	height: 8px;
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--color-border) 72%, var(--color-surface));
	overflow: hidden;
	box-shadow: inset 0 1px 2px color-mix(in srgb, var(--color-text-primary) 10%, transparent);
}

.study-progress-fill {
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 76%, var(--color-accent-light)), var(--color-accent));
}

.card-flip {
	grid-area: card;
	width: min(100%, 780px);
	max-width: 780px;
	justify-self: center;
	border-radius: var(--radius-xl);
	box-shadow: 0 10px 22px color-mix(in srgb, var(--color-text-primary) 8%, transparent);
}

.study-container .card {
	width: 100%;
	max-width: 780px;
	min-height: clamp(360px, 52vh, 520px);
	padding: var(--space-7);
	border-radius: var(--radius-xl);
	border: 1px solid color-mix(in srgb, var(--color-border-focus) 12%, var(--color-border));
	box-shadow: var(--shadow-lg);
	background: color-mix(in srgb, var(--color-surface) 98%, var(--color-surface-alt));
}

.card-flip-front {
	background: var(--color-card-front);
}

.card-flip-back {
	background: var(--color-card-back);
	border-color: var(--color-card-back);
}

.card-flip-front .card-front {
	margin-bottom: var(--space-4);
	color: var(--color-text-primary);
	font-size: clamp(1.8rem, 2.4vw, 2.5rem);
	line-height: 1.22;
	text-align: center;
	text-wrap: balance;
}

.card-flip-back .card-back {
	margin-top: var(--space-3);
	color: var(--color-card-back-text);
	font-size: clamp(1.15rem, 1.8vw, 1.7rem);
	line-height: 1.45;
	text-align: center;
	text-wrap: balance;
}

.study-controls {
	grid-area: controls;
	align-self: start;
	width: 100%;
	position: sticky;
	top: var(--space-4);
	display: grid;
	grid-template-columns: 1fr;
	grid-auto-rows: min-content;
	gap: var(--space-3);
	padding: var(--space-4);
	border-radius: var(--radius-xl);
	border: 1px solid color-mix(in srgb, var(--color-border-focus) 12%, var(--color-border));
	background: color-mix(in srgb, var(--color-surface) 96%, var(--color-surface-alt));
	box-shadow: var(--shadow-sm);
	backdrop-filter: blur(3px);
}

.study-controls .btn {
	width: 100%;
	min-width: 0;
	justify-content: center;
	border-radius: var(--radius-full);
	padding: var(--space-3) var(--space-4);
	font-weight: var(--weight-medium);
}

.study-progress-text {
	order: -1;
	color: color-mix(in srgb, var(--color-text-secondary) 88%, var(--color-text-primary));
	font-family: var(--font-ui);
	font-size: var(--text-sm);
	line-height: var(--leading-normal);
	text-align: left;
	white-space: normal;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-md);
	background: color-mix(in srgb, var(--color-surface) 92%, var(--color-surface-alt));
	border: 1px solid color-mix(in srgb, var(--color-border-focus) 8%, var(--color-border));
}

@media (max-width: 1023px) {
	.view-study {
		background:
			radial-gradient(760px 360px at 14% -120px, color-mix(in srgb, var(--color-accent-light) 26%, transparent), transparent 72%),
			var(--color-surface-alt);
		padding: max(var(--space-4), env(safe-area-inset-top)) var(--space-4) max(var(--space-5), env(safe-area-inset-bottom));
	}

	.study-header {
		width: min(100%, 640px);
		margin: 0 auto var(--space-3);
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"left right"
			"title title";
		gap: var(--space-2);
		padding: var(--space-3);
	}

	.study-header-left {
		grid-area: left;
	}

	.study-header-center {
		grid-area: title;
		padding: var(--space-2) var(--space-3);
	}

	.study-header-right {
		grid-area: right;
	}

	.study-container {
		width: min(100%, 640px);
		max-width: 640px;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		row-gap: var(--space-4);
	}

	.study-progress,
	.card-flip,
	.study-controls,
	.study-container .card {
		width: 100%;
		max-width: 100%;
	}

	.study-container .card {
		min-height: clamp(220px, 48vh, 320px);
		padding: var(--space-4);
	}

	.card-flip-front .card-front {
		font-size: clamp(1.25rem, 6vw, 1.7rem);
		line-height: 1.3;
	}

	.card-flip-back .card-back {
		font-size: clamp(1rem, 5vw, 1.35rem);
		line-height: 1.4;
	}

	.study-controls {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-2);
		padding: var(--space-3);
	}

	.study-progress-text {
		grid-column: 1 / -1;
	}

	.study-title {
		font-size: var(--text-base);
	}
}

@media (max-width: 479px) {
	.study-header {
		padding: var(--space-2) var(--space-3);
	}

	.study-controls {
		grid-template-columns: 1fr;
	}

	.study-container .card {
		min-height: clamp(200px, 44vh, 260px);
	}
}

@media (min-width: 1280px) {
	.view-study {
		padding: var(--space-10) var(--space-8);
	}

	.study-header,
	.study-container {
		width: min(100%, 1240px);
		max-width: 1240px;
	}

	.study-container {
		grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
		column-gap: var(--space-6);
		row-gap: var(--space-5);
	}

	.card-flip,
	.study-progress,
	.study-container .card {
		max-width: 900px;
	}

	.study-container .card {
		min-height: clamp(420px, 54vh, 580px);
	}

	.study-progress-text {
		font-size: var(--text-base);
	}
}