/* Complement Bootstrap with some simple visual adjustments */

body {
	font-family:
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
}

/* Ensure content is reasonably centered on tall screens */
main {
	padding: 1rem 0 2rem;
}

/* ---------- Flashcard flip ---------- */

.card-container {
	perspective: 1000px;
}

.card-inner {
	position: relative;
	width: 100%;
	height: 260px;
	transform-style: preserve-3d;
	transition: transform 0.6s;
}

/* state "flipped" */
.card-container.flipped .card-inner {
	transform: rotateY(180deg);
}

/* faces of the card */
.card-face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	border-radius: 0.375rem;
	overflow: hidden;
}

/* front */

.card-front {
	background-color: #ffffff;
}

/* back */
.card-back {
	background-color: #ffffff;
	transform: rotateY(180deg);
}

/* Card content */
.card-face .card-body {
	padding: 2rem 1.5rem;
}

/* Highlighted word */
#word,
#word-back {
	word-wrap: break-word;
}

/* Meaning with pleasant line breaks */
#meaning {
	white-space: pre-wrap;
}

/* Discreet progress */
#progress {
	color: #6c757d;
}

/* Very small screens */
@media (max-width: 400px) {
	.card-face .card-body {
		padding: 1.5rem 1rem;
	}
}

/* ---------- Daily activity graph ---------- */

#daily-graph {
	max-width: 340px;
	margin: 0 auto;
}

.daily-cell {
	width: 14px;
	height: 14px;
	border-radius: 2px;
	background-color: #e5e5e5; /* default: no study (gray) */
}

/* Optional: subtle border */
.daily-cell {
	border: 1px solid rgba(0, 0, 0, 0.03);
}