/*
 * Friends Plugin — Default Theme
 * Pure CSS (no Sass, no Spectre). Uses native CSS nesting.
 */

/* ========================================================================
   Animations
   ======================================================================== */

@keyframes loading {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes slide-down {
	0% {
		opacity: 0;
		transform: translateY(-1.6rem);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ========================================================================
   Normalize (forked from normalize.css v5)
   ======================================================================== */

html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
}

article, aside, footer, header, nav, section {
	display: block;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

figcaption, figure, main {
	display: block;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

a {
	background-color: transparent;
	-webkit-text-decoration-skip: objects;
}

a:active, a:hover {
	outline-width: 0;
}

address {
	font-style: normal;
}

b, strong {
	font-weight: bolder;
}

code, kbd, pre, samp {
	font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
	font-size: 1em;
}

dfn {
	font-style: italic;
}

small {
	font-size: 80%;
	font-weight: 400;
}

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

audio, video {
	display: inline-block;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

img {
	border-style: none;
}

svg:not(:root) {
	overflow: hidden;
}

button, input, optgroup, select, textarea {
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

button, input {
	overflow: visible;
}

button, select {
	text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	display: inline-block;
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

[type="checkbox"], [type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

details, menu {
	display: block;
}

summary {
	display: list-item;
	outline: none;
}

canvas {
	display: inline-block;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

/* ========================================================================
   Base
   ======================================================================== */

*, *::before, *::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
	color-scheme: light dark;
	font-size: 20px;
	line-height: 1.5;
	-webkit-tap-highlight-color: transparent;
}

:root {
	--friends-color-background: #f7f8f9;
	--friends-color-surface: #fff;
	--friends-color-surface-alt: #f7f7f7;
	--friends-color-surface-muted: #f8fafc;
	--friends-color-border: #eee;
	--friends-color-border-strong: #d6d4e8;
	--friends-color-text: #48427c;
	--friends-color-text-muted: #667085;
	--friends-color-text-soft: #999;
	--friends-color-link: #2e5bec;
	--friends-color-link-hover: #1341d4;
	--friends-color-link-visited: #5d80f0;
	--friends-color-error: #c0392b;
	--friends-color-focus: rgba(46, 91, 236, 0.2);
	--friends-color-menu-hover: #dde5fc;
	--friends-color-note-background: #f7f7f7;
	--friends-color-info-background: #eef6ff;
	--friends-color-selected-background: #edf2ff;
}

@media (prefers-color-scheme: dark) {
	:root {
		--friends-color-background: #10131a;
		--friends-color-surface: #171b24;
		--friends-color-surface-alt: #202633;
		--friends-color-surface-muted: #141821;
		--friends-color-border: #2c3342;
		--friends-color-border-strong: #3c465b;
		--friends-color-text: #e7eaf2;
		--friends-color-text-muted: #a6adbb;
		--friends-color-text-soft: #8e96a6;
		--friends-color-link: #8fb1ff;
		--friends-color-link-hover: #b8ccff;
		--friends-color-link-visited: #c4b5fd;
		--friends-color-error: #ff8f8f;
		--friends-color-focus: rgba(143, 177, 255, 0.28);
		--friends-color-menu-hover: #22304a;
		--friends-color-note-background: #202633;
		--friends-color-info-background: #162438;
		--friends-color-selected-background: #1c2b45;
	}
}

body {
	background: var(--friends-color-background);
	color: var(--friends-color-text);
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	font-size: .8rem;
	overflow-x: hidden;
	text-rendering: optimizeLegibility;
}

a {
	color: var(--friends-color-link);
	outline: none;
	text-decoration: none;

	&:focus {
		box-shadow: 0 0 0 .1rem var(--friends-color-focus);
	}

	&:focus, &:hover, &:active, &.active {
		color: var(--friends-color-link-hover);
		text-decoration: underline;
	}

	&:visited {
		color: var(--friends-color-link-visited);
	}
}

div {
	min-width: 0;
}

/* ========================================================================
   Typography
   ======================================================================== */

h1, h2, h3, h4, h5, h6 {
	color: inherit;
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: .5em;
	margin-top: 0;
}

h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.6rem; }
h3, .h3 { font-size: 1.4rem; }
h4, .h4 { font-size: 1.2rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: .8rem; }

p {
	margin: 0 0 1.2rem;
}

a, ins, u {
	text-decoration-skip: ink edges;
}

abbr[title] {
	border-bottom: .05rem dotted;
	cursor: help;
	text-decoration: none;
}

kbd {
	border-radius: .1rem;
	line-height: 1.25;
	padding: .1rem .2rem;
	background: #3e396b;
	color: #fff;
	font-size: .7rem;
}

mark {
	background: #ffe9b3;
	color: var(--friends-color-text);
	border-bottom: .05rem solid #ffd470;
	border-radius: .1rem;
	padding: .05rem .1rem 0;
}

blockquote {
	border-left: .1rem solid var(--friends-color-border);
	margin-left: 0;
	padding: .4rem .8rem;

	& p:last-child {
		margin-bottom: 0;
	}
}

ul, ol {
	margin: .8rem 0 .8rem .8rem;
	padding: 0;

	& ul, & ol {
		margin: .8rem 0 .8rem .8rem;
	}

	& li {
		margin-top: .4rem;
	}
}

ul {
	list-style: disc inside;

	& ul {
		list-style-type: circle;
	}
}

ol {
	list-style: decimal inside;

	& ol {
		list-style-type: lower-alpha;
	}
}

dl {
	& dt { font-weight: bold; }
	& dd { margin: .4rem 0 .8rem 0; }
}

/* ========================================================================
   CJK Font Families
   ======================================================================== */

html:lang(zh), html:lang(zh-Hans), .lang-zh, .lang-zh-hans {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
}

html:lang(zh-Hant), .lang-zh-hant {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
}

html:lang(ja), .lang-ja {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
}

html:lang(ko), .lang-ko {
	font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
}

:lang(zh), :lang(ja), .lang-cjk {
	& ins, & u {
		border-bottom: .05rem solid;
		text-decoration: none;
	}

	& del + del, & del + s, & ins + ins, & ins + u,
	& s + del, & s + s, & u + ins, & u + u {
		margin-left: .125em;
	}
}

/* ========================================================================
   Forms
   ======================================================================== */

.form-group {
	&:not(:last-child) {
		margin-bottom: .4rem;
	}
}

fieldset {
	margin-bottom: .8rem;
}

legend {
	font-size: .9rem;
	font-weight: 500;
	margin-bottom: .8rem;
}

.form-label {
	display: block;
	line-height: 1.2rem;
	padding: .3rem 0;

	&.label-sm { font-size: .7rem; padding: .1rem 0; }
	&.label-lg { font-size: .9rem; padding: .4rem 0; }
}

.form-input {
	appearance: none;
	background: var(--friends-color-surface);
	background-image: none;
	border: .05rem solid var(--friends-color-border-strong);
	border-radius: .1rem;
	color: var(--friends-color-text);
	display: block;
	font-size: .8rem;
	height: 1.8rem;
	line-height: 1.2rem;
	max-width: 100%;
	outline: none;
	padding: .25rem .4rem;
	position: relative;
	transition: background .2s, border .2s, box-shadow .2s, color .2s;
	width: 100%;

	&:focus {
		box-shadow: 0 0 0 .1rem var(--friends-color-focus);
		border-color: var(--friends-color-link);
	}

	&::placeholder { color: var(--friends-color-text-soft); }
	&.input-sm { font-size: .7rem; height: 1.4rem; padding: .05rem .3rem; }
	&.input-lg { font-size: .9rem; height: 2rem; padding: .35rem .6rem; }
	&.input-inline { display: inline-block; vertical-align: middle; width: auto; }
	&[type="file"] { height: auto; }
}

textarea.form-input {
	height: auto;
}

.form-input-hint {
	color: var(--friends-color-text-soft);
	font-size: .7rem;
	margin-top: .2rem;
}

.form-select {
	appearance: none;
	border: .05rem solid var(--friends-color-border-strong);
	border-radius: .1rem;
	color: inherit;
	font-size: .8rem;
	height: 1.8rem;
	line-height: 1.2rem;
	outline: none;
	padding: .25rem .4rem;
	vertical-align: middle;
	width: 100%;
	background: var(--friends-color-surface);

	&:focus {
		box-shadow: 0 0 0 .1rem var(--friends-color-focus);
		border-color: var(--friends-color-link);
	}

	&::-ms-expand { display: none; }

	&:not([multiple]):not([size]) {
		background: var(--friends-color-surface) url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='%23667189'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E") no-repeat right .35rem center / .4rem .5rem;
		padding-right: 1.2rem;
	}

	&[size], &[multiple] {
		height: auto;
		padding: .25rem .4rem;

		& option { padding: .1rem .2rem; }
	}
}

.has-icon-left, .has-icon-right {
	position: relative;

	& .form-icon {
		height: .8rem;
		margin: 0 .25rem;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		width: .8rem;
		z-index: 2;
	}
}

.has-icon-left {
	& .form-icon { left: .05rem; }
	& .form-input { padding-left: 1.3rem; }
}

.has-icon-right {
	& .form-icon { right: .05rem; }
	& .form-input { padding-right: 1.3rem; }
}

.form-checkbox, .form-radio, .form-switch {
	display: block;
	line-height: 1.2rem;
	margin: .2rem 0;
	min-height: 1.4rem;
	padding: .1rem .4rem .1rem 1.2rem;
	position: relative;

	& input {
		clip: rect(0, 0, 0, 0);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		position: absolute;
		width: 1px;

		&:focus + .form-icon {
			box-shadow: 0 0 0 .1rem var(--friends-color-focus);
			border-color: var(--friends-color-link);
		}

		&:checked + .form-icon {
			background: #2e5bec;
			border-color: #2e5bec;
		}
	}

	& .form-icon {
		border: .05rem solid var(--friends-color-border-strong);
		cursor: pointer;
		display: inline-block;
		position: absolute;
		transition: background .2s, border .2s, box-shadow .2s, color .2s;
	}
}

.form-checkbox, .form-radio {
	& .form-icon {
		background: var(--friends-color-surface);
		height: .8rem;
		left: 0;
		top: .3rem;
		width: .8rem;
	}

	& input:active + .form-icon { background: var(--friends-color-surface-alt); }
}

.form-checkbox .form-icon { border-radius: .1rem; }

.form-checkbox input:checked + .form-icon::before {
	background-clip: padding-box;
	border: .1rem solid #fff;
	border-left-width: 0;
	border-top-width: 0;
	content: "";
	height: 9px;
	left: 50%;
	margin-left: -3px;
	margin-top: -6px;
	position: absolute;
	top: 50%;
	transform: rotate(45deg);
	width: 6px;
}

.form-checkbox input:indeterminate + .form-icon {
	background: #2e5bec;
	border-color: #2e5bec;

	&::before {
		background: #fff;
		content: "";
		height: 2px;
		left: 50%;
		margin-left: -5px;
		margin-top: -1px;
		position: absolute;
		top: 50%;
		width: 10px;
	}
}

.form-radio .form-icon { border-radius: 50%; }

.form-radio input:checked + .form-icon::before {
	background: #fff;
	border-radius: 50%;
	content: "";
	height: 6px;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 6px;
}

.form-switch {
	padding-left: 2rem;

	& .form-icon {
		background: var(--friends-color-border-strong);
		background-clip: padding-box;
		border-radius: .45rem;
		height: .9rem;
		left: 0;
		top: .25rem;
		width: 1.6rem;

		&::before {
			background: var(--friends-color-surface);
			border-radius: 50%;
			content: "";
			display: block;
			height: .8rem;
			left: 0;
			position: absolute;
			top: 0;
			transition: background .2s, border .2s, box-shadow .2s, color .2s, left .2s;
			width: .8rem;
		}
	}

	& input:checked + .form-icon::before { left: 14px; }
	& input:active + .form-icon::before { background: var(--friends-color-surface); }
}

.input-group {
	display: flex;

	& .input-group-addon {
		background: var(--friends-color-surface);
		border: .05rem solid var(--friends-color-border-strong);
		border-radius: .1rem;
		line-height: 1.2rem;
		padding: .25rem .4rem;
		white-space: nowrap;
	}

	& .form-input, & .form-select { flex: 1 1 auto; width: 1%; }
	& .input-group-btn { z-index: 1; }

	& .form-input, & .form-select, & .input-group-addon, & .input-group-btn {
		&:first-child:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; }
		&:not(:first-child):not(:last-child) { border-radius: 0; margin-left: -.05rem; }
		&:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: -.05rem; }
		&:focus { z-index: 2; }
	}

	& .form-select { width: auto; }
	&.input-inline { display: inline-flex; }
}

.form-input:disabled, .form-input.disabled,
.form-select:disabled, .form-select.disabled {
	background-color: var(--friends-color-surface-alt);
	cursor: not-allowed;
	opacity: .5;
}

.form-input[readonly] { background-color: var(--friends-color-surface); }

input:disabled + .form-icon, input.disabled + .form-icon {
	background: var(--friends-color-surface-alt);
	cursor: not-allowed;
	opacity: .5;
}

.form-horizontal {
	padding: .4rem 0;

	& .form-group { display: flex; flex-wrap: wrap; }
}

.form-inline { display: inline-block; }

/* ========================================================================
   Buttons
   ======================================================================== */

.btn {
	appearance: none;
	background: var(--friends-color-surface);
	border: .05rem solid var(--friends-color-link);
	border-radius: .1rem;
	color: var(--friends-color-link);
	cursor: pointer;
	display: inline-block;
	font-size: .8rem;
	height: 1.8rem;
	line-height: 1.2rem;
	outline: none;
	padding: .25rem .4rem;
	text-align: center;
	text-decoration: none;
	transition: background .2s, border .2s, box-shadow .2s, color .2s;
	user-select: none;
	vertical-align: middle;
	white-space: nowrap;

	&:focus { box-shadow: 0 0 0 .1rem var(--friends-color-focus); }

	&:focus, &:hover {
		background: var(--friends-color-menu-hover);
		border-color: #2050eb;
		text-decoration: none;
	}

	&:active, &.active {
		background: #2050eb;
		border-color: #1845d6;
		color: #fff;
		text-decoration: none;
	}

	&[disabled], &:disabled, &.disabled {
		cursor: default;
		opacity: .5;
		pointer-events: none;
	}

	&.btn-primary {
		background: #2e5bec;
		border-color: #2050eb;
		color: #fff;

		&:focus, &:hover { background: #1d4be9; border-color: #1845d6; color: #fff; }
		&:active, &.active { background: #1845d6; border-color: #1340c6; color: #fff; }
	}

	&.btn-link {
		background: transparent;
		border-color: transparent;
		color: var(--friends-color-link);

		&:focus, &:hover, &:active, &.active { color: var(--friends-color-link-hover); }
	}

	&.btn-sm { font-size: .7rem; height: 1.4rem; padding: .05rem .3rem; }
	&.btn-lg { font-size: .9rem; height: 2rem; padding: .35rem .6rem; }
	&.btn-block { display: block; width: 100%; }

	&.btn-action {
		width: 1.8rem;
		padding-left: 0;
		padding-right: 0;

		&.btn-sm { width: 1.4rem; }
		&.btn-lg { width: 2rem; }
	}

	&.btn-clear {
		background: transparent;
		border: 0;
		color: currentColor;
		height: 1rem;
		line-height: .8rem;
		margin-left: .2rem;
		margin-right: -2px;
		opacity: 1;
		padding: .1rem;
		text-decoration: none;
		width: 1rem;

		&:focus, &:hover { background: rgba(255, 255, 255, .5); opacity: .95; }
		&::before { content: "\2715"; }
	}
}

.btn-group {
	display: inline-flex;
	flex-wrap: wrap;

	& .btn {
		flex: 1 0 auto;

		&:first-child:not(:last-child) { border-bottom-right-radius: 0; border-top-right-radius: 0; }
		&:not(:first-child):not(:last-child) { border-radius: 0; margin-left: -.05rem; }
		&:last-child:not(:first-child) { border-bottom-left-radius: 0; border-top-left-radius: 0; margin-left: -.05rem; }
		&:focus, &:hover, &:active, &.active { z-index: 1; }
	}

	&.btn-group-block {
		display: flex;

		& .btn { flex: 1 0 0; }
	}
}

/* ========================================================================
   Layout
   ======================================================================== */

.container {
	margin-left: auto;
	margin-right: auto;
	padding-left: .4rem;
	padding-right: .4rem;
	width: 100%;
}

.cols, .columns {
	display: flex;
	flex-wrap: wrap;
	margin-left: -.4rem;
	margin-right: -.4rem;

	&.col-gapless {
		margin-left: 0;
		margin-right: 0;

		& > .column { padding-left: 0; padding-right: 0; }
	}

	&.col-oneline { flex-wrap: nowrap; overflow-x: auto; }
}

[class~="col-"], .column {
	flex: 1;
	max-width: 100%;
	padding-left: .4rem;
	padding-right: .4rem;

	&.col-12, &.col-11, &.col-10, &.col-9, &.col-8, &.col-7,
	&.col-6, &.col-5, &.col-4, &.col-3, &.col-2, &.col-1, &.col-auto {
		flex: none;
	}
}

.col-12 { width: 100%; }
.col-11 { width: 91.66666667%; }
.col-10 { width: 83.33333333%; }
.col-9 { width: 75%; }
.col-8 { width: 66.66666667%; }
.col-7 { width: 58.33333333%; }
.col-6 { width: 50%; }
.col-5 { width: 41.66666667%; }
.col-4 { width: 33.33333333%; }
.col-3 { width: 25%; }
.col-2 { width: 16.66666667%; }
.col-1 { width: 8.33333333%; }
.col-auto { flex: 0 0 auto; max-width: none; width: auto; }
.col-mx-auto { margin-left: auto; margin-right: auto; }
.col-ml-auto { margin-left: auto; }
.col-mr-auto { margin-right: auto; }

/* ========================================================================
   Navbar
   ======================================================================== */

.navbar {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	& .navbar-section {
		align-items: center;
		display: flex;
		flex: 1 0 0;

		&:not(:first-child):last-child { justify-content: flex-end; }
	}

	& .navbar-center { align-items: center; display: flex; flex: 0 0 auto; }
	& .navbar-brand { font-size: .9rem; text-decoration: none; }
}

/* ========================================================================
   Off-Canvas
   ======================================================================== */

.off-canvas {
	display: flex;
	flex-flow: nowrap;
	height: 100%;
	position: relative;
	width: 100%;

	& .off-canvas-toggle {
		display: block;
		position: absolute;
		top: .4rem;
		transition: none;
		z-index: 1;
		left: .4rem;
	}

	& .off-canvas-sidebar {
		background: var(--friends-color-surface);
		bottom: 0;
		min-width: 10rem;
		overflow-y: auto;
		position: fixed;
		top: 0;
		transition: transform .25s;
		z-index: 200;
		left: 0;
		transform: translateX(-100%);
	}

	& .off-canvas-content {
		flex: 1 1 auto;
		height: 100%;
		padding: .4rem .4rem .4rem 4rem;
	}

	& .off-canvas-overlay {
		background: rgba(62, 57, 107, .1);
		border-color: transparent;
		border-radius: 0;
		bottom: 0;
		display: none;
		height: 100%;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		width: 100%;
	}

	& .off-canvas-sidebar:target,
	& .off-canvas-sidebar.active {
		transform: translateX(0);
	}

	& .off-canvas-sidebar:target ~ .off-canvas-overlay,
	& .off-canvas-sidebar.active ~ .off-canvas-overlay {
		display: block;
		z-index: 100;
	}
}

@media (min-width: 960px) {
	.off-canvas.off-canvas-sidebar-show {
		& .off-canvas-toggle { display: none; }

		& .off-canvas-sidebar {
			flex: 0 0 auto;
			position: relative;
			transform: none;
		}

		& .off-canvas-overlay { display: none !important; }
	}
}

/* ========================================================================
   Accordions
   ======================================================================== */

.accordion {
	& input:checked ~ .accordion-header > .icon:first-child,
	&[open] > .accordion-header > .icon:first-child {
		transform: rotate(90deg);
	}

	& input:checked ~ .accordion-body,
	&[open] > .accordion-body {
		max-height: 50rem;
	}

	& .accordion-header {
		display: block;
		padding: .2rem .4rem;

		& .icon { transition: transform .25s; }
	}

	& .accordion-body {
		margin-bottom: .4rem;
		max-height: 0;
		overflow: hidden;
		transition: max-height .25s;
	}
}

summary.accordion-header::-webkit-details-marker {
	display: none;
}

/* ========================================================================
   Cards
   ======================================================================== */

.card {
	background: var(--friends-color-surface);
	border: .05rem solid var(--friends-color-border);
	border-radius: .1rem;
	display: flex;
	flex-direction: column;

	& .card-header, & .card-body, & .card-footer {
		padding: .8rem;
		padding-bottom: 0;

		&:last-child { padding-bottom: .8rem; }
	}

	& .card-body { flex: 1 1 auto; }

	& .card-image {
		padding-top: .8rem;

		&:first-child {
			padding-top: 0;

			& img { border-top-left-radius: .1rem; border-top-right-radius: .1rem; }
		}

		&:last-child img { border-bottom-left-radius: .1rem; border-bottom-right-radius: .1rem; }
	}
}

/* ========================================================================
   Navs
   ======================================================================== */

.nav {
	display: flex;
	flex-direction: column;
	list-style: none;
	margin: .2rem 0;

	& .nav-item a {
		color: #7770b3;
		padding: .2rem .4rem;
		text-decoration: none;

		&:focus, &:hover { color: #2e5bec; }
	}

	& .nav-item.active > a {
		color: #5d5899;
		font-weight: bold;

		&:focus, &:hover { color: #2e5bec; }
	}

	& .nav { margin-bottom: .4rem; margin-left: .8rem; }
}

/* ========================================================================
   Chips
   ======================================================================== */

.chip {
	align-items: center;
	background: var(--friends-color-surface-alt);
	border-radius: 5rem;
	display: inline-flex;
	font-size: 90%;
	height: 1.2rem;
	line-height: .8rem;
	margin: .1rem;
	max-width: 320px;
	overflow: hidden;
	padding: .2rem .4rem;
	text-decoration: none;
	text-overflow: ellipsis;
	vertical-align: middle;
	white-space: nowrap;

	&.active { background: #2e5bec; color: #fff; }
	& .avatar { margin-left: -.4rem; margin-right: .2rem; }
	& .btn-clear { border-radius: 50%; transform: scale(.75); }
}

.chip.activitypub-follower-check.is-following {
	background: #e4f6e8;
	color: #116329;
}

.chip.activitypub-follower-check.is-not-following {
	background: #fff4d6;
	color: #7a4d00;
}

.chip.activitypub-follower-check.is-error {
	background: #fde7e9;
	color: #8a2424;
}

/* ========================================================================
   Menus
   ======================================================================== */

.menu {
	box-shadow: 0 .05rem .15rem rgba(62, 57, 107, 0.3);
	background: var(--friends-color-surface);
	border-radius: .1rem;
	list-style: none;
	margin: 0;
	min-width: 180px;
	padding: .4rem;
	transform: translateY(.2rem);
	z-index: 300;

	&.menu-nav { background: transparent; box-shadow: none; }

	& .menu-item {
		margin-top: 0;
		padding: 0 .4rem;
		position: relative;
		text-decoration: none;

		& > a {
			border-radius: .1rem;
			color: inherit;
			display: block;
			margin: 0 -.4rem;
			padding: .2rem .4rem;
			text-decoration: none;

			&:focus, &:hover { background: var(--friends-color-menu-hover); color: var(--friends-color-link); }
			&:active, &.active { background: var(--friends-color-menu-hover); color: var(--friends-color-link); }
		}

		& + .menu-item { margin-top: .2rem; }
	}

	& .menu-badge {
		align-items: center;
		display: flex;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;

		& .label { margin-right: .4rem; }
	}
}

/* ========================================================================
   Autocomplete
   ======================================================================== */

.form-autocomplete {
	position: relative;

	& .form-autocomplete-input {
		align-content: flex-start;
		display: flex;
		flex-wrap: wrap;
		height: auto;
		min-height: 1.6rem;
		padding: .1rem;

		&.is-focused {
			box-shadow: 0 0 0 .1rem rgba(46, 91, 236, 0.2);
			border-color: #2e5bec;
		}

		& .form-input {
			border-color: transparent;
			box-shadow: none;
			display: inline-block;
			flex: 1 0 auto;
			height: 1.2rem;
			line-height: .8rem;
			margin: .1rem;
			width: auto;
		}
	}

	& .menu {
		left: 0;
		position: absolute;
		top: 100%;
		width: 100%;
	}

	&.autocomplete-oneline {
		& .form-autocomplete-input { flex-wrap: nowrap; overflow-x: auto; }
		& .chip { flex: 1 0 auto; }
	}
}

/* ========================================================================
   Loading
   ======================================================================== */

.loading {
	color: transparent !important;
	min-height: .8rem;
	pointer-events: none;
	position: relative;

	&::after {
		animation: loading 500ms infinite linear;
		background: transparent;
		border: .1rem solid #2e5bec;
		border-radius: 50%;
		border-right-color: transparent;
		border-top-color: transparent;
		content: "";
		display: block;
		height: .8rem;
		left: 50%;
		margin-left: -.4rem;
		margin-top: -.4rem;
		opacity: 1;
		padding: 0;
		position: absolute;
		top: 50%;
		width: .8rem;
		z-index: 1;
	}

	&.loading-lg {
		min-height: 2rem;

		&::after { height: 1.6rem; margin-left: -.8rem; margin-top: -.8rem; width: 1.6rem; }
	}
}

/* ========================================================================
   Color Utilities
   ======================================================================== */

.text-primary { color: #2e5bec !important; }
a.text-primary:focus, a.text-primary:hover { color: #2050eb !important; }
.text-error { color: #e85600 !important; }
a.text-error:focus, a.text-error:hover { color: #cf4d00 !important; }
.text-success { color: #32b643 !important; }
.text-warning { color: #ffb700 !important; }
.text-gray { color: var(--friends-color-text-soft) !important; }
.text-dark { color: var(--friends-color-text) !important; }
.text-light { color: #fff !important; }

.bg-primary { background: #2e5bec !important; color: #fff; }
.bg-dark { background: #3e396b !important; color: #fff; }
.bg-gray { background: var(--friends-color-surface) !important; }
.bg-success { background: #32b643 !important; color: #fff; }
.bg-warning { background: #ffb700 !important; }
.bg-error { background: #e85600 !important; color: #fff; }

/* ========================================================================
   Divider
   ======================================================================== */

.divider, .divider-vert {
	display: block;
	position: relative;

	&[data-content]::after {
		background: var(--friends-color-surface);
		color: var(--friends-color-text-soft);
		content: attr(data-content);
		display: inline-block;
		font-size: .7rem;
		padding: 0 .4rem;
		transform: translateY(-.65rem);
	}
}

.divider {
	border-top: .05rem solid var(--friends-color-border);
	height: .05rem;
	margin: .4rem 0;

	&[data-content] { margin: .8rem 0; }
}

.divider-vert {
	display: block;
	padding: .8rem;

	&::before {
		border-left: .05rem solid var(--friends-color-border);
		bottom: .4rem;
		content: "";
		display: block;
		left: 50%;
		position: absolute;
		top: .4rem;
		transform: translateX(-50%);
	}

	&[data-content]::after {
		left: 50%;
		padding: .2rem 0;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
	}
}

/* ========================================================================
   Display Utilities
   ======================================================================== */

.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-none, .d-hide { display: none !important; }
.d-visible { visibility: visible; }
.d-invisible { visibility: hidden; }

.text-hide {
	background: transparent;
	border: 0;
	color: transparent;
	font-size: 0;
	line-height: 0;
	text-shadow: none;
}

.text-assistive {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* ========================================================================
   Position Utilities
   ======================================================================== */

.clearfix::after { clear: both; content: ""; display: table; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.p-relative { position: relative !important; }
.p-absolute { position: absolute !important; }
.p-fixed { position: fixed !important; }
.p-sticky { position: sticky !important; }
.p-centered { display: block; float: none; margin-left: auto; margin-right: auto; }
.flex-centered { align-items: center; display: flex; justify-content: center; }

/* Spacing: 0 */
.m-0 { margin: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left: 0 !important; }
.mr-0 { margin-right: 0 !important; }
.mt-0 { margin-top: 0 !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.my-0 { margin-bottom: 0 !important; margin-top: 0 !important; }
.p-0 { padding: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.py-0 { padding-bottom: 0 !important; padding-top: 0 !important; }

/* Spacing: 1 (.2rem) */
.m-1 { margin: .2rem !important; }
.mb-1 { margin-bottom: .2rem !important; }
.ml-1 { margin-left: .2rem !important; }
.mr-1 { margin-right: .2rem !important; }
.mt-1 { margin-top: .2rem !important; }
.mx-1 { margin-left: .2rem !important; margin-right: .2rem !important; }
.my-1 { margin-bottom: .2rem !important; margin-top: .2rem !important; }
.p-1 { padding: .2rem !important; }
.pb-1 { padding-bottom: .2rem !important; }
.pl-1 { padding-left: .2rem !important; }
.pr-1 { padding-right: .2rem !important; }
.pt-1 { padding-top: .2rem !important; }
.px-1 { padding-left: .2rem !important; padding-right: .2rem !important; }
.py-1 { padding-bottom: .2rem !important; padding-top: .2rem !important; }

/* Spacing: 2 (.4rem) */
.m-2 { margin: .4rem !important; }
.mb-2 { margin-bottom: .4rem !important; }
.ml-2 { margin-left: .4rem !important; }
.mr-2 { margin-right: .4rem !important; }
.mt-2 { margin-top: .4rem !important; }
.mx-2 { margin-left: .4rem !important; margin-right: .4rem !important; }
.my-2 { margin-bottom: .4rem !important; margin-top: .4rem !important; }
.p-2 { padding: .4rem !important; }
.pb-2 { padding-bottom: .4rem !important; }
.pl-2 { padding-left: .4rem !important; }
.pr-2 { padding-right: .4rem !important; }
.pt-2 { padding-top: .4rem !important; }
.px-2 { padding-left: .4rem !important; padding-right: .4rem !important; }
.py-2 { padding-bottom: .4rem !important; padding-top: .4rem !important; }

/* ========================================================================
   Friends Plugin — Custom Styles
   ======================================================================== */

.friends-dropdown {
	position: relative;

	& .menu {
		animation: slide-down .15s ease 1;
		display: none;
		left: 0;
		max-height: 50vh;
		overflow-y: auto;
		position: absolute;
		top: 100%;
	}

	&.friends-dropdown-right {
		display: none;

		& .menu { left: auto; right: 0; }
	}

	&.active .menu, & .menu:hover { display: block; }

	& .btn-group .friends-dropdown-toggle:nth-last-child(2) {
		border-bottom-right-radius: .1rem;
		border-top-right-radius: .1rem;
	}
}

.off-canvas .off-canvas-content {
	margin-top: 32px;
	padding-top: 1rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 960px) {
	.off-canvas .off-canvas-content {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.off-canvas .off-canvas-toggle {
	top: 3rem;
	left: 1rem;
	color: #fff;
}

.off-canvas .off-canvas-content header.navbar {
	margin-bottom: 32px;
}

.off-canvas .off-canvas-content header.navbar.no-bottom-margin {
	margin-bottom: 0;
}

.off-canvas .off-canvas-sidebar {
	background-color: var(--friends-color-background);
	margin-top: 32px;
	width: 12rem;
}

.off-canvas .off-canvas-content header.navbar #page-title {
	margin-top: .1em;
	margin-left: 3rem;
}

h2#page-title a.dashicons {
	font-size: .8em;
	margin-right: .5em;
	vertical-align: baseline;
}

@media (min-width: 960px) {
	.off-canvas .off-canvas-content header.navbar #page-title {
		margin-left: 0;
	}
}

::backdrop {
	background-color: rgba(0, 0, 0, 0.75);
}

.friends-page {
	background-color: var(--friends-color-background);
	color: var(--friends-color-text);
	overflow-wrap: break-word;
	min-height: 100vh;

	& code, & pre { overflow: auto; }

	& a:visited { color: var(--friends-color-link-visited); }
	& a.off-canvas-toggle:visited { color: #fff; }
	& a, & a:visited, & a:hover, & a:focus, & a:active { color: var(--friends-color-link); }

	& summary.accordion-header {
		color: var(--friends-color-link);
		cursor: pointer;
		white-space: nowrap;
		text-overflow: ellipsis;

		& .dashicons { vertical-align: bottom; }
	}

	& .btn-arrow:before { content: "\2192  "; }
	& .accordion[open] .accordion-body { max-height: 100rem; }

	& .nav-links div a, & .nav-links div a:hover {
		appearance: none;
		background: #2e5bec;
		border: .05rem solid #2050eb;
		border-radius: .1rem;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font-size: .8rem;
		height: 1.8rem;
		line-height: 1.2rem;
		outline: none;
		padding: .25rem .4rem;
		text-align: center;
		text-decoration: none;
		transition: background .2s, border .2s, box-shadow .2s, color .2s;
		user-select: none;
		vertical-align: middle;
		white-space: nowrap;
	}

	& .menu {
		& a, & a:active, & a:visited { color: var(--friends-color-text); padding: .2rem; }
		& .menu-item + .menu-item { margin-top: 0; }
		& .divider[data-content] { margin: 0.8rem 0 0.4rem 0; }
		& .menu-item.friends-dropdown { margin-top: 0.2rem; margin-bottom: 0.4rem; }
		& .menu-item small.label-secondary { display: none; }
		& .menu-item:hover small.label-secondary { display: inline-block; }

		& .has-icon-left .ab-icon {
			line-height: 1.2;
			margin-right: .2em;

			& .dashicons.dashicons-plus {
				color: #32c170;
				font-size: .5em;
				margin-left: -1.5em;
				margin-top: -2.1em;
			}
		}
	}

	& button, & input { min-height: auto; }
	& .d-none { display: none; }
	& dialog { border: 0; box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); }
	& header.navbar section.navbar-section.author { flex: 3; min-width: 20em; }
	& summary.quick-status-panel-opener { margin-bottom: 2em; cursor: pointer; }
	& .activitypub-custom-emoji {
		display: inline-block;
		width: auto;
		max-width: 1.5em;
		height: 1em;
		max-height: 1em;
		margin: 0 0.05em;
		object-fit: contain;
		vertical-align: -0.15em;
	}

	& article {
		margin-bottom: 2em;

		& .card-title { padding-left: .8rem; }

		& .card-body {
			& img, & video { max-width: 100% !important; height: auto; }
		}

		& .overflow { height: .5em; }
		& .boosted .follow-button, & .boosted .follow-button span.name { display: none; }
		& .boosted:hover .follow-button { display: inline; }

		&.format-status {
			& div.teaser { display: none; }
			& .card-title { padding-left: 0; }
		}

		&.format-image {
			& a.collapse-post { display: none; }
			& .card-footer { padding-top: 0; padding-bottom: 1rem; }
			& .card-footer a .text { display: block; font-size: 10px; line-height: 8px; }
		}
	}

	& .card {
		height: 100%;
		box-shadow: 0 0 2px rgba(48, 55, 66, .15);
		padding: 0;
		border: 0;
		border-radius: 10px;
		margin-bottom: 1em;

		& .card-body {
			& ul, & ol { margin-left: 1rem; }
			& img, & video { max-width: 100% !important; height: auto; }

			& .wp-block-image, & .wp-block-gallery {
				&.alignfull, &.alignwide { margin: 0; }
				& figcaption { text-align: center; font-size: .8rem; }
			}

			& p.note {
				border-left: 4px solid var(--friends-color-border);
				padding: 1rem;
				margin-left: 1rem;
				font-size: .8rem;
				color: var(--friends-color-text-muted);
				background-color: var(--friends-color-note-background);
			}
		}
	}

	& .friends-brand {
		position: fixed;
		margin-left: 1em;
		margin-top: 1em;
		font-size: 1.5em;

		& .friends-logo {
			& a, & a:visited, & a:active { color: #2e5bec; }

			& h2 {
				display: inline-block;
				font-size: 1.2rem;
				font-weight: 700;
				line-height: 1.5rem;
				margin-bottom: 0;
				text-transform: uppercase;
			}
		}

		& .friends-sidebar-customize {
			color: var(--friends-color-text-soft);
			font-size: .4rem;
			line-height: .6rem;
			display: block;
		}
	}

	& #friends-sidebar .friends-nav {
		bottom: 1.5rem;
		-webkit-overflow-scrolling: touch;
		overflow-y: auto;
		padding: .5rem;
		position: fixed;
		top: 5.5rem;
		width: 12rem;
		margin-left: 1em;

		& .accordion-header { padding: 0; }

		& .subscription-count, & .friend-count {
			border: 1px solid #2e5bec;
			color: #2e5bec;
			padding: 4px 4px 4px 6px;
			font-size: 10px;
			border-radius: 20px;
			line-height: 20px;
			vertical-align: bottom;
		}
	}

	& #quick-post-panel {
		display: none;
		margin-bottom: 2em;

		&.open { display: block; }
		& p.description { color: #3e396b; font-size: .6rem; }

		& .activitypub_preview {
			background-color: var(--friends-color-background);
			padding: .5em;
			margin-top: 1em;
			margin-bottom: 1em;
			max-height: 6em;
			overflow-y: auto;

			& figcaption {
				float: right;

				& a:any-link { color: var(--friends-color-text-soft); }
			}
		}
	}

	& img.avatar { border-radius: 5px; max-width: 36px; max-height: 36px; }
	& img.avatar.avatar-overlay { position: absolute; margin-left: -16px; margin-top: 24px; border-radius: 100%; }
	& div.friends-widget { margin-bottom: 2em; }
	& div.friends-main-widget h1 a { color: var(--friends-color-text); text-decoration: none; }
	& div.friends-widget h4 a { color: var(--friends-color-text); text-decoration: none; }
	& div.friends-widget a.open-requests { font-size: 90%; font-weight: normal; }
	& div.friends-widget ul { margin: .5em 0 1em 0; padding: 0; }

	& div.friends-widget h5 {
		margin-bottom: .5em;
		font-size: .7rem;
		text-transform: uppercase;
		font-weight: bold;
		letter-spacing: 2px;
		color: #2e5bec;
	}

	& section.posts {
		& .friends-empty-state > .card-body {
			padding: 1.25rem;
		}

		& .card {
			& header.entry-header {
				display: flex;
				font-size: 88%;
				line-height: 1.4;
				max-width: 100%;
				margin: 0;
				padding: .8rem;
				padding-bottom: 1.5em;

				& div.avatar { margin-right: .5em; }
				& div.friends-dropdown { display: inline-block; margin-right: -.4rem; }
			}

			& h4.entry-title {
				font-size: 130%;
				line-height: 1.4;
				margin: 0 0 1em 0;
				text-align: left;

				& a {
					text-decoration: none;

					& span.dashicons { margin-top: 4px; margin-left: 6px; color: #32c170; }
				}

				&:after { display: none; }
			}
		}

		& span.reading-time::before { content: " | "; }
		& article.status-trash { opacity: .5; }

		& article.card.column.post_format-post-format-status.format-status header.entry-header div.post-meta {
			width: calc(100% - 12em);
		}

		&.all-collapsed article:not(.uncollapsed):not(:only-child),
		& article.collapsed {
			& div.card-body { display: none; }

			& header.entry-header {
				padding-left: 1rem;
				padding-bottom: 0;

				& div.avatar { display: none; }
				& div.author { display: inline; }

				& div.permalink {
					display: inline;

					&::before { content: " | "; }
				}
			}

			& h4.card-title { padding-left: 1rem; }
			& a.collapse-post { display: none; }

			&.format-status {
				padding-bottom: 0;
				margin-bottom: .5em;
				width: 100%;

				& div.teaser {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					display: inline-block;
					margin-left: 60px;
					margin-right: 2em;
					margin-top: -1em;
					margin-bottom: 0.6em;
				}

				& header {
					padding-left: 0;
					margin-bottom: 0;

					& div.post-meta {
						width: calc(100% - 7em);
						max-height: 1.5em;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					& div.avatar { display: block; margin-left: 1em; }
				}
			}

			& footer.entry-meta { display: none; }
		}

		& footer.entry-meta {
			display: flex;
			justify-content: flex-end;

			& a {
				color: var(--friends-color-link);

				& .dashicons { vertical-align: middle; }
			}

			& .btn:hover { color: var(--friends-color-link); }
		}

		& footer.comments-content {
			border-top: 1px solid var(--friends-color-border);

			&.closed { display: none; }

			& .comment-list { padding-left: 0; list-style: none; }

			& .comment-list > li {
				margin-top: var(--global--spacing-vertical);
				margin-bottom: var(--global--spacing-vertical);
			}

			& .comment-list .children {
				list-style: none;
				margin-left: 0;
				padding-left: 5px;
				border-left: 3px solid var(--friends-color-border);
			}

			& .comment-list .children > li {
				margin-top: var(--global--spacing-vertical);
				margin-bottom: var(--global--spacing-vertical);
			}

			@media only screen and (min-width: 482px) {
				& .comment-list .depth-2, & .comment-list .depth-3 {
					padding-left: calc(4 * var(--global--spacing-horizontal));
				}
			}

			& .comment-reply-title { margin-top: 1em; }
			& .comment-reply-title small { margin-left: 1em; }
			& .comment-form-comment label { display: block; }
				& .comment-form-comment textarea { max-width: 100%; box-sizing: border-box; }
		}
	}

	& section.followers, & section.subscriptions {
		& .friends-search {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: .5em;
			margin: 0 0 1em;
		}

		& .friends-search-label {
			display: inline-flex;
			align-items: center;
			gap: .4em;
			flex: 1 1 240px;
			min-width: 0;
		}

		& .friends-search-input {
			flex: 1 1 auto;
			min-width: 0;
			box-sizing: border-box;
			padding: .35em .6em;
			font-size: inherit;
			line-height: 1.3;
			border: 1px solid var(--friends-color-border-strong);
			border-radius: 3px;
			background: var(--friends-color-surface);
		}

		& .friends-search-input:focus {
			outline: 2px solid #2271b1;
			outline-offset: -1px;
		}

		& .friends-search-clear { font-size: .9em; }

		& ul { padding-left: 0; }

		& ul li {
			list-style: none;

			& .already-following { color: #ccc; }
			& img { vertical-align: middle; }

			& .follower .ab-icon {
				& .dashicons.dashicons-plus, & .dashicons.dashicons-yes {
					color: #32c170;
					font-size: .5em;
					margin-left: -1.5em;
					margin-top: -2.1em;
				}

				& .dashicons.dashicons-no {
					color: #dc1717;
					font-size: .5em;
					margin-left: -1.5em;
					margin-top: -2.1em;
				}
			}

			& .form-icon.loading { margin-left: 1em; }

			& details summary span {
				margin-left: .5em;
				border-bottom: 1px solid #ccc;

				& span { margin-left: 0; border-bottom: 0; }
			}

			& .follower-actions {
				display: inline-flex;
				flex-wrap: wrap;
				align-items: center;
				gap: .4em;
			}

			& .follower-status,
			& .follower-action {
				display: inline-flex;
				align-items: center;
				border-bottom: 0;
				gap: .2em;
				line-height: 1.4;
				margin-left: 0;
				vertical-align: baseline;
			}

			& .follower-status .dashicons,
			& .follower-action .dashicons {
				display: inline-flex;
				align-items: center;
				border-bottom: 0;
				justify-content: center;
				font-size: .9em;
				height: .9em;
				line-height: 1;
				margin: 0;
				vertical-align: text-bottom;
				width: .9em;
			}
		}
	}

	& section.subscriptions {
		& .hidden { display: none; }

		&.add-friend-subscriptions {
			display: grid;
			gap: 1rem;

			& .card {
				margin: 0;
			}
		}

		& .add-subscription-input {
			display: flex;
			gap: .6rem;
			align-items: flex-start;

			& .form-input {
				flex: 1 1 auto;
				min-height: 5.6rem;
				resize: vertical;
			}

			& .btn { flex: 0 0 auto; }
		}

		& .opml-file-hint {
			color: var(--friends-color-text-muted);
			font-size: .75rem;
			margin: .6rem 0 0;
		}

		& #preview-subscription:not(:empty) {
			margin-top: 1rem;
		}

		& .subscription-preview-results {
			display: grid;
			gap: .75rem;
		}

		& .bulk-controls,
		& .subscription-bulk-actions,
		& .subscription-feed-actions,
		& .subscription-preview-actions {
			display: flex;
			flex-wrap: wrap;
			gap: .4rem;
			align-items: center;
			margin-top: .8rem;
		}

		& .bulk-skip-entry {
			margin-left: .35rem;
		}

		& .feed-list {
			list-style: none;
			padding-left: 0;
			margin: .5em 0;

			& li { padding: 4px 0; }
		}

		& .bulk-feed-list {
			display: grid;
			gap: .6rem;
			margin: 1rem 0 0;
		}

		& .bulk-feed-list > .bulk-feed-row {
			background: var(--friends-color-surface-alt);
			border-radius: .25rem;
			padding: .65rem .75rem;

			& > label {
				display: block;
				font-weight: 600;
				overflow-wrap: anywhere;

				& small {
					display: block;
					font-weight: 400;
					margin-top: .15rem;
				}
			}
		}

		& .bulk-feed-list > .bulk-feed-row.is-reviewing > .label-for-bulkfeed,
		& .bulk-feed-list > .bulk-feed-row.is-reviewing > .bulk-feed-status {
			display: none;
		}

		& .bulk-feed-review {
			margin: .7rem 0 0;
		}

		& .feed-preview {
			background: var(--friends-color-surface);
			border-radius: .25rem;
			box-shadow: inset 3px 0 0 #d9def7;
			margin-top: 1rem;
			padding: .8rem;

			& .avatar { border-radius: 50%; }
		}

		& .bulk-feed-review .feed-preview {
			background: transparent;
			border-radius: 0;
			box-shadow: none;
			margin-top: 0;
			padding: 0;
		}

		& .subscription-preview-header,
		& .subscribe-success {
			display: flex;
			align-items: center;
			gap: .6rem;
		}

		& .subscription-preview-title {
			display: flex;
			flex-direction: column;
			min-width: 0;

			& small {
				color: var(--friends-color-text-muted);
				overflow-wrap: anywhere;
			}
		}

		& .subscription-preview-description {
			color: var(--friends-color-text-muted);
			margin: .6rem 0;
		}

		& .subscription-feed-list {
			display: grid;
			gap: .55rem;
			margin-top: .8rem;
		}

		& .subscription-feed-list.hidden {
			display: none;
		}

		& .subscription-settings,
		& .subscription-feed-controls {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: .6rem;
			margin-top: .7rem;

			& label {
				display: grid;
				gap: .2rem;
				font-size: .7rem;
				font-weight: 600;
			}

			& .btn {
				align-self: end;
				justify-self: start;
			}
		}

		& .subscription-feed-url-label {
			grid-column: 1 / -1;
		}

		& .subscription-feed-option {
			background: var(--friends-color-surface-alt);
			border-radius: .25rem;
			margin-top: 0;
			padding: .65rem;

			& > label {
				display: block;
				font-weight: 600;
				overflow-wrap: anywhere;

				& small {
					color: var(--friends-color-text-muted);
					font-weight: 400;
				}
			}
		}

		& .subscription-feed-details {
			color: var(--friends-color-text-muted);
			font-size: .7rem;
			margin: .5rem 0 0;
			overflow-wrap: anywhere;
		}

		& .subscription-feed-preview {
			background: var(--friends-color-surface);
			border-radius: .2rem;
			box-shadow: inset 0 0 0 1px #e8e8f3;
			margin-top: .6rem;
			padding: .6rem;

			& ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}

			& li + li {
				margin-top: .55rem;
			}

			& p {
				color: var(--friends-color-text-muted);
				font-size: .75rem;
				margin: .25rem 0 0;
			}
		}

		& .subscription-feed-preview-title {
			display: flex;
			flex-direction: column;
			gap: .1rem;

			& small {
				color: var(--friends-color-text-muted);
				font-size: .7rem;
			}
		}

		& .subscription-preview-status,
		& .bulk-feed-status {
			color: var(--friends-color-text-muted);
			font-size: .75rem;

			&.error { color: #b91c1c; }
		}

		& .subscribe-success {
			& a { font-weight: bold; font-size: 1.1em; }
		}

		@media (max-width: 640px) {
			& .add-subscription-input {
				flex-direction: column;

				& .btn { width: 100%; }
			}

			& .subscription-settings,
			& .subscription-feed-controls {
				grid-template-columns: 1fr;
			}

			& .subscription-preview-actions .btn,
			& .subscription-feed-actions .btn,
			& .bulk-controls .btn {
				width: 100%;
			}
		}

		& .subscription-item {
			padding: 8px 0;
			border-bottom: 1px solid var(--friends-color-border);
			display: grid;
			grid-template-columns: 40px 1fr;
			grid-template-rows: auto auto auto;
			column-gap: 8px;
			row-gap: 2px;
			align-items: center;

			&:last-child { border-bottom: none; }
		}

		& .subscription-link {
			display: contents;
			text-decoration: none;

			& .avatar { border-radius: 50%; grid-row: 1 / 3; }
		}

		& .subscription-info { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
		& .starred { color: #f5a623; }
		& .subscription-folder { font-size: 0.8em; background: var(--friends-color-surface-alt); padding: 1px 6px; border-radius: 3px; color: var(--friends-color-text-muted); }
		& .subscription-meta { grid-column: 2; font-size: 0.85em; color: var(--friends-color-text-soft); }
		& .subscription-description { grid-column: 2; font-size: 0.85em; color: var(--friends-color-text-muted); margin: 0; }
		& .subscription-actions {
			grid-column: 2;
			display: flex;
			align-items: center;
			margin-top: .15rem;
		}

		& .subscription-action {
			display: inline-flex;
			align-items: center;
			gap: .2rem;
			width: max-content;
			max-width: 100%;
		}
	}

	& ul.friend-posts img.avatar { vertical-align: middle; margin-right: .3em; }
	& .form-autocomplete .form-autocomplete-input .form-input { width: auto; }

	& .friends-reaction-picker button {
		padding: .5rem;
		margin: 0;
		font-size: 18px;
		background-color: var(--friends-color-surface);
		border: 0;
		cursor: pointer;
		z-index: 999999;
	}

	& .friends-reaction-picker button:focus { outline: none; }
	& a.display-message.unread { font-weight: bold; }

	& .friend-message .conversation .messages {
		max-height: 40em;
		overflow: auto;

		& .wp-block-friends-message {
			max-width: 80%;
			margin: 1em;
			border-bottom: 1px solid var(--friends-color-border);
		}
	}

	& .friends-dm-view {
		background: var(--friends-color-surface);
		border-top: 1px solid var(--friends-color-border);
		display: grid;
		grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
		height: calc(var(--friends-dm-viewport-height, 100vh) - 3.2rem);
		min-height: 32rem;
	}

	& .friends-dm-empty {
		align-self: start;
		background: var(--friends-color-surface);
		border: 1px solid var(--friends-color-border);
		border-radius: .2rem;
		grid-column: 1 / -1;
		margin: 1rem;
		padding: 1rem;

		& h3 { margin-top: 0; }
		& p { margin-bottom: 0; }
	}

	& .friends-dm-sidebar {
		background: var(--friends-color-surface-muted);
		border-right: 1px solid var(--friends-color-border);
		overflow: auto;
	}

	& .friends-profile-messages {
		overflow: hidden;
		padding: 0;
	}

	& .friends-profile-messages-header {
		align-items: center;
		border-bottom: 1px solid var(--friends-color-border);
		display: flex;
		justify-content: space-between;
		padding: .65rem .7rem;
	}

	& .friends-profile-messages .friends-dm-conversation,
	& .friends-profile-messages .friends-dm-conversation:visited {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	& .friends-dm-conversation,
	& .friends-dm-conversation:visited {
		border-bottom: 1px solid var(--friends-color-border);
		color: var(--friends-color-text);
		display: grid;
		gap: .25rem .5rem;
		grid-template-columns: 2rem minmax(0, 1fr) auto;
		padding: .65rem .7rem;
		text-decoration: none;
	}

	& .friends-dm-conversation:hover,
	& .friends-dm-conversation:focus,
	& .friends-dm-conversation.is-selected {
		background: var(--friends-color-selected-background);
		color: var(--friends-color-text);
		text-decoration: none;
	}

	& .friends-dm-conversation.is-unread .friends-dm-conversation-name,
	& .friends-dm-conversation.is-unread .friends-dm-conversation-preview { font-weight: 700; }

	& .friends-dm-conversation .avatar,
	& .friends-dm-thread-header .avatar,
	& .friends-dm-message-avatar .avatar {
		border-radius: 50%;
		display: block;
		object-fit: cover;
	}

	& .friends-dm-conversation-main {
		display: grid;
		min-width: 0;
	}

	& .friends-dm-conversation-name,
	& .friends-dm-conversation-preview {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	& .friends-dm-conversation-preview {
		color: var(--friends-color-text-muted);
		font-size: .72rem;
	}

	& .friends-dm-conversation-meta {
		align-items: end;
		color: var(--friends-color-text-muted);
		display: flex;
		flex-direction: column;
		font-size: .65rem;
		gap: .25rem;
	}

	& .friends-dm-unread-count {
		background: #d63638;
		border-radius: 999px;
		color: #fff;
		font-size: .6rem;
		font-weight: 700;
		line-height: 1;
		min-width: 1rem;
		padding: .2rem .3rem;
		text-align: center;
	}

	& .friends-dm-thread {
		display: grid;
		grid-template-rows: auto minmax(0, 1fr) auto;
		min-width: 0;
	}

	& .friends-dm-thread-header {
		align-items: center;
		border-bottom: 1px solid var(--friends-color-border);
		display: flex;
		gap: .6rem;
		min-height: 3.2rem;
		padding: .55rem .8rem;

		& h3 {
			font-size: .95rem;
			line-height: 1.2;
			margin: 0;
		}

		& a {
			font-size: .68rem;
		}
	}

	& .friends-dm-back {
		display: none;
	}

	& .friends-dm-messages {
		background: var(--friends-color-surface);
		overflow: auto;
		padding: .7rem .9rem;
	}

	& .friends-dm-message {
		display: grid;
		gap: .5rem;
		grid-template-columns: 1.6rem minmax(0, 1fr);
		margin: 0 0 .9rem;
	}

	& .friends-dm-message.is-consecutive-message {
		margin-top: -.55rem;

		& .friends-dm-message-avatar,
		& .friends-dm-message-meta {
			visibility: hidden;
		}

		& .friends-dm-message-content {
			margin-top: 0;
		}
	}

	& .friends-dm-message.is-own-message .friends-dm-message-content {
		background: var(--friends-color-info-background);
	}

	& .friends-dm-message-meta {
		align-items: baseline;
		display: flex;
		flex-wrap: wrap;
		gap: .35rem;
		line-height: 1.2;

		& time {
			color: var(--friends-color-text-muted);
			font-size: .65rem;
		}
	}

	& .friends-dm-delivery-status {
		color: var(--friends-color-text-muted);
		cursor: help;
		font-size: .65rem;

		&::before {
			content: "·";
			margin-right: .35rem;
		}

		&.is-failed {
			color: var(--friends-color-error);
		}
	}

	& .friends-dm-delivery-icon {
		align-items: center;
		display: inline-flex;
		flex: 0 0 auto;
		height: 1rem;
		justify-content: center;
		line-height: 1;
		position: relative;
		width: 1rem;

		&::before {
			border: 1.5px solid currentColor;
			border-radius: 50%;
			box-sizing: border-box;
			content: "";
			height: .9rem;
			margin: 0;
			width: .9rem;
		}

		&::after {
			border: solid currentColor;
			border-width: 0 1.5px 1.5px 0;
			content: "";
			height: .42rem;
			left: .37rem;
			position: absolute;
			top: .22rem;
			transform: rotate(45deg);
			width: .22rem;
		}

		&.is-queued::before {
			border-style: dotted;
		}

		&.is-sending::before {
			border-style: dashed;
		}

		&.is-failed::after {
			border: 0;
			content: "!";
			font-size: .65rem;
			font-weight: 700;
			height: auto;
			left: auto;
			position: absolute;
			top: .13rem;
			transform: none;
			width: auto;
		}
	}

	& .friends-dm-delivery-tooltip {
		background: var(--friends-color-surface);
		border: 1px solid var(--friends-color-border);
		border-radius: .25rem;
		box-shadow: 0 .25rem .75rem rgb(0 0 0 / 16%);
		color: var(--friends-color-text);
		font-size: .75rem;
		line-height: 1.3;
		overflow-wrap: break-word;
		padding: .4rem .5rem;
		pointer-events: none;
		position: fixed;
		white-space: normal;
		width: min(18rem, calc(100vw - 2rem));
		z-index: 9999;
	}

	& .friends-dm-message-content {
		background: var(--friends-color-surface-muted);
		border: 1px solid var(--friends-color-border);
		border-radius: .3rem;
		margin-top: .18rem;
		max-width: 48rem;
		padding: .45rem .55rem;

		& > :first-child { margin-top: 0; }
		& > :last-child { margin-bottom: 0; }
	}

	& .friends-dm-reply {
		background: var(--friends-color-surface-muted);
		border-top: 1px solid var(--friends-color-border);
		padding: .65rem .8rem;

		& form.form-horizontal .form-group {
			display: flex;
			gap: .5rem;
			margin-bottom: .45rem;
		}

		& form.form-horizontal .form-group > div:first-child {
			flex: 0 0 4rem;
		}

		& form.form-horizontal .form-group > div:nth-child(2) {
			flex: 1 1 auto;
			max-width: none;
		}

		& textarea.friends-message-message {
			min-height: 4.2rem;
			resize: vertical;
		}

		& .delete-conversation {
			height: auto;
			line-height: 1.2;
			max-width: 100%;
			white-space: normal;
		}
	}

	@media (max-width: 840px) {
		& .navbar-section.search.hide-mobile-search {
			display: none;
		}

		& .friends-dm-view {
			grid-template-columns: 1fr;
			grid-template-rows: minmax(0, 1fr);
			height: min(calc(var(--friends-dm-viewport-height, 100vh) - 3.2rem), 48rem);
			min-height: 0;
			overflow: hidden;
			position: relative;
		}

		& .friends-dm-sidebar {
			border-right: 0;
			grid-column: 1;
			grid-row: 1;
			height: 100%;
			max-height: none;
			min-height: 0;
			transform: translateX(0);
			transition: transform .2s ease;
			width: 100%;
			z-index: 1;
		}

		& .friends-dm-thread {
			grid-column: 1;
			grid-row: 1;
			height: 100%;
			min-height: 0;
			overflow: hidden;
			transform: translateX(100%);
			transition: transform .2s ease;
			width: 100%;
			z-index: 2;
		}

		& .friends-dm-view.is-focused-conversation .friends-dm-sidebar {
			transform: translateX(-100%);
		}

		& .friends-dm-view.is-focused-conversation .friends-dm-thread {
			transform: translateX(0);
		}

		& .friends-dm-back {
			align-items: center;
			border: 0;
			color: var(--friends-color-text);
			display: flex;
			font-size: 1.25rem;
			line-height: 1;
			text-decoration: none;
		}

		& .friends-dm-messages {
			min-height: 0;
			overscroll-behavior: contain;
		}

		& .friends-dm-reply {
			padding-bottom: calc(.65rem + env(safe-area-inset-bottom, 0px));
		}
	}

	& .chip { background-color: var(--friends-color-surface); }

	/* to support mastodon style tags */
	& .invisible {
		font-size: 0;
		line-height: 0;
		display: inline-block;
		width: 0;
		height: 0;
		position: absolute;

		& img, & svg {
			margin: 0 !important;
			border: 0 !important;
			padding: 0 !important;
			width: 0 !important;
			height: 0 !important;
		}
	}

	& .ellipsis::after { content: "\2026"; }

	& #author-header.has-header-image {
		background-size: cover;
		background-position: center;
		position: relative;
		padding: 40px 16px 16px;

		&::before {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.6) 100%);
			border-radius: inherit;
		}

		& > * { position: relative; }

		& h2, & p, & .chip, & a {
			color: #fff;
			text-shadow: 0 1px 3px rgba(0,0,0,.5);
		}

		& .chip { background: rgba(255,255,255,.2); }
	}
}

header.has-header-image {
	background-size: cover;
	background-position: center;
	position: relative;
	flex-wrap: wrap;
	border-radius: 10px;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(0,0,0,.6) 100%);
	}

	& > * { position: relative; }

	& .navbar-section.search {
		align-self: flex-start;
		margin-top: 16px;
		margin-right: 16px;

		& .form-input {
			background: rgba(255,255,255,.2);
			border-color: rgba(255,255,255,.3);
			color: #fff;

			&::placeholder { color: rgba(255,255,255,.7); }
		}

		& .btn {
			background: rgba(255,255,255,.2);
			border-color: rgba(255,255,255,.3);
			color: #fff;
		}
	}

	& #author-header {
		padding: 16px;

		& h2, & p, & .chip, & a {
			color: #fff;
			text-shadow: 0 1px 3px rgba(0,0,0,.5);
		}

		& .chip { background: rgba(255,255,255,.2); }
	}
}

@media (max-width: 960px) {
	.friends-page .card {
		width: 100%;
		margin-left: 0;
		margin-right: 0;

		& .card-body { padding: 1rem; }
		& .card-title { padding-left: 1rem; }
		& textarea { width: 100%; }

		& .card-footer {
			padding-top: 0;
			padding-bottom: 1rem;

			& div.friends-dropdown { display: inline-block; }
		}

		& .card-footer a .text { display: block; font-size: 10px; line-height: 8px; }
	}
}

@media (min-width: 960px) {
	.friends-page section.posts .card header.entry-header {
		padding-top: .5rem;
		padding-right: 1rem;
		padding-left: 1rem;
	}
}

@media (max-width: 960px) {
	.friends-page section.posts .card header.entry-header div.author {
		max-width: 19em;
	}
}

/* ========================================================================
   Link Previews
   ======================================================================== */

.friends-page a.friends-link-preview {
	display: flex;
	flex-direction: column;
	margin-top: .8rem;
	overflow: hidden;
	border: .05rem solid var(--friends-color-border-strong);
	border-radius: .4rem;
	background: var(--friends-color-surface-alt);
	color: inherit;
	text-decoration: none;

	&:hover, &:focus {
		border-color: var(--friends-color-link);
		text-decoration: none;
	}

	& .friends-link-preview-image {
		display: block;
		background: var(--friends-color-surface-muted);

		& img {
			display: block;
			width: 100%;
			height: auto;
			max-height: 24rem;
			object-fit: cover;
			aspect-ratio: 1.91 / 1;
		}
	}

	& .friends-link-preview-text {
		display: flex;
		flex-direction: column;
		gap: .2rem;
		padding: .6rem .8rem;
		min-width: 0;
	}

	& .friends-link-preview-host {
		color: var(--friends-color-text-soft);
		font-size: .7rem;
		text-transform: uppercase;
		letter-spacing: .02em;
	}

	& .friends-link-preview-title {
		font-weight: 600;
		line-height: 1.3;
	}

	& .friends-link-preview-description {
		color: var(--friends-color-text-muted);
		font-size: .7rem;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}