$default-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, $alpha: 0) { @return adjust-color($color, $lightness: $pct, $alpha: $alpha) }
@function tone($pct, $alpha: 0)         { @return hsla(var(--hue),                   100%, 65% + $pct, 1 + $alpha) }
@function vtone($pct, $vary, $alpha: 0) { @return hsla(calc(var(--hue) + $vary),     100%, 65% + $pct, 1 + $alpha) }
@function otone($pct, $alpha: 0)        { @return hsla(calc(var(--hue) + var(--co)), 100%, 65% + $pct, 1 + $alpha) }

:root { --hue: 323; --co: 0; }
body {
	@extend %sans;
	background-color: tone(-55%);
	color: tone(25%);
	font-size: 14pt;
	margin: 0;
	padding: 0;
}
::selection {
	color: tone(-60%);
	background-color: tone(-10%);
}
::placeholder {
	color: tone(0,-0.3);
	font-style: italic;
}
a[href] {
	color: tone(10%);
	text-decoration-color: tone(10%,-0.5);
	text-decoration-skip-ink: all;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.1em;
	&:hover, &:focus {
		color: white;
		text-shadow: 0 0 15px tone(20%);
		text-decoration-color: tone(10%,-0.1);
		outline: none;
	}
	&.button { @extend %button; }
}
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: tone(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 tone(0%,-0.8);
}

%button {
	@extend %sans;
	font-size: 14pt;
	box-sizing: border-box;
	padding: 0.1in 0.2in;
	border: 1px solid black;
	color: otone(25%);
	text-shadow: 1px 1px black;
	text-decoration: none;
	text-align: center;
	cursor: default;
	user-select: none;
	-webkit-user-drag: none;
	-webkit-app-region: no-drag;
	--icon: url(/s/heart.webp);
	background-image: linear-gradient(to bottom,
		otone(-47%),
		otone(-50%) 15%,
		otone(-50%) 75%,
		otone(-53%)
	);
	&:hover, &:focus {
		@extend %glow;
		outline: none;
		color: tone(-55%);
		text-shadow: none;
		background: linear-gradient(to bottom,
			otone(-27%),
			otone(-30%) 15%,
			otone(-30%) 75%,
			otone(-35%)
		);
	}
	&:active {
		color: black;
		padding-bottom: calc(0.1in - 2px);
		padding-top: calc(0.1in + 2px);
		background: linear-gradient(to top,
			otone(-25%),
			otone(-30%) 15%,
			otone(-30%) 75%,
			otone(-35%)
		);
	}
}

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

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

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

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

h1 { margin-top: 0 }

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.10in;
				//padding: calc((25% - 1em)/2) 0.15in;
				&, &::after { transition: 0.3s; }
				text-shadow: 1px 1px 1px black;
				&:hover{
					transform: scale(1.2);
				}
			}
			> a[href].bell {
				content: url(/s/bell.svg);
				height: 2em;
				padding: 0.125in 0.10in;
				filter: drop-shadow(1px 1px 3px tone(-5%));
				&:hover {
					filter: drop-shadow(1px 1px 3px tone(-5%))
						drop-shadow(0 0 10px tone(-5%));
				}
			}
		}
	}
}

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;
	padding-bottom: 0.1in;
	background-color: tone(-45%,-0.3);
	border: {
		left: 1px solid black;
		right: 1px solid black;
	}
}

.id {
	color: tone(25%,-0.4);
	> .nym {
		font-weight: bold;
		color: tone(25%);
	}
	> .xid {
		color: tone(20%,-0.1);
		font-size: 80%;
		vertical-align: text-top;
	}
}

div.profile {
	padding: 0.1in;
	position: relative;
	display: grid;
	margin-bottom: 0.4in;
	grid-template-columns: 2fr 1fr;
	grid-template-rows: max-content 1fr;
	width: 100%;
	> .banner {
		grid-column: 1 / 3;
		grid-row: 1 / 2;
		display: grid;
		grid-template-columns: 1.1in 1fr;
		grid-template-rows: max-content 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;
		}
		> .bio {
			grid-column: 2 / 3;
			grid-row: 2 / 3;
		}
	}
	> .stats {
		grid-column: 3 / 4;
		grid-row: 1 / 3;
		display: flex;
		flex-flow: column;
		> * { flex-grow: 1; }
		table { td, th { text-align: center; } }
	}
	> form.actions {
		grid-column: 1 / 3; grid-row: 2 / 3;
		padding-top: 0.075in;
		flex-wrap: wrap;
		display: flex;
		justify-content: center;
		align-items: center;
		> a[href] {
			display: block;
			margin: 0.025in 0.05in;
		}
		> hr {
			all: unset;
			display: block;
			height: 0.3in;
			width: 1px;
			border-left: 1px solid rgba(0,0,0,0.6);
		}
	}
}

.epithet {
	display: inline-block;
	background: tone(20%);
	color: tone(-45%);
	text-shadow: 0 0 3px tone(-30%, -0.4);
	border-radius: 2px;
	padding: 6px;
	padding-top: 2px;
	padding-bottom: 4px;
	font-size: 80%;
	vertical-align: top;
	font-weight: 300;
	letter-spacing: 0.5px;
	margin: 0 5pt;
	// transform: scale(80%) translateX(-10pt); // cheating!
}

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

//body.error .message {
.message {
	@extend %box;
	display: block;
	width: 4in;
	margin:auto;
	padding: 0.5in;
	text-align: center;
	menu:first-of-type { margin-top: 0.3in; }
	img.icon { width: 1.875in; height: 1.875in; }
}

div.login {
	@extend %box;
	width: 4in;
	padding: 0.4in;
	> .msg {
		text-align: center;
		padding: 0.3in;
	}
	> .msg:first-child { padding-top: 0; }
	> .user {
		width: max-content; margin: auto;
		background: tone(-20%,-0.3);
		border: 1px solid black;
		color: tone(-50%);
		padding: 0.1in;
		> img { display: block; width: 1in; height: 1in; margin: auto; 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 1.5fr;
	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/6; grid-row: 1/2; height: 3in;
		resize: vertical;
		margin-bottom: 0.08in;
	}
	> input[name="acl"] { grid-column: 2/3; grid-row: 2/3; }
	> button[value="post"] { grid-column: 5/6; grid-row: 2/3; }
	> button[value="attach"] { 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.svg) no-repeat;
	background-size: 20pt;
	background-position: 0.05in 50%;
	&:focus {
		background: url(/s/padlock.svg) 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: tone(-55%);
	border: 1px inset tone(-20%);
	padding: 2px 6px;
	font-size: 1.5ex !important;
	letter-spacing: 1.3px;
	padding-bottom: 3px;
	border-radius: 2px;
	vertical-align: baseline;
	box-shadow: 1px 1px 1px black;
}

div.thread {
	margin-left: 0.3in;
	& + article.post { margin-top: 0.3in; }
}

a[href].username {
	>.nym { font-weight: bold; }
	color: tone(0%,-0.4);
	> span.nym { color: tone(10%) }
	> span.handle { color: tone(-5%) }
	&:hover {
		> span.nym { color: white; }
		> span.handle { color: tone(15%) }
	}
}
article.post {
	@extend %box;
	display: grid;
	margin: unset;
	grid-template-columns: 1in 1fr max-content max-content;
	grid-template-rows: min-content max-content;
	margin-bottom: 0.1in;
	transition: 0.2s ease-out;
	>.avatar {
		grid-column: 1/2; grid-row: 1/2;
		img { display: block; width: 1in; height: 1in; margin:0; }
		background: linear-gradient(to bottom, tone(-53%), tone(-57%));
	}
	>a[href].username {
		display: block;
		grid-column: 1/3;
		grid-row: 2/3;
		text-align: left;
		text-decoration: none;
		padding: 0.1in;
		padding-left: 0.15in;
		background: linear-gradient(to right, tone(-55%), transparent);
	}
	>.content {
		grid-column: 2/5; grid-row: 1/2;
		padding: 0.2in;
		@extend %serif;
		font-size: 110%;
		text-align: justify;
		color: tone(25%);
	}
	> a[href].permalink {
		display: block;
		grid-column: 4/5; grid-row: 2/3;
		font-size: 90%;
		text-align: right;
		padding: 0.1in;
		padding-right: 0.15in;
		font-style: italic;
		background: linear-gradient(to left, tone(-55%,-0.5), transparent);
	}
	div.stats {
		display: flex;
		grid-column: 3/4; grid-row: 2/3;
		justify-content: center;
		> .like, > .rt {
			margin: 0.5em 0.3em;
			padding-left: 1.3em;
			background-size: 1.1em;
			background-repeat: no-repeat;
			min-width: 0.3em;
			&:focus {
				outline: none;
				opacity: 0.9 !important;
				filter: drop-shadow(0 0 7px tone(-10%));
			}
			&:empty {
				transition: 0.3s;
				opacity: 0.0001; // qutebrowser won't show hints if opacity=0 :(
				&:hover, &:focus { opacity: 0.6 !important; }
			}
		}
		> .like { background-image: url(/s/heart.webp); }
		> .rt   { background-image: url(/s/retweet.webp); }
	}

	// used for keyboard navigation
	&.live-selected {
		//margin-left: 0.4in; margin-right: -0.4in;
		box-shadow: 0 0 0 1px tone(15%), 0 0 1in tone(5%, -0.5);
		transform: scale(1.05) translateX(0.1in);
	}
}

article.post:hover div.stats { > .like, > .rt { &:empty {opacity: 0.3;} } }

a[href].rawlink {
	@extend %teletype;
}

body.doc main {
	@extend %serif;
	text-align: justify;
	li { margin-top: 0.05in; }
	li:first-child { margin-top: 0; }
	h1, h2, h3, h4, h5, h6 {
		background: linear-gradient(to right, tone(-50%), transparent);
		margin-left: -0.4in;
		padding-left: 0.2in;
		text-shadow: 0 2px 0 black;
	}
}

%navmenu, body.profile main > menu {
	margin-left: -0.25in;
	grid-column: 1/2; grid-row: 1/2;
	background: linear-gradient(to bottom, tone(-45%),tone(-55%));
	border: 1px solid black;
	padding: 0.1in;
	> a[href] {
		@extend %button;
		display: block;
		text-align: left;
	}
	> a[href] + a[href] {
		border-top: none;
	}
	hr {
		border: none;
	}
}

menu { all: unset; display: block; }
body.conf main {
	display: grid;
	grid-template-columns: 2in 1fr;
	grid-template-rows: max-content 1fr;
	> menu { @extend %navmenu; }
	> .panel {
		grid-column: 2/3; grid-row: 1/3;
		padding-left: 0.15in;
		> h1 {
			padding-bottom: 0.1in;
			margin-bottom: 0.1in;
			margin-left: -0.15in;
			padding-left: 0.15in;
			padding-top: 0.12in;
			background: linear-gradient(to right, tone(-50%), tone(-50%,-0.7));
			border: 1px solid tone(-55%);
			border-left: none;
			text-shadow: 1px 1px 0 black;
		}
	}

}

hr {
	border: none;
	border-top: 1px solid tone(-30%);
	border-bottom: 1px solid tone(-55%);
}
form {
	margin: 0.15in 0;
	> p:first-child { margin-top: 0; }
	> p:last-child { margin-bottom: 0; }
	.elem {
		margin: 0.1in 0;
		> label,summary { display:block; font-weight: bold; padding: 0.03in 0; }
		> .txtbox {
			@extend %serif;
			box-sizing: border-box;
			padding: 0.08in 0.1in;
			border: 1px solid black;
			background: tone(-55%);
		}
		> input, textarea, .txtbox {
			display: block;
			width: 100%;
		}
		> textarea { resize: vertical; min-height: 2in; }
	}
	body.conf & > %button { margin-left: 50%; width: 50%; }
	.elem-group {
		display: flex;
		flex-flow: row;
		> .elem {
			flex-shrink: 1;
			flex-grow: 1;
			margin-left: 0.1in;
			&:first-child { margin-left: 0; }
		}
		> .small { flex-shrink: 5; }
	}
}

menu.choice {
	display: flex;
	&.horizontal {
		flex-flow: row-reverse wrap;
		justify-content: space-evenly;
	}
	&.vertical {
		flex-flow: column;
		margin-left: 50%;
	}
	&.vertical-float {
		flex-flow: column;
		float: right;
		width: 40%;
		margin-left: 0.1in;
	}
	> %button {
		flex-basis: min-content;
		flex-grow: 1;
		display: block; margin: 2px;
	}
}

.check-panel {
	display: flex;
	flex-flow: row wrap;
	> label {
		display: block;
		box-sizing: border-box;
		width: calc(50% - 0.2in);
		padding: 0.1in 0.1in;
		margin: 0.1in 0.1in;
		background: tone(-45%);
		border: 1px solid black;
		text-shadow: 1px 1px black;
		flex-grow: 1;
		&:focus-within {
			border: 1px inset tone(-10%);
			background: tone(-50%);
		}
	}
	input[type="checkbox"] {
		-webkit-appearance: none;
		padding: 0.5em;
		background: tone(-35%);
		border: 1px outset tone(-50%);
		vertical-align: bottom;
		box-shadow: 0 1px tone(-50%);
		&:checked {
			border: 1px inset tone(-35%);
			background: tone(-60%);
			box-shadow: 0 1px tone(-40%);
		}
		&:focus {
			border-color: tone(10%);
			outline: none;
		}
	}
}

@keyframes flashup {
	0% { opacity: 0; transform: scale(0.8); }
	10% { opacity: 1; transform: scale(1.1); }
	80% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(0.9) translateY(-0.12in); display: none; }
}
.flashmsg {
	display: block;
	position: fixed;
	top: 1.3in;
	max-width: 3in;
	padding: 0.4in 0.2in;
	left: 0; right: 0;
	text-align: center;
	text-shadow: 0 0 15px tone(10%);
	margin: auto;
	background: linear-gradient(to bottom, tone(-49%), tone(-43%,-0.1));
	border: 1px solid tone(0%);
	border-radius: 3px;
	box-shadow: 0 0 50px tone(-55%);
	color: white;
	animation: ease forwards flashup;
	//cubic-bezier(0.4, 0.63, 0.6, 0.31)
	animation-duration: 2.5s;
}

form.action-bar {
	display: flex;
	> * {
		flex-grow: 1;
		flex-basis: 0;
		margin-left: 0.1in;
	}
	> *:first-child {
		margin-left: 0;
	}
}

.color-picker {
	/* implemented using javascript, alas */
	@extend %box;
	label { text-shadow: 1px 1px black; }
	padding: 0.1in;
}

ul.user-list {
	list-style-type: none;
	margin: 0.5em 0;
	padding: 0;
	box-shadow: 0 0 10px -3px black inset;
	border: 1px solid tone(-50%);
	li {
		background-color: tone(-20%, -0.8);
		padding: 0.5em;
		.regalia { margin-right: 0.3em; vertical-align: bottom; }
		&:nth-child(odd) {
			background-color: tone(-30%, -0.8);
		}
	}
}

ul.remarks {
	margin: 0; padding: 0;
	list-style-type: none;
	li {
		border-top: 1px solid otone(-22%);
		border-bottom: 1px solid otone(-53%);
		box-shadow: 0 1px 1px otone(-57%);
		text-shadow: 1px 1px otone(-60%);
		border-radius: 3px;
		background: otone(-25%,-0.4);
		color: otone(25%);
		text-align: center;
		padding: 0.3em 0;
		margin: 0.2em 0.1em;
		cursor: default;
	}
}

:is(%button, a[href]).neg { --co:  30 }
:is(%button, a[href]).pos { --co: -30 }

.pick-list {
	display: flex;
	flex-flow: row wrap;
	padding: 0.1in;
	background-color: tone(-50%);
	border: 1px solid tone(-53%);
	border-top: 1px solid tone(-57%);
	border-bottom: 1px solid tone(-45%);
	margin: 0.3em 0;
	details & { border: none; background: none; }
	> input[type="radio"], > input[type="checkbox"] {
		display: none;
		&+label {
			display: block;
			flex-grow: 1;
			padding: 0.08in 0.05in;
			margin: 0.03in;
			flex-basis: 15%;
			cursor: pointer;
			transition: 0.3s;
			text-align: center;
			border: 1px solid transparent;
			text-shadow: 1px 1px black;
			color: otone(15%);
			border-radius: 4px;
			&:nth-child(7n+1) { --co: -10 } //silly hack
			&:nth-child(7n+2) { --co: -35 }
			&:nth-child(7n+3) { --co: -20 }
			&:nth-child(7n+4) { --co: -50 }
			&:nth-child(7n+5) { --co: -40 }
			&:nth-child(7n+6) { --co: -5  }
			&:nth-child(7n+7) { --co: -25 }
		}
		&+label:hover {
			background-color: otone(-35%);
			color: white;
		}
		&:checked+label {
			border-top: 1px solid otone(-10%);
			border-bottom: 1px solid otone(-50%);
			background: linear-gradient(to bottom, otone(-25%,-0.2), otone(-28%,-0.3) 35%, otone(-30%,-0.5));
			color: white;
			box-shadow: 0 0 0 1px tone(-60%);
			&:hover {
				border-top: 1px solid otone(10%);
				border-bottom: 1px solid otone(-60%);
				font-weight: bold;
			}
		}
	}
}

details {
	//border: 1px solid tone(-60%);
	border-top: 1px solid tone(-40%);
	border-bottom: 1px solid tone(-60%);
	border-radius: 3px;
	padding: 0.05in 0.3in;
	margin: 0.08in 0;
	// background: linear-gradient(to top, tone(-55%), tone(-50%));
	background: tone(-50%);
	& > summary {
		display: block;
		margin: 0 -0.25in;
		cursor: pointer;
		user-select: none;
		text-decoration: underline;
		text-decoration-color: tone(10%,-0.5);
		text-underline-offset: 0.1em;
		text-shadow: 1px 1px black;
		font-weight: normal;

		&:hover {
			color: white;
			text-decoration-color: tone(10%,-0.1);
		}
		&::marker { display: none; }
		&::-webkit-details-marker { display: none; }
		&::before {
			display: inline-block;
			content: '➤';
			padding: 0 0.3em;
			color: tone(-30%);
			transition: 0.4s;
		}
	}
	&[open] {
		// background: linear-gradient(to bottom, tone(-55%), tone(-50%));
		border-bottom: 1px solid tone(-40%);
		border-top: 1px solid tone(-60%);
		> summary {
			font-weight: bold;
			&::before {
				transform: rotate(90deg) scale(1.1);
				color: tone(-20%);
				text-shadow: 0 0 8px tone(-30%);
			}
		}
	}
}

div.lede {
	display: grid;
	grid-template-columns: 1fr min-content;
	grid-template-rows: 1.5em 1fr;
	padding: 0.1in 0.3in;
	margin: 0 -0.2in;
	margin-top: 0.2in;
	& + & { margin-top: 0; }
	border-radius: 3px;
	background: linear-gradient(to bottom, tone(-40%,-0.5), transparent);
	border-top: 1px solid tone(-5%,-0.7);
	> .promo {
		grid-row: 1/2; grid-column: 1/2;
		font-style: italic;
		font-size: 90%;
		color: tone(-10%);
		> img {
			vertical-align: middle;
			margin-right: 0.4em;
			width: 1em; height: 1em;
		}
	}
	> a[href].del {
		grid-row: 1/2; grid-column: 2/3;
		text-decoration: none;
	}
	> .post {
		grid-row: 2/3; grid-column: 1/3;
	}
}

body.notices {
	form { text-align: center; }
	div.notice {
		padding: 0.15in;
		background: linear-gradient(to bottom, tone(10%, -0.9), transparent);
		border: 1px solid tone(-60%);
		& + div.notice { border-top: none; }
		&.rt, &.like, &.reply { &::before {
			display: inline-block;
			width: 1em; height: 1em;
			margin-right: 1ex;
			background-size: contain;
			vertical-align: bottom;
			content: ""; // 🙄
		}}
		&.rt::before    { background-image: url(/s/retweet.webp); }
		&.like::before  { background-image: url(/s/heart.webp);   }
		&.reply::before { background-image: url(/s/reply.webp);   }
		> .action {
			display: inline-block;
			color: tone(5%);
			> .id {
				display: inline-block;
				> img {
					width: 1em; height: 1em;
					vertical-align: middle;
					margin-right: 0.5ex;
				}
			}
		}
		> a[href].quote {
			&::before { content: "“"; }
			&::after { content: "”"; }
			font-style: italic; color: tone(20%);
			text-decoration: none;
		}
		> article.post {
			margin: 0.1in 0.2in;
			margin-left: 0.4in;
		}
	}
}
