/*
 * Static UML class diagrams.
 * Pages write the class boxes and relationships directly in HTML; this file only
 * handles class compartments, connector notation, and responsive layout.
 */

.uml-diagram {
	--uml-line-color: color-mix(in srgb, var(--secondary) 68%, var(--accent));
	--uml-line-width: 0.11rem;
	margin: 1.75rem 0;
	min-width: 0;
}

.uml-diagram__caption {
	margin: 0 0 1rem;
	color: var(--secondary);
	line-height: 1.6;
}

.uml-diagram__title {
	margin: 0;
	font-size: clamp(1.25rem, 3vw, 1.55rem);
	font-weight: 600;
	color: var(--primary);
	line-height: 1.2;
}

.uml-canvas {
	display: grid;
	grid-template-columns: 1fr 3rem 1fr 3rem 1fr;
	grid-auto-rows: min-content;
	align-items: normal;
	margin: 0 0 1rem;
}

.uml-node {
	position: relative;
	z-index: 1;
	width: 100%;
	margin: 0;
}

.uml-class {
	border: 0.15rem solid var(--quaternary);
	border-radius: 0.35rem;
	background-color: var(--frost-surface-bg);
	color: var(--secondary);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	box-shadow: 0 0.75rem 1.8rem rgba(0, 0, 0, 0.12);
}

.uml-class:hover {
	border-color: color-mix(in srgb, var(--accent) 45%, var(--quaternary));
}

.uml-class__nameplate {
	padding: 0.75rem 0.85rem;
	text-align: center;
	border-bottom: 0.15rem solid var(--quaternary);
}

.uml-class__stereotype {
	display: block;
	margin: 0 0 0.25rem;
	color: var(--accent);
	font-size: 0.78rem;
	line-height: 1.25;
}

.uml-class__name {
	margin: 0;
	color: var(--primary);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.uml-class__name--abstract {
	font-style: italic;
}

.uml-class__compartment {
	padding: 0.55rem 0.75rem;
	border-bottom: 0.15rem solid var(--quaternary);
	min-height: 2.2rem;
}

.uml-class__compartment:last-child {
	border-bottom: none;
}

.uml-class__members {
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: inherit;
	font-size: 0.82rem;
	line-height: 1.45;
}

.uml-class__members li {
	margin: 0.1rem 0;
	overflow-wrap: anywhere;
}

.uml-link {
	position: relative;
	color: var(--uml-line-color);
	pointer-events: none;
	z-index: 2;
	justify-self: stretch;
	align-self: stretch;
}

.uml-link__line {
	position: absolute;
	display: block;
	border-color: currentColor;
}

.uml-link--h {
	height: 1.2rem;
	align-self: start;
	margin-top: 4.5rem;
}

.uml-link--h .uml-link__line {
	top: 50%;
	left: 0;
	right: 0;
	border-top: var(--uml-line-width) solid currentColor;
}

.uml-link--v {
	width: auto;
	min-height: 4rem;
}

.uml-link--v .uml-link__line {
	top: 0;
	bottom: 0;
	left: 50%;
	border-left: var(--uml-line-width) solid currentColor;
}

.uml-link--dependency .uml-link__line,
.uml-link--realization .uml-link__line {
	border-top-style: dashed;
	border-left-style: dashed;
}

.uml-link__diamond {
	position: absolute;
	width: 0.66rem;
	height: 0.66rem;
	background: currentColor;
	transform: rotate(45deg);
}

.uml-link--diamond-right .uml-link__diamond {
	top: calc(50% - 0.31rem);
	right: -0.12rem;
}

.uml-link--diamond-right .uml-link__line,
.uml-link--arrow-right .uml-link__line {
	right: 0.58rem;
}

.uml-link--diamond-left .uml-link__diamond {
	top: calc(50% - 0.31rem);
	left: -0.12rem;
}

.uml-link--diamond-left .uml-link__line,
.uml-link--arrow-left .uml-link__line {
	left: 0.58rem;
}

.uml-link--diamond-bottom .uml-link__diamond {
	left: calc(50% - 0.31rem);
	bottom: -0.12rem;
}

.uml-link--diamond-bottom .uml-link__line,
.uml-link--arrow-down .uml-link__line {
	bottom: 0.58rem;
}

.uml-link__arrow {
	position: absolute;
	width: 0.52rem;
	height: 0.52rem;
	border-top: var(--uml-line-width) solid currentColor;
	border-right: var(--uml-line-width) solid currentColor;
	background: transparent;
}

.uml-link--arrow-right .uml-link__arrow {
	top: calc(50% - 0.28rem);
	right: 0;
	transform: rotate(45deg);
}

.uml-link--arrow-left .uml-link__arrow {
	top: calc(50% - 0.28rem);
	left: 0;
	transform: rotate(225deg);
}

.uml-link--arrow-down .uml-link__arrow {
	left: calc(50% - 0.28rem);
	bottom: 0;
	transform: rotate(135deg);
}

.uml-link__label {
	position: absolute;
	left: 50%;
	top: -1.15rem;
	transform: translateX(-50%);
	padding: 0 0.35rem;
	background: color-mix(in srgb, var(--cinquinary) 96%, transparent);
	color: var(--accent);
	font-size: 0.76rem;
	white-space: nowrap;
}

.uml-diagram__note {
	margin: 0.75rem 0 0;
	padding: 1rem 1.15rem;
	border-left: 0.15rem solid var(--accent);
	border-radius: 0 0.35rem 0.35rem 0;
	background: color-mix(in srgb, var(--cinquinary) 70%, transparent);
	color: var(--secondary);
	font-size: 0.98rem;
	line-height: 1.55;
	max-width: 68ch;
}

.uml-relations {
	display: none;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--secondary);
	font-size: 0.9rem;
	line-height: 1.5;
}

.uml-relations li {
	margin: 0.3rem 0;
}

.uml-relation {
	font-family: inherit;
	color: var(--primary);
}

/* Explicit Grid Placements */

.uml-diagram--cozy .uml-node--display,
.uml-diagram--flashcard .uml-node--shell {
	grid-area: 1 / 1 / 2 / 2;
}

.uml-diagram--cozy .uml-node--game,
.uml-diagram--flashcard .uml-node--study-ui {
	grid-area: 1 / 3 / 2 / 4;
}

.uml-diagram--cozy .uml-node--input,
.uml-diagram--flashcard .uml-node--controller {
	grid-area: 1 / 5 / 2 / 6;
}

.uml-diagram--cozy .uml-node--session,
.uml-diagram--flashcard .uml-node--db {
	grid-area: 3 / 1 / 4 / 2;
}

.uml-diagram--cozy .uml-node--orchestrator,
.uml-diagram--flashcard .uml-node--php {
	grid-area: 3 / 3 / 4 / 4;
}

.uml-diagram--cozy .uml-node--tilemap,
.uml-diagram--flashcard .uml-node--transport {
	grid-area: 3 / 5 / 4 / 6;
}

.uml-link--cozy-display-game,
.uml-link--flashcard-shell-study {
	grid-area: 1 / 2 / 2 / 3;
}

.uml-link--cozy-input-game,
.uml-link--flashcard-study-controller {
	grid-area: 1 / 4 / 2 / 5;
}

.uml-link--cozy-game-orchestrator,
.uml-link--flashcard-controller-transport {
	grid-area: 2 / 3 / 3 / 4; /* Centered layout fixes */
}
.uml-link--cozy-game-orchestrator {
	grid-area: 2 / 3 / 3 / 4;
}
.uml-link--flashcard-controller-transport {
	grid-area: 2 / 5 / 3 / 6;
}

.uml-link--cozy-session-orchestrator,
.uml-link--flashcard-php-db {
	grid-area: 3 / 2 / 4 / 3;
}

.uml-link--cozy-orchestrator-tilemap,
.uml-link--flashcard-transport-php {
	grid-area: 3 / 4 / 4 / 5;
}

@media (max-width: 58rem) {
	.uml-canvas {
		position: static;
		display: grid;
		grid-template-columns: 1fr;
		gap: 0.85rem;
		min-height: 0;
	}

	.uml-node {
		position: static;
		width: auto;
	}

	.uml-link {
		display: none;
	}

	.uml-relations {
		display: block;
	}
}