$color: hsl(323,100%,65%);
%sans { font-family: "Alegreya Sans", "Open Sans", sans-serif; }
%serif { font-family: Alegreya, GaramondNo8, "Garamond Premier Pro", "Adobe Garamond", Garamond, Junicode, serif; }
%teletype { font-family: "Inconsolata LGC", Inconsolata, monospace; font-size: 12pt !important; }

@function tone($pct) { @return adjust-color($color, $lightness: $pct) }

body {
	@extend %sans;
	background-color: adjust-color($color, $lightness: -55%);
	color: adjust-color($color, $lightness: 25%);
	font-size: 14pt;
	margin: 0;
	padding: 0;
}
a[href] {
	color: adjust-color($color, $lightness: 10%);
	&:hover {
		color: white;
		text-shadow: 0 0 15px adjust-color($color, $lightness: 20%);
	}
}
a[href^="//"],
a[href^="http://"],
a[href^="https://"] { // external link
	&:hover::after {
		color: black;
		background-color: white;
	}
	&::after {
		content: "↗";
		display: inline-block;
		color: black;
		margin-left: 4pt;
		background-color: adjust-color($color, $lightness: 10%);
		padding: 0 4px;
		text-shadow: none;
		padding-right: 5px;
		vertical-align: baseline;
		font-size: 80%;
	}
}

%content {
	width: 8in;
	margin: auto;
}

%glow {
	box-shadow: 0 0 20px adjust-color($color, $alpha: -0.8);
}

%button {
	@extend %sans;
	font-size: 14pt;
	padding: 0.1in 0.2in;
	border: 1px solid black;
	color: adjust-color($color, $lightness: 25%);
	text-shadow: 1px 1px black;
	text-decoration: none;
	text-align: center;
	background: linear-gradient(to bottom,
		adjust-color($color, $lightness: -45%),
		adjust-color($color, $lightness: -50%) 15%,
		adjust-color($color, $lightness: -50%) 75%,
		adjust-color($color, $lightness: -55%)
	);
	&:hover, &:focus {
		@extend %glow;
		outline: none;
		color: adjust-color($color, $lightness: -55%);
		text-shadow: none;
		background: linear-gradient(to bottom,
			adjust-color($color, $lightness: -25%),
			adjust-color($color, $lightness: -30%) 15%,
			adjust-color($color, $lightness: -30%) 75%,
			adjust-color($color, $lightness: -35%)
		);
	}
	&:active {
		color: black;
		padding-bottom: calc(0.1in - 2px);
		padding-top: calc(0.1in + 2px);
		background: linear-gradient(to top,
			adjust-color($color, $lightness: -25%),
			adjust-color($color, $lightness: -30%) 15%,
			adjust-color($color, $lightness: -30%) 75%,
			adjust-color($color, $lightness: -35%)
		);
	}
}

button { @extend %button;
	&:first-of-type {
		@extend %button;
		color: white;
		box-shadow: inset 0 1px  adjust-color($color, $lightness: -25%),
		            inset 0 -1px adjust-color($color, $lightness: -50%);
		background: linear-gradient(to bottom,
			adjust-color($color, $lightness: -35%),
			adjust-color($color, $lightness: -40%) 15%,
			adjust-color($color, $lightness: -40%) 75%,
			adjust-color($color, $lightness: -45%)
		);
		&:hover, &:focus {
			box-shadow: inset 0 1px  adjust-color($color, $lightness: -15%),
						inset 0 -1px adjust-color($color, $lightness: -40%);
		}
		&:active {
			box-shadow: inset 0 1px  adjust-color($color, $lightness: -50%),
						inset 0 -1px adjust-color($color, $lightness: -25%);
			background: linear-gradient(to top,
				adjust-color($color, $lightness: -30%),
				adjust-color($color, $lightness: -35%) 15%,
				adjust-color($color, $lightness: -35%) 75%,
				adjust-color($color, $lightness: -40%)
			);
		}
	}
	&:hover { font-weight: bold; }
}

$grad-ui-focus: linear-gradient(to bottom,
	adjust-color($color, $lightness: -50%),
	adjust-color($color, $lightness: -35%)
);

input[type='text'], input[type='password'], textarea {
	@extend %serif;
	padding: 0.08in 0.1in;
	border: 1px solid black;
	background: linear-gradient(to bottom,
		adjust-color($color, $lightness: -55%),
		adjust-color($color, $lightness: -40%)
	);
	font-size: 16pt;
	color: adjust-color($color, $lightness: 25%);
	box-shadow: inset 0 0 20px -3px adjust-color($color, $lightness: -55%);
	&:focus {
		color: white;
		border-image: linear-gradient(to bottom,
			adjust-color($color, $lightness: -10%),
			adjust-color($color, $lightness: -30%)
		) 1 / 1px;
		background: $grad-ui-focus;
		outline: none;
		@extend %glow;
	}
}

@mixin glass {
	@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
		backdrop-filter: blur(40px);
		-webkit-backdrop-filter: blur(40px);
		background-color: adjust-color($color, $lightness: -53%, $alpha: -0.7);
	}
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		background-color: adjust-color($color, $lightness: -53%, $alpha: -0.1);
	}
}

header {
	position: fixed;
	height: min-content;
	width: 100vw;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid black;
	z-index: 1;
	@include glass;
	background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.3));
	> div {
		position: relative;
		max-width: 10in;
		margin: auto;

		display: grid;
		grid-template-columns: 1fr max-content;
		grid-template-rows: 1fr;
		h1 {
			all: unset;
			display: block;
			font-size: 1.4em;
			padding: 0.25in 0;
			text-shadow: 2px 2px 1px black;
			grid-column: 1/2; grid-row: 1/2;
		}
		nav {
			all: unset;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			grid-column: 2/3; grid-row: 1/2;
			> a[href] {
				display: block;
				padding: 0.25in 0.15in;
				//padding: calc((25% - 1em)/2) 0.15in;
				&, &::after { transition: 0.3s; }
				text-shadow: 1px 1px 1px black;
				&:hover{
					transform: scale(120%);
				}
			}
		}
	}
}

main {
	@extend %content;
	display: block;
	position: relative;
	min-height: calc(100vh - 1.1in);
	margin-top: 0;
	margin-bottom: 0;
	padding: 0 0.4in;
	padding-top: 1.1in;
	background-color: adjust-color($color, $lightness: -45%, $alpha: 0.4);
	border: {
		left: 1px solid black;
		right: 1px solid black;
	}
}

div.profile {
	@extend %box;
	padding: 0.1in;
	position: relative;
	display: grid;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: 1fr 1fr;
	width: 100%;
	> .banner {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
		display: grid;
		grid-template-columns: 1.1in 1fr;
		grid-template-rows: 0.3in 1fr;
		> .avatar {
			display: block;
			width: 1in; height: 1in;
			grid-column: 1 / 2;
			grid-row: 1 / 3;
			border: 1px solid black;
		}
		> .id {
			grid-column: 2 / 3;
			grid-row: 1 / 2;
			color: adjust-color($color, $lightness: 25%, $alpha: -0.4);
			> .nym {
				font-weight: bold;
				color: adjust-color($color, $lightness: 25%);
			}
			> .xid {
				color: adjust-color($color, $lightness: 20%, $alpha: -0.1);
				font-size: 80%;
				vertical-align: text-top;
			}
		}
		> .bio {
			grid-column: 2 / 3;
			grid-row: 2 / 3;
		}
	}
	> .stats {
		grid-column: 3 / 4;
		grid-row: 1 / 3;
	}
	> .menu {
		grid-column: 1 / 3;
		grid-row: 2 / 3;
		display: flex;
		justify-content: center;
		align-items: center;
		> a[href] {
			@extend %button;
			display: block;
			margin: 0 0.05in;
		}
		> hr {
			all: unset;
			display: block;
			height: 0.3in;
			width: 1px;
			border-left: 1px solid rgba(0,0,0,0.6);
		}
	}
}

%box {
	margin: auto;
	border: 1px solid adjust-color($color, $lightness: -55%);
	border-bottom: 3px solid black;
	box-shadow: 0 0 1px black;
	border-image: linear-gradient(to bottom,
		adjust-color($color, $lightness: -40%),
		adjust-color($color, $lightness: -52%) 10%,
		adjust-color($color, $lightness: -55%) 90%,
		adjust-color($color, $lightness: -60%)
	) 1 / 1px;
	background: linear-gradient(to bottom,
		adjust-color($color, $lightness: -58%),
		adjust-color($color, $lightness: -55%) 10%,
		adjust-color($color, $lightness: -50%) 80%,
		adjust-color($color, $lightness: -45%)
	);
	// outline: 1px solid black;
}

body.error .message {
	@extend %box;
	width: 4in;
	margin:auto;
	padding: 0.5in;
	text-align: center;
}

div.login {
	@extend %box;
	width: 4in;
	padding: 0.4in;
	> .msg {
		text-align: center;
		padding: 0.3in;
	}
	> .msg:first-child { padding-top: 0; }
	> .user {
		width: min-content; margin: auto;
		background: adjust-color($color, $lightness: -20%, $alpha: -0.3);
		border: 1px solid black;
		color: adjust-color($color, $lightness: -50%);
		padding: 0.1in;
		> img { width: 1in; height: 1in; border: 1px solid black; }
		> .name { @extend %serif; text-align: center; font-size: 130%; font-weight: bold; margin-top: 0.08in; }
	}
	>form {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1.2em 1fr 1fr;
		grid-gap: 5px;
		> label, input, button { display: block; }
		> label { grid-column: 1 / 3; grid-row: 1/2; font-weight: bold }
		> input { grid-column: 1 / 3; grid-row: 2/3; }
		> button { grid-column: 2 / 3; grid-row: 3/4; }
		> a { @extend %button; grid-column: 1 / 2; grid-row: 3/4; }
	}
}

form.compose {
	@extend %box;
	display: grid;
	grid-template-columns: 1.1in 2fr min-content 1fr;
	grid-template-rows: 1fr min-content;
	grid-gap: 2px;
	padding: 0.1in;
	> img { grid-column: 1/2; grid-row: 1/3; width: 1in; height: 1in;}
	> textarea { grid-column: 2/5; grid-row: 1/2; height: 3in;}
	> input[name="acl"] { grid-column: 2/3; grid-row: 2/3; }
	> button { grid-column: 4/5; grid-row: 2/3; }
	a.help[href] { margin-right: 0.05in }
}

a.help[href] {
	display: block;
	text-align: center;
	padding: 0.09in 0.2in;
	background: tone(-40%);
	border: 1px solid black;
	font-weight: bold;
	text-decoration: none;
	cursor: help;
}

input.acl {
	@extend %teletype;
	background: url(/s/padlock.webp) no-repeat;
	background-size: 20pt;
	background-position: 0.05in 50%;
	&:focus {
		background: url(/s/padlock.webp) no-repeat, $grad-ui-focus;
		background-size: 20pt;
		background-position: 0.05in 50%;
	};
	padding-left: 0.40in;
}

div.modal {
	@extend %box;
	position: fixed;
	display: none;
	left: 0; right: 0; bottom: 0; top: 0;
	max-width: 7in;
	margin: 1in auto;
	padding: 0.2in 0.3in;
	&:target { display: block; }
	box-shadow: 0 0 4in 5in rgba(0,0,0,0.5);
	z-index: 2;
	> div {
		height: 100%;
		overflow-y: scroll;
		>p:first-of-type { margin-top: 0; }
	}
	>a[href="#0"] { // close link
		@extend %button;
		cursor: default;
		display: block;
		position: absolute;
		top: -0.3in;
		right: 0.1in;
		margin: 0.1in;
		padding: 0.1in;
		&:hover { font-weight: bold; }
	}
}

code {
	@extend %teletype;
	background: adjust-color($color, $lightness: -50%);
	border: 1px solid adjust-color($color, $lightness: -20%);
	padding: 2px 6px;
	text-shadow: 2px 2px black;
}
