@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend:wght@100..900&display=swap');

*::-webkit-scrollbar { display: none; }
* { scrollbar-width: none; }

body {
	margin: 0;
	padding: 0;

	--base-lightness: 0.55;
	--chroma: 0.15;

	--color-operational-context: oklch(var(--base-lightness) var(--chroma) 80);
	--color-system-needs: oklch(var(--base-lightness) var(--chroma) 280);
	--color-principle-solution: oklch(var(--base-lightness) var(--chroma) 150);
	--color-technical-solution: oklch(var(--base-lightness) var(--chroma) 250);
	--color-configuration-management: oklch(var(--base-lightness) 0 330);

	font-family: "Inter";
	font-size: 16px;
	color: white;
	width: 100dvw;
	height: 100dvh;
}

span[contenteditable="plaintext-only"],
p[contenteditable="plaintext-only"] {
	/* all: unset; */
	outline: none;
}
p {
	margin: 15px 0;
}
p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }
.writable {
	min-width: 1ch;
	min-height: 1lh;
	text-align: left;
	cursor: text;
	transition: border-color 0.3s;
}
.writable:hover, span[contenteditable="plaintext-only"] {
	border-color: white;
}

.writable.unset {
	font-size: 12px;
	color: oklch(0.5 0 0);
}

.root {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: oklch(0.1286 0 0);
	display: grid;
	grid-template-rows: min-content auto min-content;
}

.body {
	box-sizing: border-box;
	position: relative;
	overflow-y: scroll;
}

.footer {
	background-color: black;
}

.tab {
	display: inline-block;
	padding: 5px 10px;
	color: oklch(0.5 0.002 248);
	font-size: 12px;
	cursor: pointer;
	transition: color 0.1s, background-color 0.1s;
	position: relative;

	&:hover {
		color: oklch(1.0 0 0);
		background-color: oklch(0.1286 0 0);
	}
	&.selected:not(:hover) {
		color: oklch(0.7 0 0);
		background-color: oklch(0.1286 0 0);
	}

	&:not(.selected):not(:hover) .icon::before {
		filter: brightness(50%);
	}

	& .text {
		display: inline-block;
		max-width: 20ch;
		white-space: nowrap;
		overflow: hidden;
		mask-image: linear-gradient(to right, rgba(0,0,0,1) 18ch, rgba(0,0,0,0));
	}

	& .close {
		opacity: 0;
		display: inline-block;
		background-color: black;
		color: oklch(0.5 0.002 248);
		outline: 1px solid currentColor;
		width: 12px;
		height: 12px;
		border-radius: 50%;
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		transition: opacity 0.1, color 0.1;
	}
	&:hover .close {
		opacity: 1;
	}
	& .close:hover {
		color: oklch(1.0 0 0);
	}
	& .close::before {
		content: "x";
		position: absolute;
		top: 50%;
		left: 50%;
		font-size: 10px;
		transform: translate(calc(-50% - 0.5px), calc(-50% - 1px));
	}
}

.diagram-view {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
}

@font-face {
    font-family: "Arctic";
    src: url("arctic.ttf"), url("arctic.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

.header {
	display: grid;
	grid-template-columns: max-content max-content max-content auto max-content;
	align-items: baseline;
	grid-gap: 50px;
	padding-right: 10px;
}

.icon { font-family: "Arctic"; font-size: 1.2em; }
.icon::before {
	display: inline-block;
	transform: translateY(-20%) scale(180%);
	margin-right: 5px;
}
.icon.icon-arctic-logo::before { content: "A"; }
.icon.icon-perspective-technical-solution::before { content: "B"; }
.icon.icon-perspective-principle-solution::before { content: "C"; }
.icon.icon-perspective-operational-context::before { content: "D"; }
.icon.icon-perspective-system-needs::before { content: "E"; }
.icon.icon-perspective-configuration-management::before { content: "F"; }
.icon.icon-import::before { content: "G"; }
.icon.icon-export::before { content: "H"; }
.icon.icon-arrow::before { content: "I"; }
.icon.icon-block-diagram::before { content: "J"; }
.icon.icon-scenario-diagram::before { content: "K"; }
.icon.icon-bug::before { content: "L"; }
.icon.icon-link::before { content: "M"; }
.icon.icon-hardware::before { content: "N"; color: oklch(0.7 0.15 90); }
.icon.icon-component::before { content: "O"; color: oklch(0.7 0.15 268);}
.icon.icon-function::before { content: "P"; color: oklch(0.7 0.15 150); }
.icon.icon-markdown::before {
	content: "M";
	font-family: "Lexend";
	font-weight: bold;
	display: inline-block;
	transform: translateY(-10%) scale(120%);
	margin-right: 5px;
}
.icon.icon-unknown::before {
	content: " ";
	box-sizing: border-box;
	display: inline-block;
	width: 0.8ch;
	height: 0.8ch;
	margin-right: 0.5ch;
	margin-left: 0.5ch;
	margin-bottom: 0.2ch;
	border-radius: 50%;
	background-color: currentColor;
}

.logo {
	font-family: "Lexend";
	font-size: 2em;
	letter-spacing: -5%;
	padding-left: 5px;

	& .icon {
		font-size: 0.65em;
	}
}

.project-title { font-size: 24px; }
.project-version { margin-left: 10px; font-size: 12px; color: oklch(0.5 0 0); }

.shaded {
	box-shadow:
		0px 0px 4px 0px hsla(0, 0%, 0%, 0.25),
		inset 0px -4px 4px -4px oklch(from var(--color) 0.0 c h / 0.25),
		inset 0px 4px 4px -4px oklch(from var(--color) 1.0 c h / 0.25);
}

canvas {
	display: block;
	box-sizing: border-box;
}

.selected-perspective {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}
.selected-perspective:hover .perspective {
	outline: 2px solid white;
}
.selected-perspective:hover .perspective-label-inline {
	color: white;
}

.perspective {
	display: inline-flex;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	outline-color: transparent;
	transition: outline-color 0.3s;

	& .icon {
		font-size: 30px;
		transform: translateY(-2px);

		&::before {
			display: inline;
			transform: none;
			margin: 0;
		}
	}
}

.perspective-operational-context {
	--color: var(--color-operational-context);
	background-color: var(--color);
	color: oklch(from var(--color) 0.8 c h);
}
.perspective-operational-context-2-system-needs {
	background: linear-gradient(in oklch to right, var(--color-operational-context), var(--color-system-needs));
}
.perspective-system-needs {
	--color: var(--color-system-needs);
	background-color: var(--color);
	color: oklch(from var(--color) 0.8 c h);
}
.perspective-system-needs-2-principle-solution {
	background: linear-gradient(in oklch to right, var(--color-system-needs), var(--color-principle-solution));
}
.perspective-principle-solution {
	--color: var(--color-principle-solution);
	background-color: var(--color);
	color: oklch(from var(--color) 0.8 c h);
}
.perspective-principle-solution-2-technical-solution {
	background: linear-gradient(in oklch to right, var(--color-principle-solution), var(--color-technical-solution));
}
.perspective-technical-solution {
	--color: var(--color-technical-solution);
	background-color: var(--color);
	color: oklch(from var(--color) 0.8 c h);
}
.perspective-technical-solution-2-configuration-management {
	background: linear-gradient(in oklch to right, var(--color-technical-solution), var(--color-configuration-management));
}
.perspective-configuration-management {
	--color: var(--color-configuration-management);
	background-color: var(--color);
	color: oklch(from var(--color) 0.8 c h);
}

.perspective-label-inline {
	margin-left: 10px;
	display: inline-flex;
	color: hsl(0, 0%, 70%);
	font-size: 14px;
	width: min-content;
	transition: color 0.3s;
	transform: translateY(-10px);
}

.selected-view {
	background-color: hsl(0, 0%, 8%);
	border-radius: 20px;
	color: hsl(0, 0%, 70%);
	padding: 10px 20px;
	white-space: nowrap;
	transition: color 0.3s;
	width: min-content;
	font-size: 16px;
	cursor: pointer;

	&:hover {
		color: white;
	}
}

.import-export {
	display: flex;
	color: hsl(0, 0%, 30%);
	text-align: center;
	grid-template-columns: auto auto;
	grid-gap: 10px;
	font-size: 0.8em;
	transform: translateY(-1lh);
}

.button {
	all: unset;

	cursor: pointer;

	background-color: oklch(0.25 0.002 248);
	color: oklch(0.5 0 0);

	font-size: 12px;
	padding: 5px 10px;
	border-radius: 15px;
	user-select: none;
	margin: 5px 0px;

	&.no-background {
		background: none;
	}

	--transition-duration: 0.15s;
	outline: 1px solid transparent;
	transition:
		color var(--transition-duration),
		background-color var(--transition-duration),
		outline var(--transition-duration);

	&:hover {
		color: white;
		background-color: oklch(0.35 0.002 248);
		&.no-background {
			background: none;
		}
	}

	&.selected {
		outline: 1px solid oklch(0.7 0 0);
	}
	&:not(:first-child):not(:last-child) {
		margin: 5px;
	}
}

.overlay {
	box-sizing: border-box;
	display: inline-block;
	position: absolute;
	overflow: hidden;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.overlay-contents {
	box-sizing: border-box;
	border-radius: 5px;
	display: inline-block;
	position: sticky;
	overflow-y: scroll;
	pointer-events: all;
	max-height: calc(100% - 60px - 10px);
}

.hover-button {
	position: sticky;
	display: inline-block;
	width: 20px;
	height: 20px;
	text-align: center;
	line-height: 10px;
	background-color: oklch(0.5 0.15 248);
	border-radius: 5px;
	outline: 1px solid oklch(1.0 0 0);
	cursor: pointer;
	pointer-events: all;
	user-select: none;
}
.hover-button::before { content: "..."; }

@keyframes fade-in-animation {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
.fade-in { animation: fade-in-animation 0.1s linear; }
.fade-out { animation: fade-in-animation reverse 0.1s linear; }

.box {
	--color: oklch(0.2 0 0);
	background-color: var(--color);
	color: oklch(1.0 0 0);
	border-radius: 5px;
	overlay: hidden;
	border: 1px solid oklch(0.3 0 0);
}

.view-selection {
	margin: 20px;

	& .writable {
		background-color: oklch(0.15 0.002 248);
		padding: 10px 20px;
		border-radius: 15px;
		display: block;
		line-height: 20px;

		margin-bottom: 20px;

		&.unset {
			font-size: 12px;
			color: oklch(0.5 0 0);
		}
	}
}

.perspectives {
	display: grid;
	grid-template-columns: repeat(9, max-content);
	grid-gap: 30px;
	align-items: center;
	box-sizing: border-box;
	padding: 10px 20px 50px 20px;
	text-align: center;
	margin: 20px;
}

.perspectives > div {
	position: relative;
	overflow: visible;
	outline: 2px solid transparent;
	transition: outline-color 0.3s;
	width: 60px;
	height: 60px;
}

.perspectives > div .icon {
	font-size: 40px;
}

.perspectives .label {
	position: absolute;
	line-height: 1.25em;
	font-size: 16px;
	top: 100%;
	left: 50%;
	color: oklch(0.7 0 0);
	transform: translate(-50%, 5px);
	transition: color 0.3s;
}
.perspectives > div:hover, .perspectives > div.selected { outline-color: white; transition: color 0.3s; }
.perspectives > div:hover .label, .perspectives > div.selected .label { color: white; }

.menu-contents-item {
	box-sizing: border-box;
	padding: 5px 10px;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
	color: oklch(0.7 0 0);
	font-size: 12px;

	&:hover {
		color: white;
		background-color: oklch(0.3 0.002 248);
	}
	&[style="component"] {
		color: oklch(0.7 0.15 210);
	}
	&[style="function"] {
		color: oklch(0.7 0.15 160);
	}
	&[style="hardware"] {
		color: oklch(0.7 0.15 60);
	}
	&[style="delete"] {
		color: oklch(0.7 0.15 0);
	}
}
/* Diagram hover */
.diagram-hover-contents {
	--outline-color: oklch(1.0 0 0);
	--color: oklch(0.5 0.15 248);
	position: absolute;
	outline-offset: -1px;
}
.diagram-hover-contents .handle {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 6px;
	outline: 1px solid var(--outline-color);
	outline-offset: -1px;
	background-color: var(--color);
	transition: background-color 0.1s;
	cursor: default;
}
.diagram-hover-contents .handle:hover { background-color: var(--outline-color); }
.diagram-hover-contents .handle.nw { transform: translate(-50%, -50%); left: 0; top: 0; }
.diagram-hover-contents .handle.ne { transform: translate(50%, -50%); right: 0; top: 0; }
.diagram-hover-contents .handle.sw { transform: translate(-50%, 50%); left: 0; bottom: 0; }
.diagram-hover-contents .handle.se { transform: translate(50%, 50%); right: 0; bottom: 0; }
.diagram-hover-contents .handle.w { transform: translate(-50%, -50%); top: 50%; left: 0; }
.diagram-hover-contents .handle.e { transform: translate(50%, -50%); top: 50%; right: 0; }
.diagram-hover-contents .handle.n { transform: translate(-50%, -50%); top: 0; left: 50%; }
.diagram-hover-contents .handle.s { transform: translate(-50%, 50%); bottom: 0; left: 50%; }

.diagram-hover-contents .arrow {
	position: absolute;
	font-family: "Arctic";
	font-size: 30px;
	color: var(--color);
	-webkit-text-stroke: 1px var(--outline-color);
	transition: color 0.1s;
	cursor: default;
}
.diagram-hover-contents .arrow.e { transform: translateY(-50%); right: -35px; }
.diagram-hover-contents .arrow.w { transform: translateY(-50%) rotate(180deg); left: -35px; }
.diagram-hover-contents .arrow.n { transform: translateX(-50%) rotate(-90deg); top: -38px; }
.diagram-hover-contents .arrow.s { transform: translateX(-50%) rotate(90deg); bottom: -38px; }
.diagram-hover-contents .arrow:hover { color: var(--outline-color); }
.diagram-hover-contents .arrow::before {
	content: "I";
	position: relative;
	top: -4px;
}
.textbox {
	position: absolute;
	background-color: transparent;
	pointer-events: all;
}
.textbox:hover {
	cursor: text;
}

.details-container {
	box-sizing: border-box;
	display: grid;
	--main-content-width: calc(70ch + 2 * 20px);
	--side-content-width: calc((100% - var(--main-content-width)) / 2);
	grid-template-columns: var(--side-content-width) var(--main-content-width) var(--side-content-width);

	& .details-title {
		padding: 20px;
		text-align: center;
		line-height: 1.5em;
		height: 1lh;
		font-size: 24px;
	}
	& .details-box {
		background-color: oklch(0.16 0.00255 248.163);
		outline: 1px solid oklch(0.2 0.00821 264.442);
		padding: 20px;
		border-radius: 15px;
		margin-bottom: 20px;

		& a {
			text-decoration: none;
			color: oklch(0.7 0.15 248);
			cursor: pointer;
		}
		& a:before {
			font-family: "Arctic";
			font-size: 1.2em;
			content: "M";
		}
	}
	& .right {
		display: flex;
		justify-content: right;
		color: oklch(0.7 0 0);

		& h2 {
			font-size: 12px;
			color: oklch(0.4 0 0);
			font-weight: normal;
		}

		& .right-box {
			position: sticky;
			top: 76px;
			box-sizing: border-box;
			width: min(400px, calc(100% - 20px));
			height: min-content;
			background-color: #161718;
			outline: 1px solid #1e2024;
			padding: 20px;
			border-radius: 15px 0px 0px 15px;
		}
	}

}

.list-item {
	color: oklch(0.7 0 0);
	cursor: pointer;
	transition: color 0.15s;
	line-height: 20px;
	font-size: 14px;
	padding: 2px 0px;

	&:hover {
		color: white;
	}
}