/*
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: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 18px;
	border-bottom: 0;
}
.cvc-tabs__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 46px;
	box-sizing: border-box;
	padding: 10px 8px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	color: var(--cv-muted, #7c7c7c);
	text-decoration: none;
	background: var(--cv-surface-2, #f6f7f8);
	border: 1px solid var(--cv-border, #ccc);
	border-radius: var(--cv-radius, 4px);
}
.cvc-tabs__link:hover {
	color: var(--cv-text, #1c1c1c);
	text-decoration: none;
	border-color: var(--cvc-btn-bg, #ff4500);
}
.cvc-tabs__link.is-active {
	color: var(--cv-text, #1c1c1c);
	border-color: var(--cvc-btn-bg, #ff4500);
	box-shadow: inset 0 -2px 0 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-list__meta .cvc-list__status--offline { color: #d63638; font-style: normal; font-weight: 600; }
.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__toggle svg { display: block; width: 20px; height: 20px; color: inherit; fill: currentColor; }
.cv-topbar .cvc-bell__toggle { color: var(--cv-text, #d7dadc); }
.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: 1000px) and (min-width: 621px) {
	/* Keep every profile tab inside the profile card. Tabs may wrap when the
	   profile column is narrow; no item is allowed to force the card wider. */
	.cvc-tabs {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 8px;
		max-width: 100%;
		overflow: hidden;
	}
	.cvc-tabs__link {
		min-width: 0;
		min-height: 44px;
		padding: 8px 6px;
		font-size: 12px;
		line-height: 1.25;
		white-space: normal;
		overflow-wrap: anywhere;
	}
}

@media (max-width: 620px) {
	/* On phones the profile menu becomes a compact two-column grid. */
	.cvc-tabs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		overflow: visible;
	}
	.cvc-tabs__link {
		min-height: 42px;
		padding: 8px 6px;
		font-size: 12px;
		white-space: normal;
	}

	/* 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(--cv-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 {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 10px;
	vertical-align: middle;
}

/* The envelope and the block button carry cvc-post-button, so they take the
   same colour as "New post" and stay in step with it. Only the sizing is
   nudged down: beside a name they are a companion, not the main action. */
.cvc-profile__actions .cvc-post-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	font-size: 0.82em;
	line-height: 1;
	white-space: nowrap;
}

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

.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(--cv-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(--cv-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(--cv-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(--cv-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(--cv-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;
	/* White is set outright rather than through a variable: the reply bubble
	   has to stay white on a dark site too, which is the whole point of the
	   contrast against the blue one. */
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: #fff;
	color: #14171a;
	text-align: left;
	overflow-wrap: anywhere;
}

.cvc-messages__item.is-mine .cvc-messages__bubble {
	border-color: transparent;
	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(--cv-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(--cv-border, #e6e8ea);
}

.cvc-thread__subject {
	margin: 14px 0 0;
	font-size: 1.05em;
	line-height: 1.3;
}

.cvc-threads__subject {
	display: block;
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cvc-message-form label[for="cvc-message-subject"] {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 0.9em;
}

.cvc-message-form input[type="text"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--cv-border, #cfd4d9);
	border-radius: var(--cv-radius, 6px);
	background: var(--cv-surface, #fff);
	color: inherit;
}

/* ---------------------------------------------------------
 * Downloading your data, and leaving
 * --------------------------------------------------------- */

.cvc-privacy {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--cv-border, #e6e8ea);
}

.cvc-privacy h3 {
	margin: 24px 0 6px;
	font-size: 1.05em;
}

.cvc-privacy h3:first-child {
	margin-top: 0;
}

.cvc-privacy code {
	padding: 1px 5px;
	border-radius: 3px;
	background: var(--cv-surface-2, #f0f2f4);
	font-size: 0.9em;
}

/* Set apart from the rest, because it cannot be undone. */
.cvc-privacy__delete {
	margin-top: 10px;
	padding: 14px 16px;
	border: 1px solid rgba(179, 45, 0, 0.35);
	border-radius: var(--cv-radius, 6px);
}

.cvc-privacy__delete input[type="password"],
.cvc-privacy__delete input[type="text"] {
	width: 100%;
	max-width: 280px;
	padding: 8px 10px;
	border: 1px solid var(--cv-border, #cfd4d9);
	border-radius: var(--cv-radius, 6px);
	background: var(--cv-surface, #fff);
	color: inherit;
}

.cvc-privacy__danger {
	background: #b32d00;
	border-color: #b32d00;
	color: #fff;
}

.cvc-privacy__danger:hover {
	background: #8f2400;
	border-color: #8f2400;
}

.cvc-login-widget__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;
}

/* ---------------------------------------------------------
 * Fixing, reporting and pinning
 * --------------------------------------------------------- */

.cvc-comment-edit,
.cvc-comment-report {
	margin-left: 8px;
	font-size: 0.85em;
	opacity: 0.65;
	text-decoration: none;
}

.cvc-comment-edit:hover,
.cvc-comment-report:hover {
	opacity: 1;
	text-decoration: underline;
}

.cvc-comment-edited {
	display: block;
	margin-top: 4px;
	color: var(--cv-muted, #6b7177);
	font-size: 0.8em;
	font-style: italic;
}

.cvc-comment-editor {
	margin: 8px 0;
}

.cvc-comment-editor textarea {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--cv-border, #cfd4d9);
	border-radius: var(--cv-radius, 6px);
	background: var(--cv-surface, #fff);
	color: inherit;
	font: inherit;
}

.cvc-comment-delete {
	margin-left: 10px;
	color: #b32d00;
}

/* A pinned post sits at the top, so it says so rather than looking like an
   ordinary one that happens to be first. */
.cvc-pinned-flag {
	display: inline-block;
	margin-right: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	/* The button colours, so the flag is seen rather than read past. A pinned
	   post is pinned because somebody should notice it. */
	background: var(--cvc-btn-bg, #ff4500);
	color: var(--cvc-btn-text, #fff);
	font-size: 0.7em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	vertical-align: middle;
}

.cvc-pin-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--cv-border, #e6e8ea);
	font-size: 0.9em;
}

.cvc-pin-one {
	color: var(--cv-muted, #6b7177);
}

/* ---------------------------------------------------------
 * Report, block and edit: links or buttons
 *
 * The choice sits in the Customizer. Both live here rather
 * than in the markup, so switching costs a class on the body
 * and nothing else.
 * --------------------------------------------------------- */

.cvc-actions-as-buttons .cvc-comment-edit,
.cvc-actions-as-buttons .cvc-comment-report,
.cvc-actions-as-buttons .cvc-block-link,
.cvc-actions-as-buttons .cvc-report__toggle,
.cvc-actions-as-buttons .cvc-pin-link {
	display: inline-block;
	margin-left: 6px;
	padding: 3px 10px;
	border: 1px solid var(--cv-border, #cfd4d9);
	border-radius: var(--cv-radius, 999px);
	background: var(--cv-surface, #fff);
	opacity: 1;
	font-size: 0.78em;
	line-height: 1.6;
	text-decoration: none;
	vertical-align: middle;
}

.cvc-actions-as-buttons .cvc-comment-edit:hover,
.cvc-actions-as-buttons .cvc-comment-report:hover,
.cvc-actions-as-buttons .cvc-block-link:hover,
.cvc-actions-as-buttons .cvc-report__toggle:hover,
.cvc-actions-as-buttons .cvc-pin-link:hover {
	background: var(--cv-surface-2, #f6f7f8);
	text-decoration: none;
}

/* The separating dot before an inline link would sit oddly in front of a
   button, so it goes. */
.cvc-actions-as-buttons .cvc-block-link--byline::before,
.cvc-actions-as-buttons .cvc-block-link--comment::before {
	content: none;
	margin: 0;
}

/* On a phone a target should be reachable with a thumb, whichever style is
   chosen. */
@media (max-width: 600px) {
	.cvc-actions-as-buttons .cvc-comment-edit,
	.cvc-actions-as-buttons .cvc-comment-report,
	.cvc-actions-as-buttons .cvc-block-link,
	.cvc-actions-as-buttons .cvc-report__toggle,
	.cvc-actions-as-buttons .cvc-pin-link {
		padding: 6px 12px;
	}
}

/* The page that says a message is on its way. Registration and password reset
   both end here, and it is where people give up when it is missing. */
.cvc-notice--mail {
	padding: 20px 22px;
	border-left: 3px solid var(--cvc-btn-bg, #ff4500);
}

.cvc-notice--mail h2 {
	margin: 0 0 8px;
	font-size: 1.25em;
}

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

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

.cvc-reset {
	max-width: 420px;
	margin: 0 0 28px;
}

.cvc-reset h2 {
	margin: 0 0 6px;
}

.cvc-reset input[type="password"] {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--cv-border, #cfd4d9);
	border-radius: var(--cv-radius, 6px);
	background: var(--cv-surface, #fff);
	color: inherit;
}

/* ---------------------------------------------------------
 * Following members
 * --------------------------------------------------------- */

/* Already following reads as a state, not an invitation, so it steps back to an
   outline and only turns red on hover, where it says what a click would do. */
.cvc-follow-link--on {
	background: transparent;
	border: 1px solid var(--cv-border, #cfd4d9);
	color: var(--cv-muted, #6b7177);
}

.cvc-follow-link--on:hover {
	border-color: #b32d00;
	background: transparent;
	color: #b32d00;
}

.cvc-member-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

.cvc-member-list__item a {
	display: flex;
	gap: 10px;
	align-items: center;
	text-decoration: none;
}

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

.cvc-member-list__karma {
	margin-left: auto;
	color: var(--cv-muted, #6b7177);
	font-size: 0.85em;
}

/* ---------------------------------------------------------
 * Starting a community: the two halves
 *
 * They are two different things — describing a community and
 * writing in it — and the eye needs to see that before it
 * reads the labels. Eighteen pixels of margin was not enough
 * to say so.
 * --------------------------------------------------------- */

.cvc-form--create .cvc-fieldset--post {
	margin-top: 34px;
	padding-top: 20px;
	border-top-width: 3px;
	background: var(--cv-surface-2, rgba(127, 127, 127, 0.06));
}

/* The note that nothing exists until this post is sent. Set apart, because
   somebody who fills in the top half and leaves has made nothing at all and
   will not know why. */
.cvc-notice--inline {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-left: 3px solid var(--cvc-btn-bg, #ff4500);
	border-radius: var(--cv-radius, 4px);
	background: var(--cv-surface, rgba(127, 127, 127, 0.08));
	font-size: 0.92em;
	line-height: 1.5;
}

@media (max-width: 600px) {
	.cvc-form--create .cvc-fieldset--post {
		margin-top: 24px;
	}
}

/* Reversible author post removal. */
.cvc-post-owner-action__link {
	display: inline;
}