/*
Clevie Community: styles for the shortcode element and the sort links.
The theme's own element inherits the theme colors, so only the interactive
states are added here.
*/
.cvc-votes {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 2px;
	border-radius: 999px;
	background: var(--cv-surface-2, #f2f3f5);
	border: 1px solid var(--cv-border, #d5d9dd);
	line-height: 1;
}
.cvc-votes--column { flex-direction: column; }

.cvc-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--cv-muted, #78838f);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.cvc-arrow:hover { background: rgba(255, 69, 0, .12); color: var(--cv-accent, #ff4500); }
.cv-vote-down:hover { background: rgba(0, 121, 211, .12); color: var(--cv-blue, #0079d3); }
.cv-vote-up.is-active { color: var(--cv-accent, #ff4500); }
.cv-vote-down.is-active { color: var(--cv-blue, #0079d3); }

.cvc-score {
	min-width: 26px;
	padding: 0 4px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: var(--cv-text, #1c1c1c);
}

/* Arrows coming from the theme become clickable. */
.cvc-clickable { cursor: pointer; }
.cvc-clickable:focus-visible { outline: 2px solid var(--cv-blue, #0079d3); outline-offset: 2px; }

.is-busy { opacity: .55; pointer-events: none; }

.cvc-note {
	display: inline-block;
	margin-left: 8px;
	font-size: 12px;
	color: var(--cv-muted, #78838f);
}

/* Sort links */
.cvc-sort { display: flex; flex-wrap: wrap; gap: 4px; }
.cvc-sort__link {
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	color: var(--cv-muted, #78838f);
	text-decoration: none;
}
.cvc-sort__link:hover { background: var(--cv-surface-2, #f2f3f5); color: var(--cv-text, #1c1c1c); }
.cvc-sort__link.is-active { background: var(--cv-surface-2, #f2f3f5); color: var(--cv-text, #1c1c1c); }

/* =========================================================
   Post button and submission form
   ========================================================= */
.cvc-post-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	border: 0;
	border-radius: var(--cvc-btn-radius, 999px);
	background: var(--cvc-btn-bg, #ff4500);
	color: var(--cvc-btn-text, #fff);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease;
}
.cvc-post-button:hover,
.cvc-post-button:focus {
	background: var(--cvc-btn-hover, #e03d00);
	color: var(--cvc-btn-text, #fff);
	text-decoration: none;
}
.cvc-post-button svg { flex-shrink: 0; }
.cvc-post-button--submit { padding: 12px 26px; font-size: 14px; }
.cvc-post-button[disabled] { opacity: .5; cursor: not-allowed; }

.cvc-form { max-width: 640px; }
.cvc-field { display: block; margin: 0 0 18px; }
.cvc-field label {
	display: block;
	margin-bottom: 6px;
	font-weight: 700;
	font-size: 13px;
}
.cvc-field input[type="text"],
.cvc-field input[type="url"],
.cvc-field select,
.cvc-field textarea {
	width: 100%;
	font: inherit;
	color: var(--cv-text, #1c1c1c);
	background: var(--cv-surface-2, #f6f7f8);
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	padding: 10px 12px;
}
.cvc-field textarea { min-height: 180px; resize: vertical; }
.cvc-field input[type="file"] { font-size: 13px; }

.cvc-hint {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--cv-muted, #7c7c7c);
}
.cvc-counter {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--cv-muted, #7c7c7c);
}
.cvc-counter.is-short { color: #b32d00; font-weight: 700; }
.cvc-counter.is-ok { color: #1a7f37; }

.cvc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.cvc-notice {
	padding: 12px 14px;
	margin-bottom: 18px;
	border-radius: var(--cv-radius, 4px);
	border: 1px solid var(--cv-border, #ccc);
	background: var(--cv-surface-2, #f6f7f8);
	font-size: 14px;
}
.cvc-notice--error { border-left: 4px solid #b32d00; }
.cvc-notice--success { border-left: 4px solid #1a7f37; }

.cvc-honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cvc-video { margin: 0 0 20px; }
.cvc-video iframe { max-width: 100%; border-radius: var(--cv-radius, 4px); }

/* The button sits at the far right of the archive header. */
.cv-page-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.cv-page-header__inner > *:first-child { min-width: 0; }

/* =========================================================
   Comment votes, profile and account forms
   ========================================================= */
.cvc-votes--comment { padding: 1px; }
.cvc-votes--comment .cvc-arrow { width: 24px; height: 24px; }
.cvc-votes--comment .cvc-score { font-size: 12px; min-width: 20px; }
.cvc-comment-actions { margin-top: 8px; }

.cvc-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--cv-link, #0079d3);
}

.cvc-profile { max-width: 720px; }
.cvc-profile__head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px; }
.cvc-profile__avatar { border-radius: 50%; flex-shrink: 0; }
.cvc-profile__name { margin: 0 0 4px; font-size: 20px; }
.cvc-profile__meta { margin: 0 0 6px; font-size: 13px; color: var(--cv-muted, #7c7c7c); }
.cvc-profile__bio { margin: 0; }

.cvc-profile__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 20px;
}
.cvc-stat {
	padding: 12px;
	text-align: center;
	background: var(--cv-surface-2, #f6f7f8);
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
}
.cvc-stat__value { display: block; font-size: 20px; font-weight: 700; line-height: 1.2; }
.cvc-stat__label { display: block; margin-top: 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--cv-muted, #7c7c7c); }

.cvc-profile__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 20px; }

.cvc-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--cv-border, #ccc);
}
.cvc-tabs__link {
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 700;
	color: var(--cv-muted, #7c7c7c);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.cvc-tabs__link:hover { color: var(--cv-text, #1c1c1c); text-decoration: none; }
.cvc-tabs__link.is-active { color: var(--cv-text, #1c1c1c); border-bottom-color: var(--cvc-btn-bg, #ff4500); }

.cvc-list { list-style: none; margin: 0 0 16px; padding: 0; }
.cvc-list__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--cv-border, #ccc);
}
.cvc-list__item:last-child { border-bottom: 0; }
.cvc-list__main { flex: 1; min-width: 0; }
.cvc-list__title { display: block; font-weight: 600; color: var(--cv-text, #1c1c1c); }
.cvc-list__title:hover { color: var(--cv-link, #0079d3); text-decoration: none; }
.cvc-list__meta { display: block; margin-top: 2px; font-size: 12px; color: var(--cv-muted, #7c7c7c); }
.cvc-list__score {
	flex-shrink: 0;
	min-width: 44px;
	padding: 6px 10px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	background: var(--cv-surface-2, #f6f7f8);
	border: 1px solid var(--cv-border, #ccc);
	border-radius: 999px;
}
.cvc-empty { color: var(--cv-muted, #7c7c7c); }

.cvc-pagination { display: flex; flex-wrap: wrap; gap: 6px; }
.cvc-pagination .page-numbers {
	padding: 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--cv-border, #ccc);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.cvc-pagination .page-numbers.current { background: var(--cvc-btn-bg, #ff4500); border-color: var(--cvc-btn-bg, #ff4500); color: #fff; }

.cvc-form--account .cvc-field--check label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
#cvc-login-form p { margin-bottom: 14px; }
#cvc-login-form label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
#cvc-login-form input[type="text"],
#cvc-login-form input[type="password"] {
	width: 100%;
	font: inherit;
	padding: 10px 12px;
	background: var(--cv-surface-2, #f6f7f8);
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
}
#cvc-login-form .login-remember label { display: flex; gap: 8px; align-items: center; font-weight: 400; }
#cvc-login-form .submit input {
	padding: 12px 26px;
	border: 0;
	border-radius: var(--cvc-btn-radius, 999px);
	background: var(--cvc-btn-bg, #ff4500);
	color: var(--cvc-btn-text, #fff);
	font-weight: 700;
	cursor: pointer;
}

.cvc-user-menu { display: flex; align-items: center; gap: 10px; }
.cvc-user-menu__link { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; }
.cvc-user-menu img { border-radius: 50%; }

@media (max-width: 600px) {
	.cvc-profile__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Login widget */
.cvc-login-widget__text { margin: 0 0 12px; font-size: 13px; color: var(--cv-muted, #7c7c7c); }
.cvc-login-widget__user { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cvc-login-widget__user img { border-radius: 50%; flex-shrink: 0; }
.cvc-login-widget__name { display: block; font-weight: 700; font-size: 14px; color: var(--cv-text, #1c1c1c); }
.cvc-login-widget__name:hover { color: var(--cv-link, #0079d3); text-decoration: none; }
.cvc-login-widget__karma { display: block; font-size: 12px; color: var(--cv-muted, #7c7c7c); }
.cvc-login-widget__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.cvc-login-widget form p { margin: 0 0 10px; }
.cvc-login-widget label { display: block; font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.cvc-login-widget input[type="text"],
.cvc-login-widget input[type="password"] {
	width: 100%;
	font: inherit;
	font-size: 13px;
	padding: 8px 10px;
	background: var(--cv-surface-2, #f6f7f8);
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
}
.cvc-login-widget .login-remember label { display: flex; gap: 6px; align-items: center; font-weight: 400; }
.cvc-login-widget .submit input {
	width: 100%;
	padding: 10px 16px;
	border: 0;
	border-radius: var(--cvc-btn-radius, 999px);
	background: var(--cvc-btn-bg, #ff4500);
	color: var(--cvc-btn-text, #fff);
	font-weight: 700;
	cursor: pointer;
}
.cvc-account { max-width: 480px; }

.cvc-login-widget__ident { min-width: 0; }
.cvc-login-widget__profile { display: block; margin-top: 2px; font-size: 12px; }
.cvc-fieldset {
	margin: 0 0 18px;
	padding: 14px;
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
}
.cvc-fieldset legend { padding: 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--cv-muted, #7c7c7c); }
.cvc-fieldset .cvc-field:last-child { margin-bottom: 0; }
.cvc-form--account input[type="email"],
.cvc-form--account input[type="password"] {
	width: 100%;
	font: inherit;
	color: var(--cv-text, #1c1c1c);
	background: var(--cv-surface-2, #f6f7f8);
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	padding: 10px 12px;
}

.cvc-login-widget__links--stacked {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	margin-top: 10px;
}
.cvc-login-widget__cta { margin: 14px 0 0; }
.cvc-login-widget__cta .cvc-post-button { width: 100%; justify-content: center; }
.cvc-field--new-topic[hidden] { display: none; }

/* =========================================================
   Topic moderation
   ========================================================= */
.cvc-mod-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: var(--cvc-btn-radius, 999px);
	border: 1px solid var(--cv-border, #ccc);
	background: var(--cv-surface-2, #f6f7f8);
	color: var(--cv-text, #1c1c1c);
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}
.cvc-mod-link:hover { border-color: var(--cvc-btn-bg, #ff4500); text-decoration: none; }
.cvc-mod-link__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--cvc-btn-bg, #ff4500);
	color: #fff;
	font-size: 11px;
}

.cvc-mod__topic { margin-bottom: 28px; }
.cvc-mod__title { display: flex; align-items: center; gap: 8px; font-size: 17px; margin-bottom: 10px; }
.cvc-mod__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--cv-surface-2, #f6f7f8);
	border: 1px solid var(--cv-border, #ccc);
	font-size: 12px;
}
.cvc-mod__item { align-items: flex-start; flex-wrap: wrap; }
.cvc-mod__excerpt { margin: 6px 0 0; font-size: 13px; color: var(--cv-muted, #7c7c7c); }
.cvc-mod__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cvc-mod__actions form { display: flex; align-items: center; gap: 6px; margin: 0; }
.cvc-mod__actions input[type="text"] {
	font: inherit;
	font-size: 13px;
	padding: 8px 10px;
	width: 170px;
	background: var(--cv-surface-2, #f6f7f8);
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
}
.cvc-mod__reject {
	padding: 9px 16px;
	border-radius: var(--cvc-btn-radius, 999px);
	border: 1px solid var(--cv-border, #ccc);
	background: transparent;
	color: var(--cv-muted, #7c7c7c);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}
.cvc-mod__reject:hover { border-color: #b32d00; color: #b32d00; }

.cvc-modbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 24px;
	padding: 12px 14px;
	border: 1px dashed var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	background: var(--cv-surface-2, #f6f7f8);
}
.cvc-modbar form { display: flex; align-items: center; gap: 6px; margin: 0; }
.cvc-modbar input[type="text"] {
	font: inherit;
	font-size: 13px;
	padding: 7px 10px;
	width: 180px;
	background: var(--cv-surface, #fff);
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
}
.cvc-modbar__label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--cv-muted, #7c7c7c); }
.cvc-modbar__hint { flex: 1 1 100%; font-size: 12px; color: var(--cv-muted, #7c7c7c); }

.cvc-comment-mod { display: inline; margin: 0; }
.cvc-comment-mod__button {
	padding: 4px 10px;
	border: 0;
	background: none;
	color: var(--cv-muted, #7c7c7c);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.cvc-comment-mod__button:hover { color: #b32d00; }

/* Reports */
.cvc-report { margin-top: 20px; }
.cvc-report__toggle {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	color: var(--cv-muted, #7c7c7c);
	cursor: pointer;
	list-style: none;
}
.cvc-report__toggle::-webkit-details-marker { display: none; }
.cvc-report__toggle:hover { color: #b32d00; }
.cvc-report__form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 12px 14px;
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
}
.cvc-report__form label { font-size: 12px; font-weight: 700; }
.cvc-report__form input[type="text"] {
	flex: 1 1 220px;
	font: inherit;
	font-size: 13px;
	padding: 8px 10px;
	background: var(--cv-surface-2, #f6f7f8);
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
}
.cvc-claim { margin: 0; }

/* Editing your own post */
.cvc-edited { margin: 18px 0 0; font-size: 12px; font-style: italic; color: var(--cv-muted, #7c7c7c); }
.cvc-edit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }
.cvc-edit-bar .cvc-hint { margin: 0; }
.cvc-list__edit { flex-shrink: 0; font-size: 12px; }
.cvc-static { display: block; font-weight: 700; padding: 4px 0; }

/* Profile picture and language */
.cvc-avatar-field { margin-bottom: 18px; }
.cvc-avatar-field__row { display: flex; gap: 16px; align-items: flex-start; }
.cvc-avatar-field__preview { border-radius: 50%; flex-shrink: 0; }
.cvc-avatar-field__remove { display: flex; gap: 8px; align-items: center; margin-top: 8px; font-weight: 400; font-size: 13px; }
.cvc-form--account select {
	width: 100%;
	font: inherit;
	color: var(--cv-text, #1c1c1c);
	background: var(--cv-surface-2, #f6f7f8);
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	padding: 10px 12px;
}

/* Short clips */
.cvc-short-wrap { display: block; position: relative; max-width: 100%; overflow: hidden; }
.cvc-short-wrap video { display: block; width: 100%; max-width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.cvc-short-wrap iframe,
.cvc-short-wrap embed,
.cvc-short-wrap object {
	display: block;
	width: 100%;
	max-width: 100%;
	height: 100%;
	aspect-ratio: 9 / 16;
	border: 0;
	background: #000;
	border-radius: var(--cv-radius, 4px);
}
.cvc-short-wrap .wp-block-embed,
.cvc-short-wrap figure { margin: 0; }
.cvc-short-wrap .cv-short__badge { position: absolute; left: 8px; top: 8px; z-index: 2; pointer-events: none; }

/* =========================================================
   Topic navigation
   ========================================================= */
.cvc-topics__list,
.cvc-topics__children { list-style: none; margin: 0; padding: 0; }
.cvc-topics__item { margin-bottom: 2px; }

.cvc-topics__main {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 12px;
	border-radius: var(--cv-radius, 4px);
	font-weight: 700;
	font-size: 14px;
	color: var(--cv-text, #1c1c1c);
	text-decoration: none;
}
.cvc-topics__main:hover { background: var(--cv-surface-2, #f6f7f8); text-decoration: none; }
.cvc-topics__item.is-open > .cvc-topics__main { background: var(--cv-surface-2, #f6f7f8); }
.cvc-topics__main.is-current { box-shadow: inset 3px 0 0 var(--cvc-btn-bg, #ff4500); }

.cvc-topics__children {
	margin: 2px 0 10px 12px;
	padding-left: 10px;
	border-left: 1px solid var(--cv-border, #ccc);
}
.cvc-topics__child {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	border-radius: var(--cv-radius, 4px);
	font-size: 13px;
	color: var(--cv-muted, #7c7c7c);
	text-decoration: none;
}
.cvc-topics__child:hover { background: var(--cv-surface-2, #f6f7f8); color: var(--cv-text, #1c1c1c); text-decoration: none; }
.cvc-topics__child.is-current { color: var(--cv-text, #1c1c1c); font-weight: 700; background: var(--cv-surface-2, #f6f7f8); }

.cvc-topics__count { font-size: 11px; color: var(--cv-muted, #7c7c7c); font-weight: 400; flex-shrink: 0; }
.cvc-topics__more { display: block; padding: 6px 10px; font-size: 12px; font-weight: 700; }
.cvc-topics__hint { display: block; padding: 0 12px 6px; font-size: 11px; color: var(--cv-muted, #7c7c7c); }
.cvc-field__sub { display: block; margin-top: 12px; }

/* Nothing a member posts may push the page wider than the screen. */
.cvc-video { max-width: 100%; overflow: hidden; }
.cvc-video iframe,
.cvc-video embed,
.cvc-video object {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* =========================================================
   Notifications and top members
   ========================================================= */
.cvc-login-widget__user { position: relative; }
.cvc-bell { position: relative; }
.cvc-bell > summary { list-style: none; }
.cvc-bell > summary::-webkit-details-marker { display: none; }
.cvc-bell__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	color: var(--cv-muted, #7c7c7c);
	cursor: pointer;
}
.cvc-bell__toggle:hover { background: var(--cv-surface-2, #f6f7f8); color: var(--cv-text, #1c1c1c); }
.cvc-bell[open] .cvc-bell__toggle { background: var(--cv-surface-2, #f6f7f8); color: var(--cv-text, #1c1c1c); }
.cvc-bell__count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	border-radius: 999px;
	background: #e02a1b;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--cv-surface, #fff);
}

.cvc-bell__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	z-index: 120;
	width: 320px;
	max-width: calc(100vw - 24px);
	max-height: 60vh;
	overflow-y: auto;
	padding: 10px 0 4px;
	background: var(--cv-surface, #fff);
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
.cvc-bell__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 0 12px 8px;
	border-bottom: 1px solid var(--cv-border, #ccc);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: var(--cv-muted, #7c7c7c);
}
.cvc-bell__empty { padding: 14px 12px; margin: 0; font-size: 13px; color: var(--cv-muted, #7c7c7c); }
.cvc-bell__list { list-style: none; margin: 0; padding: 0; }
.cvc-bell__item a {
	display: block;
	padding: 10px 12px;
	border-bottom: 1px solid var(--cv-border, #ccc);
	color: var(--cv-text, #1c1c1c);
	text-decoration: none;
}
.cvc-bell__item:last-child a { border-bottom: 0; }
.cvc-bell__item a:hover { background: var(--cv-surface-2, #f6f7f8); text-decoration: none; }
.cvc-bell__item.is-unread a { box-shadow: inset 3px 0 0 #e02a1b; }
.cvc-bell__title { display: block; font-size: 13px; font-weight: 700; }
.cvc-bell__excerpt { display: block; margin-top: 2px; font-size: 12px; color: var(--cv-muted, #7c7c7c); }
.cvc-bell__time { display: block; margin-top: 2px; font-size: 11px; color: var(--cv-muted, #7c7c7c); }

.cvc-top { list-style: none; margin: 0; padding: 0; counter-reset: rdvtop; }
.cvc-top__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 0;
	border-bottom: 1px solid var(--cv-border, #ccc);
}
.cvc-top__item:last-child { border-bottom: 0; }
.cvc-top__rank {
	flex-shrink: 0;
	width: 20px;
	font-size: 12px;
	font-weight: 700;
	color: var(--cv-muted, #7c7c7c);
	text-align: center;
}
.cvc-top__user { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; color: var(--cv-text, #1c1c1c); text-decoration: none; }
.cvc-top__user:hover .cvc-top__name { color: var(--cv-link, #0079d3); }
.cvc-top__user img { border-radius: 50%; flex-shrink: 0; }
.cvc-top__name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvc-top__score { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--cv-muted, #7c7c7c); }

.cvc-profile__rep { font-weight: 700; color: var(--cv-text, #1c1c1c); }

/* Header image of a topic: a band that fades into the page on both sides
   instead of a hard edge running the full width. */
.cvc-topic-banner { line-height: 0; }
.cvc-topic-banner img {
	display: block;
	width: 100%;
	max-width: var(--cvc-banner-width, 900px);
	height: var(--cvc-banner-height, 150px);
	object-fit: cover;
	/* Crisp on the left so it lines up with the posts, fading out to the right. */
	-webkit-mask-image: linear-gradient(to right, #000 0, #000 62%, transparent 100%);
	mask-image: linear-gradient(to right, #000 0, #000 62%, transparent 100%);
}

@media (max-width: 720px) {
	.cvc-topic-banner img { height: calc(var(--cvc-banner-height, 150px) * 0.75); }
}

.cvc-header-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border: 1px dashed var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
}
.cvc-header-form__label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--cv-muted, #7c7c7c); }
.cvc-header-form__preview { width: 120px; height: 40px; object-fit: cover; border-radius: var(--cv-radius, 4px); }
.cvc-header-form__remove { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.cvc-header-form input[type="file"] { font-size: 13px; max-width: 100%; }
.cvc-header-form .cvc-hint { flex: 1 1 100%; margin: 0; }

/* Starting a community */
.cvc-topics__create { margin: 12px 0 0; }
.cvc-topics__create .cvc-post-button { width: 100%; justify-content: center; }
.cvc-form--create .cvc-fieldset { margin-bottom: 22px; }
.cvc-form--create .cvc-fieldset legend { font-size: 13px; }
.cvc-welcome { margin: 0; }

/* Topic picker with live search */
.cvc-topicpicker { position: relative; margin-bottom: 18px; }
.cvc-topicpicker__input { width: 100%; }
.cvc-topicpicker__results {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 40;
	max-height: 280px;
	overflow-y: auto;
	margin: 4px 0 0;
	padding: 0;
	list-style: none;
	background: var(--cv-surface, #fff);
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.cvc-topicpicker__item {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 9px 12px;
	cursor: pointer;
	border-bottom: 1px solid var(--cv-border, #ccc);
}
.cvc-topicpicker__item:last-child { border-bottom: 0; }
.cvc-topicpicker__item:hover,
.cvc-topicpicker__item.is-active { background: var(--cv-surface-2, #f6f7f8); }
.cvc-topicpicker__name { font-size: 14px; font-weight: 700; }
.cvc-topicpicker__meta { font-size: 11px; color: var(--cv-muted, #7c7c7c); }
.cvc-topicpicker__empty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 12px;
	font-size: 13px;
	color: var(--cv-muted, #7c7c7c);
}
.cvc-topicpicker__empty a { font-weight: 700; color: var(--cv-link, #0079d3); }

.cvc-create-widget .cvc-post-button { width: 100%; justify-content: center; }

/* Views and bookmarks */
.cvc-postbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
	font-size: 12px;
	color: var(--cv-muted, #7c7c7c);
}
.cvc-views { font-weight: 600; }
.cvc-bookmark { margin: 0; }
.cvc-bookmark__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--cv-border, #ccc);
	border-radius: 999px;
	background: transparent;
	color: var(--cv-muted, #7c7c7c);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.cvc-bookmark__button:hover { color: var(--cv-text, #1c1c1c); border-color: var(--cv-muted, #7c7c7c); }
.cvc-bookmark__button.is-saved { color: var(--cvc-btn-bg, #ff4500); border-color: var(--cvc-btn-bg, #ff4500); }

/* The small editor */
.cvc-editor {
	position: relative;
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	background: var(--cv-surface-2, #f6f7f8);
	overflow: hidden;
}
.cvc-editor__source { display: none !important; }
.cvc-editor__bar {
	display: flex;
	gap: 4px;
	padding: 6px 8px;
	border-bottom: 1px solid var(--cv-border, #ccc);
}
.cvc-editor__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 0;
	border-radius: var(--cv-radius, 4px);
	background: transparent;
	color: var(--cv-muted, #7c7c7c);
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.cvc-editor__button:hover { background: var(--cv-surface, #fff); color: var(--cv-text, #1c1c1c); }
.cvc-editor__area {
	min-height: 180px;
	padding: 12px;
	font: inherit;
	color: var(--cv-text, #1c1c1c);
	line-height: 1.6;
	outline: none;
	overflow-wrap: break-word;
}
.cvc-editor__area:focus { background: var(--cv-surface, #fff); }
.cvc-editor__area a { color: var(--cv-link, #0079d3); text-decoration: underline; }
.cvc-editor:focus-within { border-color: var(--cv-blue, #0079d3); }

.cvc-editor__pop {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px;
	border-top: 1px solid var(--cv-border, #ccc);
	background: var(--cv-surface, #fff);
}
.cvc-editor__pop input {
	flex: 1 1 200px;
	font: inherit;
	font-size: 13px;
	padding: 8px 10px;
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	background: var(--cv-surface-2, #f6f7f8);
}
.cvc-editor__apply,
.cvc-editor__cancel {
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--cv-border, #ccc);
	background: transparent;
	color: var(--cv-muted, #7c7c7c);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}
.cvc-editor__apply { background: var(--cvc-btn-bg, #ff4500); border-color: transparent; color: var(--cvc-btn-text, #fff); }

/* On a phone the flyout hangs below the header across the whole width. */
@media (max-width: 620px) {
	.cv-topbar .cvc-bell { position: static; }
	.cv-topbar .cvc-bell__panel {
		position: fixed;
		left: 12px;
		right: 12px;
		top: calc(var(--cv-header-height, 56px) + 8px);
		width: auto;
		max-width: none;
	}
}

.cvc-bookmark--card .cvc-bookmark__button {
	padding: 5px 10px;
	border: 0;
	font-size: 12px;
}
.cvc-bookmark--card .cvc-bookmark__button:hover { background: var(--cv-surface-2, #f6f7f8); }

/* Ordinary video in a card */
.cvc-video-wrap { display: block; position: relative; max-width: 100%; overflow: hidden; border-radius: var(--cv-radius, 4px); }
.cvc-video-wrap iframe,
.cvc-video-wrap embed,
.cvc-video-wrap object,
.cvc-video-wrap video {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	background: #000;
}
.cvc-video-wrap .wp-block-embed,
.cvc-video-wrap figure { margin: 0; }

/* Views and save as one pill under the post */
.cvc-postbar {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 20px;
	padding: 3px 4px 3px 14px;
	border: 1px solid var(--cv-border, #ccc);
	border-radius: 999px;
	background: var(--cv-surface-2, #f6f7f8);
	font-size: 12px;
	color: var(--cv-muted, #7c7c7c);
}
.cvc-postbar .cvc-views { font-weight: 700; white-space: nowrap; }
.cvc-postbar .cvc-bookmark__button {
	border: 0;
	background: transparent;
	padding: 6px 12px;
}
.cvc-postbar .cvc-bookmark__button:hover { background: var(--cv-surface, #fff); color: var(--cv-text, #1c1c1c); }
.cvc-postbar .cvc-bookmark__button.is-saved { background: var(--cv-surface, #fff); }

/* Reputation in its own colour */
.cvc-profile__rep,
.cvc-stat--rep .cvc-stat__value,
.cvc-login-widget__karma,
.cvc-top__score { color: var(--cvc-rep, var(--cvc-btn-bg, #ff4500)); }
.cvc-login-widget__karma,
.cvc-top__score { font-weight: 700; }

/* Source and social embeds */
.cvc-source {
	margin: 18px 0 0;
	font-size: 12px;
	color: var(--cv-muted, #7c7c7c);
}
.cvc-source__label {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	margin-right: 4px;
}
.cvc-social { margin: 0 0 20px; }
.cvc-social blockquote { margin: 0; border: 0; padding: 0; }
.cvc-social .fb-post,
.cvc-social iframe { max-width: 100% !important; }
.cvc-field input + input { margin-top: 6px; }

/* Inside the bar of the Clevie Social theme */
.cv-postfoot__pill .cvc-views {
	padding: 0 10px;
	font-size: 12px;
	font-weight: 700;
	color: var(--cv-muted, #7c7c7c);
	white-space: nowrap;
	border-left: 1px solid var(--cv-border, #ccc);
}
.cv-postfoot__pill .cvc-bookmark { margin: 0; }
.cv-postfoot__pill .cvc-bookmark__button {
	border: 0;
	background: transparent;
	padding: 6px 12px;
	border-radius: 999px;
}
.cv-postfoot__pill .cvc-bookmark__button:hover { background: var(--cv-surface, #fff); color: var(--cv-text, #1c1c1c); }
.cv-postfoot__pill .cvc-bookmark__button.is-saved { background: var(--cv-surface, #fff); }

/* Preview image with a play button, the player follows on click */
.cvc-facade { display: block; position: relative; }
.cvc-facade__button {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--cv-radius, 4px);
	overflow: hidden;
	background: #0d0d0d;
	cursor: pointer;
	line-height: 0;
}
.cvc-facade__button img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform .3s ease, opacity .2s ease;
}
.cvc-facade--upright .cvc-facade__button img { aspect-ratio: 9 / 16; }
.cvc-facade__button:hover img { transform: scale(1.03); opacity: .85; }
.cvc-facade__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	padding-left: 4px;
	transition: background-color .15s ease;
}
.cvc-facade__button:hover .cvc-facade__play { background: var(--cvc-btn-bg, #ff4500); }
.cvc-facade__label {
	position: absolute;
	left: 10px;
	bottom: 10px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
}
.cvc-player { display: block; margin: 0 0 20px; }

/* The height comes from the ratio. A fallback in vw is there for browsers that
   do not know aspect-ratio, and because a theme setting every iframe to
   height:auto would otherwise leave the frame at its default 150 pixels. */
.cvc-player iframe,
.cvc-player blockquote,
.cvc-player video {
	display: block !important;
	visibility: visible !important;
	width: 100%;
	max-width: 100%;
	height: 56vw;
	max-height: 70vh;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--cv-radius, 4px);
	background: #000;
}

@supports ( aspect-ratio: 16 / 9 ) {
	.cvc-player iframe,
	.cvc-player blockquote,
	.cvc-player video { height: auto; max-height: none; }
}
.cvc-player--upright iframe,
.cvc-player--upright blockquote,
.cvc-player--upright video { aspect-ratio: 9 / 16; }

/* In the media column the player fills the width. A height of its own would
   fight with the aspect ratio and collapse the frame on a phone. */
.cv-short__media .cvc-player,
.cv-mag__short .cvc-player { margin: 0; }

/* Hashtags */
.cvc-hashtag {
	color: var(--cv-link, #0079d3);
	font-weight: 600;
	text-decoration: none;
}
.cvc-hashtag:hover { text-decoration: underline; }
.cvc-tagcloud { display: flex; flex-wrap: wrap; gap: 6px; }
.cvc-hashtag--pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--cv-surface-2, #f6f7f8);
	border: 1px solid var(--cv-border, #ccc);
	font-size: 12px;
	color: var(--cv-text, #1c1c1c);
}
.cvc-hashtag--pill:hover {
	border-color: var(--cvc-btn-bg, #ff4500);
	color: var(--cvc-btn-bg, #ff4500);
	text-decoration: none;
}
.cvc-hashtag--pill span { font-size: 11px; color: var(--cv-muted, #7c7c7c); }

/* Player for an uploaded file */
.cvc-player--file video {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: var(--cvc-ratio, 16 / 9);
	background: #000;
	border-radius: var(--cv-radius, 4px);
}
.cvc-player--file.cvc-player--upright video { aspect-ratio: var(--cvc-ratio, 9 / 16); }

.cvc-player--waiting {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
	padding: 20px;
	border: 1px dashed var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	background: var(--cv-surface-2, #f6f7f8);
	font-size: 13px;
	color: var(--cv-muted, #7c7c7c);
	text-align: center;
}

/* The save button lines up with the text next to it. */
.cv-actions,
.cv-mag__actions { align-items: center; }
.cv-actions .cvc-bookmark,
.cv-mag__actions .cvc-bookmark { display: inline-flex; align-items: center; }
.cv-actions .cvc-bookmark__button,
.cv-mag__actions .cvc-bookmark__button { line-height: 1; }

/* The notice in place of an adult topic */
.cvc-adult { max-width: 560px; }
.cvc-adult__title { font-size: 20px; margin-bottom: 10px; }
.cvc-adult__notice { margin-bottom: 16px; }
.cvc-adult__state {
	padding: 12px 14px;
	border-radius: var(--cv-radius, 4px);
	background: var(--cv-surface-2, #f6f7f8);
	border: 1px solid var(--cv-border, #ccc);
	font-size: 14px;
}
.cvc-adult__form { margin-top: 16px; }

/* =========================================================
   Subscriptions
   ========================================================= */
.cvc-sub { margin: 0; display: inline-flex; }

/* The selectors carry the element name so a theme styling every button cannot
   paint over them. */
button.cvc-sub-button,
a.cvc-sub-button,
.cvc-sub-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	border: 1px solid var(--cvc-sub-bg, var(--cvc-btn-bg, #ff4500));
	border-radius: 999px;
	background: transparent;
	background-image: none;
	color: var(--cvc-sub-bg, var(--cvc-btn-bg, #ff4500));
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
}
button.cvc-sub-button:hover,
a.cvc-sub-button:hover,
.cvc-sub-button:hover {
	background: var(--cvc-sub-bg, var(--cvc-btn-bg, #ff4500));
	color: var(--cvc-sub-text, #fff);
	text-decoration: none;
	filter: none;
}
button.cvc-sub-button.is-on,
.cvc-sub-button.is-on {
	background: var(--cvc-sub-bg, var(--cvc-btn-bg, #ff4500));
	color: var(--cvc-sub-text, #fff);
}
button.cvc-sub-button.is-on:hover,
.cvc-sub-button.is-on:hover {
	background: var(--cvc-sub-hover, var(--cvc-btn-hover, #e03d00));
	border-color: var(--cvc-sub-hover, var(--cvc-btn-hover, #e03d00));
}

.cvc-sort__link--subs { position: relative; }

/* The card about a community */
.cvc-about__text { font-size: 13px; line-height: 1.6; }
.cvc-about__text p:last-child { margin-bottom: 0; }
.cvc-about__meta { margin: 10px 0 0; font-size: 12px; color: var(--cv-muted, #7c7c7c); }
.cvc-about__follow { margin-top: 12px; }
.cvc-about__follow .cvc-sub-button { width: 100%; justify-content: center; }
.cvc-about__head {
	margin: 16px 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--cv-muted, #7c7c7c);
}
.cvc-about__rules { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.cvc-about__rules li { margin-bottom: 5px; }

/* Newest from the subscriptions */
.cvc-subsfeed { list-style: none; margin: 0; padding: 0; }
.cvc-subsfeed .cvc-subsfeed__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var(--cv-border, #ccc);
	list-style: none;
}
.cvc-subsfeed .cvc-subsfeed__item:last-child { border-bottom: 0; }

/* The picture is a fixed square. A theme that sets images to full width would
   otherwise blow the row apart. */
.cvc-subsfeed .cvc-subsfeed__thumb {
	display: block;
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: var(--cv-radius, 4px);
	overflow: hidden;
	line-height: 0;
}
.cvc-subsfeed .cvc-subsfeed__thumb img {
	display: block;
	width: 52px;
	height: 52px;
	max-width: 52px;
	object-fit: cover;
	margin: 0;
	border-radius: 0;
}
.cvc-subsfeed .cvc-subsfeed__text {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
}
.cvc-subsfeed .cvc-subsfeed__topic {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: var(--cvc-btn-bg, #ff4500);
	text-decoration: none;
	margin-bottom: 1px;
}
.cvc-subsfeed .cvc-subsfeed__topic:hover { text-decoration: underline; }
.cvc-subsfeed .cvc-subsfeed__title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--cv-text, #1c1c1c);
	text-decoration: none;
}
.cvc-subsfeed .cvc-subsfeed__title:hover { color: var(--cv-link, #0079d3); }
.cvc-subsfeed .cvc-subsfeed__meta { display: block; margin-top: 2px; font-size: 11px; color: var(--cv-muted, #7c7c7c); }

.cvc-subs-privacy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
	padding: 10px 12px;
	border: 1px dashed var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	font-size: 13px;
}
button.cvc-subs-privacy__save,
.cvc-subs-privacy button {
	background: none;
	background-image: none;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--cvc-sub-bg, var(--cvc-btn-bg, #ff4500));
	padding: 0;
	line-height: 1.4;
}
.cvc-subs-privacy button:hover { text-decoration: underline; filter: none; }

/* Unfollow in the profile stays a quiet outline until it is hovered. */
.cvc-list--subs button.cvc-sub-button,
.cvc-list--subs .cvc-sub-button {
	background: transparent;
	color: var(--cvc-sub-bg, var(--cvc-btn-bg, #ff4500));
	border-color: var(--cvc-sub-bg, var(--cvc-btn-bg, #ff4500));
}
.cvc-list--subs button.cvc-sub-button:hover,
.cvc-list--subs .cvc-sub-button:hover {
	background: var(--cvc-sub-bg, var(--cvc-btn-bg, #ff4500));
	color: var(--cvc-sub-text, #fff);
}
.cvc-about-form { margin-bottom: 14px; }

.cvc-profile__actions { margin: 6px 0 0; }
.cvc-profile__actions .cvc-link { font-size: 13px; }

/* In the bar above a topic the buttons may wrap their label rather than push
   the page wider than the screen. */
.cv-archive-bar__actions .cvc-post-button {
	white-space: normal;
	text-align: center;
	max-width: 100%;
}

@media (max-width: 620px) {
	.cv-archive-bar__actions .cvc-post-button,
	.cv-archive-bar__actions button.cvc-sub-button,
	.cv-archive-bar__actions a.cvc-sub-button {
		font-size: 12px;
		padding: 7px 12px;
	}
}

/* Moderation: the list of communities, then one of them */
.cvc-mod__lead { font-size: 13px; color: var(--cv-muted, #7c7c7c); margin-bottom: 14px; }
.cvc-mod__back { margin: 0 0 16px; font-size: 13px; }
.cvc-mod__back a { font-weight: 700; }
.cvc-mod__back a:before { content: "← "; }

.cvc-modlist { list-style: none; margin: 0; padding: 0; }
.cvc-modlist__item {
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid var(--cv-border, #ccc);
}
.cvc-modlist__item:last-child { border-bottom: 0; }
.cvc-modlist__link {
	flex: 1;
	min-width: 0;
	display: block;
	padding: 12px 4px;
	color: var(--cv-text, #1c1c1c);
	text-decoration: none;
}
.cvc-modlist__link:hover { text-decoration: none; }
.cvc-modlist__link:hover .cvc-modlist__name { color: var(--cv-link, #0079d3); }
.cvc-modlist__name { display: block; font-size: 15px; font-weight: 700; }
.cvc-modlist__meta { display: block; margin-top: 2px; font-size: 12px; color: var(--cv-muted, #7c7c7c); }
.cvc-modlist__waiting {
	flex-shrink: 0;
	min-width: 22px;
	padding: 2px 8px;
	border-radius: 999px;
	background: #e02a1b;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

/* =========================================================
   A notice above a topic
   ========================================================= */
/* The notice sits above the topic bar and shares its background, so the two
   read as one block. Padding on the right keeps it off the screen edge in a
   theme that does not position it. */
/* Inside the Clevie Social theme the wrapper takes care of the position, so
   nothing here. A fallback for any other theme. */
.cvc-topicnotice { padding: 16px 20px 0; }
.cv-barextra .cvc-topicnotice { padding: 0; }
.cvc-topicnotice__inner {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 18px;
	border: 1px solid var(--cv-border, #ccc);
	border-left: 4px solid var(--cvc-notice-accent, #e0a800);
	border-radius: var(--cv-radius, 4px);
	background: var(--cv-surface-2, #f6f7f8);
}
.cvc-topicnotice__icon {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	color: var(--cvc-notice-accent, #e0a800);
}
.cvc-topicnotice__icon img,
.cvc-topicnotice__icon svg {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
}
.cvc-topicnotice__text {
	min-width: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--cv-text, #1c1c1c);
}
.cvc-topicnotice__text p:last-child { margin-bottom: 0; }

@media (max-width: 620px) {
	.cvc-topicnotice__inner { gap: 12px; padding: 12px 14px; }
	.cvc-topicnotice__icon { flex-basis: 44px; width: 44px; height: 44px; }
	.cvc-topicnotice__icon img,
	.cvc-topicnotice__icon svg { width: 44px; height: 44px; }
	.cvc-topicnotice__text { font-size: 13px; }
}

/* The search field under the topic list */
.cvc-topicfind { position: relative; margin-top: 12px; }
.cvc-topicfind__input {
	width: 100%;
	padding: 8px 12px;
	border: 1px solid var(--cv-border, #ccc);
	border-radius: 999px;
	background: var(--cv-surface-2, #f6f7f8);
	color: var(--cv-text, #1c1c1c);
	font: inherit;
	font-size: 13px;
}
.cvc-topicfind__results {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 4px);
	z-index: 50;
	max-height: 260px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--cv-surface, #fff);
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.cvc-topicfind__link {
	display: block;
	padding: 8px 12px;
	border-bottom: 1px solid var(--cv-border, #ccc);
	color: var(--cv-text, #1c1c1c);
	text-decoration: none;
}
.cvc-topicfind__results li:last-child .cvc-topicfind__link { border-bottom: 0; }
.cvc-topicfind__link:hover { background: var(--cv-surface-2, #f6f7f8); text-decoration: none; }
.cvc-topicfind__name { display: block; font-size: 13px; font-weight: 700; }
.cvc-topicfind__meta { display: block; font-size: 11px; color: var(--cv-muted, #7c7c7c); }
.cvc-topicfind__empty { padding: 10px 12px; font-size: 12px; color: var(--cv-muted, #7c7c7c); }

/* A mention */
.cvc-mention {
	font-weight: 600;
	color: var(--cvc-sub-bg, var(--cvc-btn-bg, #ff4500));
	text-decoration: none;
}
.cvc-mention:hover { text-decoration: underline; }

/* =========================================================
   The post form: pictures, video, and the link help
   ========================================================= */
.cvc-media {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 12px;
	margin: 0 0 8px;
}
.cvc-media__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	padding: 20px 14px;
	border: 2px dashed var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	background: var(--cv-surface-2, #f6f7f8);
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.cvc-media__drop:hover,
.cvc-media__drop:focus-within {
	border-color: var(--cvc-btn-bg, #ff4500);
	background: var(--cv-surface, #fff);
}
.cvc-media__drop.is-filled { border-style: solid; border-color: var(--cvc-btn-bg, #ff4500); }
.cvc-media__icon { color: var(--cvc-btn-bg, #ff4500); line-height: 0; }
.cvc-media__label { font-size: 14px; font-weight: 700; }
.cvc-media__hint { font-size: 11.5px; line-height: 1.45; color: var(--cv-muted, #7c7c7c); }

/* The file field itself is out of the way; the whole box is the button. */
.cvc-media__drop input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}
.cvc-media__drop--link { cursor: text; }
.cvc-media__drop--link input[type="url"] {
	width: 100%;
	margin-top: 4px;
	padding: 7px 10px;
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	background: var(--cv-surface, #fff);
	color: var(--cv-text, #1c1c1c);
	font: inherit;
	font-size: 13px;
	text-align: center;
}
.cvc-media__chosen {
	margin: 0 0 14px;
	font-size: 12px;
	color: var(--cv-muted, #7c7c7c);
	word-break: break-all;
}

/* The help flyout */
.cvc-help__button {
	background: none;
	border: 0;
	padding: 0;
	margin-left: 4px;
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	color: var(--cv-link, #0079d3);
	cursor: pointer;
	text-decoration: underline;
}
.cvc-help {
	display: block;
	position: relative;
	margin-top: 8px;
	padding: 12px 14px;
	border: 1px solid var(--cv-border, #ccc);
	border-left: 3px solid var(--cvc-btn-bg, #ff4500);
	border-radius: var(--cv-radius, 4px);
	background: var(--cv-surface-2, #f6f7f8);
	font-size: 12.5px;
	line-height: 1.6;
}
.cvc-help__title { display: block; font-weight: 700; margin-bottom: 4px; }
.cvc-help__text { display: block; }
.cvc-help__code {
	display: block;
	margin: 6px 0;
	padding: 7px 9px;
	border-radius: var(--cv-radius, 4px);
	background: var(--cv-surface, #fff);
	border: 1px solid var(--cv-border, #ccc);
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	word-break: break-all;
}

/* The slideshow */
.cvc-slides { position: relative; border-radius: var(--cv-radius, 4px); overflow: hidden; background: #000; }
.cvc-slides__track { position: relative; }
.cvc-slides__slide { display: none; margin: 0; }
.cvc-slides__slide.is-active { display: block; }
.cvc-slides__image { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; margin: 0 auto; }
.cvc-slides__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	cursor: pointer;
}
.cvc-slides__arrow:hover { background: rgba(0, 0, 0, .78); }
.cvc-slides__arrow--prev { left: 10px; }
.cvc-slides__arrow--next { right: 10px; }
.cvc-slides__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 10px;
	display: flex;
	justify-content: center;
	gap: 6px;
}
.cvc-slides__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
}
.cvc-slides__dot.is-active { background: #fff; }
.cvc-slides__count {
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}

/* =========================================================
   The profile on a phone
   ========================================================= */
@media (max-width: 620px) {
	/* Five tabs do not fit side by side, so the row scrolls instead of
	   spilling over the edge of the screen. */
	.cvc-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		gap: 0;
	}
	.cvc-tabs::-webkit-scrollbar { display: none; }
	.cvc-tabs__link {
		flex: 0 0 auto;
		padding: 9px 12px;
		font-size: 12.5px;
		white-space: nowrap;
	}

	/* Four figures in a row leave nothing but the numbers. */
	.cvc-profile__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.cvc-stat { padding: 10px 8px; }
	.cvc-stat__value { font-size: 17px; }

	.cvc-profile__head { gap: 12px; }
	.cvc-profile__avatar { width: 56px; height: 56px; }
	.cvc-profile__name { font-size: 17px; }

	.cvc-list__item { flex-wrap: wrap; }
	.cvc-list--subs .cvc-list__item { gap: 8px; }

	.cvc-subs-privacy { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* =========================================================
   The emoji picker
   ========================================================= */
.cvc-emoji { position: relative; display: inline-block; margin-top: 6px; }
.cvc-emoji__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	background: var(--cv-surface-2, #f6f7f8);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
}
.cvc-emoji__toggle:hover { border-color: var(--cv-muted, #7c7c7c); background: var(--cv-surface, #fff); }

.cvc-emoji__panel {
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	z-index: 60;
	width: 292px;
	max-height: 260px;
	overflow-y: auto;
	padding: 10px 12px;
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	background: var(--cv-surface, #fff);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .2);
}
.cvc-emoji__group + .cvc-emoji__group { margin-top: 10px; }
.cvc-emoji__label {
	display: block;
	margin-bottom: 4px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--cv-muted, #7c7c7c);
}
.cvc-emoji__grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.cvc-emoji__item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	padding: 0;
	border: 0;
	border-radius: var(--cv-radius, 4px);
	background: none;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}
.cvc-emoji__item:hover { background: var(--cv-surface-2, #f6f7f8); }

/* On a phone the panel would otherwise reach past the edge of the screen. */
@media (max-width: 620px) {
	.cvc-emoji__panel { width: min(292px, calc(100vw - 40px)); }
	.cvc-emoji__grid { grid-template-columns: repeat(8, 1fr); }
}

/* Settings sits next to the name, not in the row of tabs: it is not a view of
   the profile, it is where you change it. */
.cvc-profile__name {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}
.cvc-profile__settings {
	font-size: 13px;
	font-weight: 700;
	color: var(--cvc-sub-bg, var(--cvc-btn-bg, #ff4500));
	text-decoration: none;
}
.cvc-profile__settings:hover { text-decoration: underline; }

/* =========================================================
   Cropping a profile picture
   ========================================================= */
.cvc-crop {
	margin-top: 14px;
	padding: 14px;
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
	background: var(--cv-surface-2, #f6f7f8);
	max-width: 320px;
}
.cvc-crop__stage {
	position: relative;
	width: 256px;
	max-width: 100%;
	margin: 0 auto 12px;
	border-radius: var(--cv-radius, 4px);
	overflow: hidden;
	background: #000;
	touch-action: none;
}
.cvc-crop__stage canvas {
	display: block;
	width: 100%;
	height: auto;
	cursor: grab;
}
.cvc-crop__stage canvas:active { cursor: grabbing; }

/* A circle over the square, because that is how the avatar is shown. */
.cvc-crop__mask {
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: 0 0 0 999px rgba(0, 0, 0, .45);
	border-radius: 50%;
}

.cvc-crop__zoom { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.cvc-crop__zoom input { flex: 1; }
.cvc-crop__hint { margin: 8px 0 10px; font-size: 11.5px; color: var(--cv-muted, #7c7c7c); }
.cvc-crop__actions { display: flex; align-items: center; gap: 12px; margin: 0; }
.cvc-crop__actions .cvc-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var(--cv-muted, #7c7c7c);
	cursor: pointer;
	text-decoration: underline;
}

/* ---------------------------------------------------------
 * Blocking
 *
 * Kept plain on purpose. A block button is not something to
 * invite people to press, and the list of people somebody
 * blocked is not a trophy cabinet.
 * --------------------------------------------------------- */

.cvc-block {
	display: inline;
	margin: 0;
}

.cvc-block__button {
	cursor: pointer;
}

.cvc-block-actions {
	margin: 12px 0 0;
}

.cvc-notice--blocked {
	border-left: 3px solid #b32d00;
}

.cvc-notice--blocked p {
	margin: 0 0 6px;
}

.cvc-notice--blocked p:last-child {
	margin-bottom: 0;
}

.cvc-blocklist {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.cvc-blocklist__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cvc-border, #e6e8ea);
}

.cvc-blocklist__item:last-child {
	border-bottom: 0;
}

.cvc-blocklist__item img {
	border-radius: 50%;
}

.cvc-blocklist__name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cvc-blocklist__form {
	margin: 0;
}

.cvc-block-link {
	font-size: 0.85em;
	opacity: 0.65;
	text-decoration: none;
	white-space: nowrap;
}

.cvc-block-link:hover,
.cvc-block-link:focus {
	opacity: 1;
	text-decoration: underline;
}

.cvc-block-link--byline::before,
.cvc-block-link--comment::before {
	content: "\00b7";
	margin-right: 0.4em;
	opacity: 0.6;
}

/* ---------------------------------------------------------
 * Private messages
 * --------------------------------------------------------- */

.cvc-profile__actions {
	margin: 6px 0 0;
}

.cvc-message-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--cvc-border, #cfd4d9);
	border-radius: var(--cvc-btn-radius, 999px);
	background: var(--cvc-surface, #fff);
	color: inherit;
	font-size: 0.9em;
	line-height: 1;
	text-decoration: none;
}

.cvc-message-button:hover,
.cvc-message-button:focus {
	background: var(--cvc-surface-2, #f6f7f8);
}

.cvc-tabs__badge,
.cvc-threads__badge {
	display: inline-block;
	min-width: 18px;
	margin-left: 4px;
	padding: 1px 5px;
	border-radius: 999px;
	background: #d93900;
	color: #fff;
	font-size: 0.72em;
	line-height: 1.5;
	text-align: center;
}

.cvc-threads {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.cvc-threads__item {
	border-bottom: 1px solid var(--cvc-border, #e6e8ea);
}

.cvc-threads__item:last-child {
	border-bottom: 0;
}

.cvc-threads__link {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 4px;
	color: inherit;
	text-decoration: none;
}

.cvc-threads__link:hover {
	background: var(--cvc-surface-2, #f6f7f8);
}

.cvc-threads__item img {
	border-radius: 50%;
	flex: 0 0 auto;
}

.cvc-threads__body {
	flex: 1;
	min-width: 0;
}

.cvc-threads__name {
	display: block;
	font-weight: 600;
}

.cvc-threads__excerpt {
	display: block;
	overflow: hidden;
	color: var(--cvc-muted, #6b7177);
	font-size: 0.9em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cvc-threads__item.is-unread .cvc-threads__excerpt {
	color: inherit;
	font-weight: 600;
}

.cvc-threads__time {
	flex: 0 0 auto;
	color: var(--cvc-muted, #6b7177);
	font-size: 0.8em;
}

.cvc-thread__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--cvc-border, #e6e8ea);
}

.cvc-thread__who {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: inherit;
	text-decoration: none;
}

.cvc-thread__who img {
	border-radius: 50%;
}

.cvc-messages {
	margin: 16px 0;
	padding: 0;
	list-style: none;
}

.cvc-messages__item {
	margin-bottom: 12px;
	max-width: 78%;
}

.cvc-messages__item.is-mine {
	margin-left: auto;
	text-align: right;
}

.cvc-messages__bubble {
	display: inline-block;
	padding: 8px 12px;
	border-radius: 14px;
	background: var(--cvc-surface-2, #f0f2f4);
	text-align: left;
	overflow-wrap: anywhere;
}

.cvc-messages__item.is-mine .cvc-messages__bubble {
	background: var(--cvc-accent, #0079d3);
	color: #fff;
}

.cvc-messages__bubble p {
	margin: 0 0 8px;
}

.cvc-messages__bubble p:last-child {
	margin-bottom: 0;
}

.cvc-messages__time {
	display: block;
	margin-top: 3px;
	color: var(--cvc-muted, #6b7177);
	font-size: 0.75em;
}

.cvc-message-form textarea {
	width: 100%;
}

.cvc-thread__delete {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid var(--cvc-border, #e6e8ea);
}