/* ==========================================================================
   StudentLife Reddit — single-post comments
   Final visual polish for the native WordPress comment system.

   Scope: single-post comment area only.
   This file intentionally does not alter voting, post cards, feeds,
   sidebars, Load More, or the site's global layout.
   ========================================================================== */

.sl-layout--single .sl-comments-panel {
	width: 100%;
	max-width: 900px;
	margin: 14px auto 0;
}

/* Remove the extra outer Comments heading. */
.sl-layout--single .sl-comments-panel__header,
.sl-layout--single .sl-comments__toolbar-left {
	display: none !important;
}

/* Keep the comments surface open and Reddit-like rather than card-like. */
.sl-layout--single .sl-comments {
	display: flex;
	flex-direction: column;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* The existing PHP order is list first / composer last.
   Flex ordering puts the composer first without touching WordPress reply logic. */
.sl-layout--single .sl-comments__toolbar {
	display: contents;
}

.sl-layout--single .sl-comment-form-wrap {
	order: 1;
}

.sl-layout--single .sl-comment-sort {
	order: 2;
}

.sl-layout--single .sl-comment-list,
.sl-layout--single .sl-comments-empty,
.sl-layout--single .sl-comments-closed {
	order: 3;
}

/* --------------------------------------------------------------------------
   Main composer
   -------------------------------------------------------------------------- */

.sl-layout--single .sl-comment-form-wrap {
	display: block;
	margin: 0 0 7px;
	padding: 0;
	border: 0;
}

.sl-layout--single .sl-comment-composer__avatar {
	display: none;
}

.sl-layout--single .sl-comment-composer__body {
	width: 100%;
	min-width: 0;
}

.sl-layout--single .sl-comment-form-wrap form {
	position: relative;
	margin: 0;
	padding: 0;
}

/* Hide the WordPress title/label visually, while retaining the native markup. */
.sl-layout--single .sl-comment-form__title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sl-layout--single .sl-comment-form-wrap .logged-in-as,
.sl-layout--single .sl-comment-form-wrap .comment-notes {
	display: none !important;
}

.sl-layout--single .sl-comment-form-wrap .comment-form-comment {
	position: relative;
	margin: 0;
}

.sl-layout--single .sl-comment-form-wrap label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.sl-layout--single .sl-comment-form-wrap textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	min-height: 44px;
	max-height: 150px;
	margin: 0;
	padding: 11px 14px;
	border: 1px solid var(--sl-border);
	border-radius: 999px;
	outline: 0;
	background: #0d1216 !important;
	box-shadow: none;
	color: var(--sl-text);
	font-family: var(--sl-font-ui);
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
	resize: none;
	overflow-y: hidden;
	transition: min-height .16s ease, border-color .16s ease, border-radius .16s ease, box-shadow .16s ease;
}

.sl-layout--single .sl-comment-form-wrap textarea::placeholder {
	color: #91a0ad;
	opacity: 1;
}

.sl-layout--single .sl-comment-form-wrap form:focus-within textarea {
	height: 92px;
	min-height: 92px;
	border-radius: 14px;
	border-color: #3b6fe8;
	box-shadow: 0 0 0 1px rgba(59, 111, 232, .12);
	overflow-y: auto;
}

/* Main Comment button is deliberately quiet until the composer is opened. */
.sl-layout--single .sl-comment-form-wrap .form-submit {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: 7px 0 0;
}

.sl-layout--single .sl-comment-form-wrap .form-submit input[type="submit"] {
	min-height: 32px;
	padding: 0 15px;
	border: 0;
	border-radius: 999px;
	background: var(--sl-blue);
	color: #fff;
	font-family: var(--sl-font-ui);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.sl-layout--single .sl-comment-form-wrap:not(:focus-within) .form-submit {
	display: flex;
}

.sl-layout--single .sl-comment-form-wrap .form-submit input[type="submit"]:hover {
	background: var(--sl-blue-hover);
}

/* --------------------------------------------------------------------------
   Sort bar
   -------------------------------------------------------------------------- */

.sl-layout--single .sl-comment-sort {
	display: flex;
	align-items: center;
	gap: 2px;
	width: 100%;
	margin: 0 0 7px;
	padding: 0;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: none;
}

.sl-layout--single .sl-comment-sort::-webkit-scrollbar {
	display: none;
}

.sl-layout--single .sl-comment-sort::before {
	content: 'Sort by:';
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	min-height: 28px;
	margin-right: 2px;
	color: var(--sl-muted);
	font-family: var(--sl-font-ui);
	font-size: 11px;
	font-weight: 500;
}

.sl-layout--single .sl-comment-sort a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 0 9px;
	border-radius: 999px;
	color: var(--sl-muted);
	font-family: var(--sl-font-ui);
	font-size: 11px;
	font-weight: 600;
	text-decoration: none;
}

.sl-layout--single .sl-comment-sort a:hover,
.sl-layout--single .sl-comment-sort a.is-active {
	background: #1d252c;
	color: #f4f5f6;
}

/* --------------------------------------------------------------------------
   Comment list / threading
   -------------------------------------------------------------------------- */

.sl-layout--single .sl-comment-list {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-layout--single .sl-comment-list > .comment {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-layout--single .sl-comment__body {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 7px 0 5px;
}

.sl-layout--single .sl-comment__rail {
	position: relative;
	width: 22px;
	flex: 0 0 22px;
	min-height: 29px;
}

.sl-layout--single .sl-comment__rail::before {
	content: '';
	position: absolute;
	left: 10px;
	top: 0;
	bottom: -5px;
	width: 1px;
	background: #263039;
}

.sl-layout--single .sl-comment__rail span {
	position: absolute;
	left: 5px;
	top: 5px;
	width: 10px;
	height: 10px;
	box-sizing: border-box;
	border: 1px solid #45525d;
	border-radius: 50%;
	background: #0b0f12;
}

.sl-layout--single .sl-comment__main {
	min-width: 0;
	flex: 1 1 auto;
	padding: 0 0 5px;
}

.sl-layout--single .sl-comment__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 28px;
}

.sl-layout--single .sl-comment__author {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
}

.sl-layout--single .sl-comment__avatar-link,
.sl-layout--single .sl-comment__avatar-image {
	display: block;
	width: 24px !important;
	height: 24px !important;
	flex: 0 0 24px;
	border-radius: 50%;
}

.sl-layout--single .sl-comment__author-name {
	color: #dce4eb;
	font-family: var(--sl-font-ui);
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
}

.sl-layout--single .sl-comment__dot {
	color: #5f6c77;
	font-size: 11px;
}

.sl-layout--single .sl-comment__date {
	color: #7f8c97;
	font-family: var(--sl-font-ui);
	font-size: 11px;
	font-weight: 500;
	line-height: 18px;
}

.sl-layout--single .sl-comment__more {
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #7f8c97;
	font-family: var(--sl-font-ui);
	font-size: 12px;
	line-height: 28px;
	cursor: pointer;
}

.sl-layout--single .sl-comment__more:hover {
	background: #171e24;
	color: #dce4eb;
}

.sl-layout--single .sl-comment__text {
	margin: 4px 0 4px;
	color: #d8e0e6;
	font-family: var(--sl-font-ui);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}

.sl-layout--single .sl-comment__text p {
	margin: 0 0 6px;
}

.sl-layout--single .sl-comment__text p:last-child {
	margin-bottom: 0;
}

.sl-layout--single .sl-comment__text a {
	color: #6ea8ff;
}

.sl-layout--single .sl-comment__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	margin-left: -5px;
}

.sl-layout--single .sl-comment-action,
.sl-layout--single .sl-comment-action-wrap .comment-reply-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	padding: 0 8px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: #84919c;
	font-family: var(--sl-font-ui);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.sl-layout--single .sl-comment-action:hover,
.sl-layout--single .sl-comment-action-wrap .comment-reply-link:hover {
	background: #171e24;
	color: #e8edf1;
}

.sl-layout--single .sl-comment-score {
	min-width: 18px;
	text-align: center;
	color: #8c9aa5;
	font-family: var(--sl-font-ui);
	font-size: 11px;
	font-weight: 600;
}

/* Nested replies use indentation + a quieter rail, without card backgrounds. */
.sl-layout--single .sl-comment-children {
	margin: 0 0 0 22px;
	padding: 0 0 0 14px;
	list-style: none;
}

.sl-layout--single .sl-comment-children > .comment {
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   Inline reply composer — this is the #respond WordPress moves under a reply.
   -------------------------------------------------------------------------- */

.sl-layout--single #respond {
	position: relative;
	box-sizing: border-box;
	width: calc(100% - 30px);
	margin: 5px 0 10px 30px;
	padding: 6px 10px 4px;
	border: 1px solid #394650;
	border-radius: 16px;
	background: #0d1217;
}

.sl-layout--single #respond form {
	margin: 0;
}

.sl-layout--single #respond .sl-comment-form__title {
	position: static;
	width: auto;
	height: 0;
	margin: 0;
	padding: 0;
	overflow: visible;
	clip: auto;
	white-space: nowrap;
	border: 0;
	color: transparent;
	font-family: var(--sl-font-ui);
	font-size: 0;
	font-weight: 400;
	line-height: 0;
}

/* When WordPress moves #respond inside a comment <li>, this is the active
   reply composer. Show the contextual reply label like Reddit. */
.sl-layout--single li #respond .sl-comment-form__title {
	height: 18px;
	margin: 0 0 3px;
	color: #78a9ff;
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
}

.sl-layout--single #respond .sl-comment-form__title #cancel-comment-reply-link {
	position: absolute;
	right: 79px;
	bottom: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 32px;
	padding: 0 12px;
	border-radius: 999px;
	background: #202b38;
	color: #dbe6f2;
	font-family: var(--sl-font-ui);
	font-size: 11px;
	font-weight: 700;
	line-height: 32px;
	text-decoration: none;
}

.sl-layout--single #respond .sl-comment-form__title #cancel-comment-reply-link:hover {
	background: #2a3745;
	color: #fff;
}

.sl-layout--single #respond .comment-form-comment {
	margin: 0;
}

.sl-layout--single #respond .comment-form-comment label,
.sl-layout--single #respond .logged-in-as,
.sl-layout--single #respond .comment-notes {
	display: none !important;
}

.sl-layout--single #respond textarea,
.sl-layout--single #respond textarea#comment {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 30px;
	min-height: 30px;
	margin: 0;
	padding: 4px 4px;
	border: 0 !important;
	outline: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: #edf2f5;
	font-family: var(--sl-font-ui);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	resize: none;
}

.sl-layout--single #respond textarea::placeholder {
	color: #8da1b3;
	opacity: 1;
}

.sl-layout--single #respond .form-submit {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: 2px 0 0;
	padding: 0;
}

.sl-layout--single #respond .form-submit input[type="submit"] {
	order: 2;
	min-height: 30px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: #0067d9;
	color: #fff;
	font-family: var(--sl-font-ui);
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
}

.sl-layout--single #respond .form-submit input[type="submit"]:hover {
	background: #0876ee;
}

/* The native cancel link remains inside #respond so WordPress moves it
   together with the reply composer. It is visually placed beside Comment. */

/* If WordPress outputs additional fields, keep them compact and readable. */
.sl-layout--single #respond .comment-form-author,
.sl-layout--single #respond .comment-form-email,
.sl-layout--single #respond .comment-form-url {
	margin: 8px 0 0;
}

.sl-layout--single #respond input[type="text"],
.sl-layout--single #respond input[type="email"],
.sl-layout--single #respond input[type="url"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 38px;
	padding: 7px 10px;
	border: 1px solid var(--sl-border);
	border-radius: 9px;
	background: #0b1014;
	color: #fff;
	font-family: var(--sl-font-ui);
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   Main composer overrides

   The initial composer also contains #respond. Keep it visually distinct
   from the expanded inline reply composer that WordPress moves under a
   comment after Reply is clicked.
   -------------------------------------------------------------------------- */

.sl-layout--single .sl-comment-form-wrap #respond {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

.sl-layout--single .sl-comment-form-wrap #respond .sl-comment-form__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	font-size: 0;
}

.sl-layout--single .sl-comment-form-wrap #respond .comment-form-comment {
	margin: 0;
}

.sl-layout--single .sl-comment-form-wrap #respond textarea {
	height: 44px;
	min-height: 44px;
	padding: 11px 14px;
	border: 1px solid var(--sl-border) !important;
	border-radius: 999px;
	background: #0d1216 !important;
	color: var(--sl-text);
	font-size: 13px;
	line-height: 20px;
}

.sl-layout--single .sl-comment-form-wrap #respond form:focus-within textarea {
	height: 92px;
	min-height: 92px;
	border-radius: 14px;
	border-color: #3b6fe8 !important;
	box-shadow: 0 0 0 1px rgba(59, 111, 232, .12) !important;
	overflow-y: auto;
}

.sl-layout--single .sl-comment-form-wrap #respond .form-submit {
	margin: 7px 0 0;
}

.sl-layout--single .sl-comment-form-wrap #respond .form-submit input[type="submit"] {
	min-height: 32px;
	padding: 0 15px;
	border-radius: 999px;
	background: var(--sl-blue);
	font-size: 12px;
}

.sl-layout--single .sl-comment-form-wrap #respond .sl-comment-form__title #cancel-comment-reply-link {
	display: none;
}

/* --------------------------------------------------------------------------
   Empty / closed states
   -------------------------------------------------------------------------- */

.sl-layout--single .sl-comments-empty {
	padding: 10px 0 14px;
	border: 0;
	background: transparent;
	text-align: left;
}

.sl-layout--single .sl-comments-empty__icon {
	display: none;
}

.sl-layout--single .sl-comments-empty__title {
	margin: 0;
	color: #dce4eb;
	font-family: var(--sl-font-ui);
	font-size: 14px;
	font-weight: 600;
}

.sl-layout--single .sl-comments-empty__text {
	margin: 3px 0 0;
	color: var(--sl-muted);
	font-family: var(--sl-font-ui);
	font-size: 12px;
}

.sl-layout--single .sl-comments-closed {
	margin: 10px 0;
	padding: 10px 0;
	border: 0;
	background: transparent;
	color: var(--sl-muted);
	font-size: 13px;
}

/* --------------------------------------------------------------------------
   Accessibility
   -------------------------------------------------------------------------- */

.sl-layout--single .sl-comment-action:focus-visible,
.sl-layout--single .sl-comment-sort a:focus-visible,
.sl-layout--single .sl-comment__more:focus-visible,
.sl-layout--single #respond #cancel-comment-reply-link:focus-visible,
.sl-layout--single #respond input[type="submit"]:focus-visible,
.sl-layout--single .sl-comment-form-wrap input[type="submit"]:focus-visible {
	outline: 2px solid #6ea8ff;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
	.sl-layout--single .sl-comment__body {
		gap: 6px;
	}

	.sl-layout--single .sl-comment__rail {
		width: 17px;
		flex-basis: 17px;
	}

	.sl-layout--single .sl-comment__rail::before {
		left: 8px;
	}

	.sl-layout--single .sl-comment__rail span {
		left: 3px;
	}

	.sl-layout--single .sl-comment-children {
		margin-left: 12px;
		padding-left: 8px;
	}

	.sl-layout--single #respond {
		width: calc(100% - 23px);
		margin-left: 23px;
	}
}

@media (max-width: 480px) {
	.sl-layout--single .sl-comment__date,
	.sl-layout--single .sl-comment__dot {
		display: none;
	}

	.sl-layout--single .sl-comment__author-name {
		font-size: 11px;
	}

	.sl-layout--single .sl-comment__text {
		font-size: 14px;
	}

	.sl-layout--single .sl-comment-action,
	.sl-layout--single .sl-comment-action-wrap .comment-reply-link {
		padding-inline: 6px;
	}

	.sl-layout--single #respond {
		width: calc(100% - 18px);
		margin-left: 18px;
		padding: 6px 9px 4px;
	}
}

/* ==========================================================================
   FINAL MICRO-POLISH
   ========================================================================== */

/* Main composer: turn the placeholder + action into one clear, attractive
   interaction surface instead of two floating pieces. */
.sl-layout--single .sl-comment-form-wrap {
	box-sizing: border-box;
	margin: 0 0 10px;
	padding: 5px 6px 6px;
	border: 1px solid #303b45;
	border-radius: 14px;
	background: #0d1318;
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.sl-layout--single .sl-comment-form-wrap:focus-within {
	border-color: #3b6fe8;
	background: #0e141a;
	box-shadow: 0 0 0 1px rgba(59, 111, 232, .10);
}

.sl-layout--single .sl-comment-form-wrap textarea,
.sl-layout--single .sl-comment-form-wrap #respond textarea {
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.sl-layout--single .sl-comment-form-wrap textarea {
	height: 38px;
	min-height: 38px;
	padding: 9px 10px;
	border-radius: 9px;
	font-size: 13px;
	line-height: 20px;
}

.sl-layout--single .sl-comment-form-wrap form:focus-within textarea {
	height: 82px;
	min-height: 82px;
	border-radius: 9px;
}

.sl-layout--single .sl-comment-form-wrap .form-submit {
	margin: 3px 3px 0;
}

.sl-layout--single .sl-comment-form-wrap .form-submit input[type="submit"] {
	min-width: 76px;
	min-height: 32px;
	font-size: 12px;
}

/* Reply composer: keep Cancel and Comment as two separate, non-overlapping
   controls on the same bottom action row. */
.sl-layout--single #respond .sl-comment-form__title #cancel-comment-reply-link {
	right: 91px;
	bottom: 5px;
	min-width: 57px;
	box-sizing: border-box;
	padding: 0 11px;
	z-index: 2;
}

.sl-layout--single #respond .form-submit input[type="submit"] {
	min-width: 76px;
	position: relative;
	z-index: 1;
}

/* Give the reply composer a little more internal breathing room. */
.sl-layout--single #respond {
	padding: 7px 11px 5px;
}

.sl-layout--single li #respond .sl-comment-form__title {
	padding-right: 150px;
	box-sizing: border-box;
}

/* Slightly stronger visual hierarchy for readable comments. */
.sl-layout--single .sl-comment__text {
	font-size: 14px;
	line-height: 1.52;
}

.sl-layout--single .sl-comment__author-name {
	font-size: 12px;
}

.sl-layout--single .sl-comment__date {
	font-size: 10.5px;
}

.sl-layout--single .sl-comment-action,
.sl-layout--single .sl-comment-action-wrap .comment-reply-link {
	font-size: 10.5px;
}

/* Keep the initial composer from becoming too tall on mobile. */
@media (max-width: 480px) {
	.sl-layout--single .sl-comment-form-wrap {
		padding: 4px 5px 5px;
	}

	.sl-layout--single #respond .sl-comment-form__title #cancel-comment-reply-link {
		right: 86px;
	}

	.sl-layout--single li #respond .sl-comment-form__title {
		padding-right: 140px;
	}
}

/* ========================================================================
   REDDIT-STYLE COMPOSER SURFACE — FINAL
   ======================================================================== */

/* The main composer is one clearly defined interactive surface. */
.sl-layout--single .sl-comment-form-wrap {
	box-sizing: border-box;
	width: 100%;
	margin: 0 0 12px;
	padding: 7px 8px 7px;
	border: 1px solid #3a4652 !important;
	border-radius: 16px !important;
	background: #111820 !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 1px 2px rgba(0,0,0,.18);
}

.sl-layout--single .sl-comment-form-wrap:hover {
	border-color: #465360 !important;
	background: #121a23 !important;
}

.sl-layout--single .sl-comment-form-wrap:focus-within {
	border-color: #53677a !important;
	background: #121b24 !important;
	box-shadow: 0 0 0 1px rgba(83,103,122,.18), inset 0 1px 0 rgba(255,255,255,.025);
}

/* Keep the text field visually integrated into the surface. */
.sl-layout--single .sl-comment-form-wrap textarea,
.sl-layout--single .sl-comment-form-wrap #respond textarea {
	box-sizing: border-box;
	width: 100%;
	border: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	color: #e7edf2;
}

.sl-layout--single .sl-comment-form-wrap textarea {
	height: 34px;
	min-height: 34px;
	margin: 0;
	padding: 6px 7px;
	border-radius: 9px !important;
	font-size: 13px;
	line-height: 21px;
}

.sl-layout--single .sl-comment-form-wrap textarea::placeholder {
	color: #9aa8b5;
}

/* Expanded writing state: keep the same outer Reddit-like surface. */
.sl-layout--single .sl-comment-form-wrap form:focus-within textarea {
	height: 78px;
	min-height: 78px;
	padding: 7px;
	border-radius: 9px !important;
	overflow-y: auto;
}

/* Button belongs to the surface, rather than appearing detached below it. */
.sl-layout--single .sl-comment-form-wrap .form-submit {
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	margin: 4px 1px 0;
	padding: 0;
}

.sl-layout--single .sl-comment-form-wrap .form-submit input[type="submit"] {
	min-width: 76px;
	min-height: 32px;
	padding: 0 15px;
	border: 0;
	border-radius: 999px;
	background: #3367e8;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 32px;
}

.sl-layout--single .sl-comment-form-wrap .form-submit input[type="submit"]:hover {
	background: #2556d0;
}

/* ------------------------------------------------------------------------
   Main composer idle state
   ------------------------------------------------------------------------ */

.sl-layout--single .sl-comment-form-wrap:not(:focus-within) .form-submit {
	display: flex !important;
}

/* ------------------------------------------------------------------------
   Inline reply composer keeps the same visual language, but remains a
   separate composer underneath the selected comment.
   ------------------------------------------------------------------------ */

.sl-layout--single li #respond {
	border: 1px solid #3a4652 !important;
	background: #111820 !important;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 1px 2px rgba(0,0,0,.16);
}

.sl-layout--single li #respond:focus-within {
	border-color: #53677a !important;
	background: #121b24 !important;
}

.sl-layout--single li #respond .form-submit {
	margin-top: 3px;
}

/* Keep Cancel and Comment visually separated. */
.sl-layout--single li #respond .sl-comment-form__title #cancel-comment-reply-link {
	right: 88px;
	bottom: 5px;
	min-width: 58px;
	margin: 0;
	padding: 0 12px;
	border-radius: 999px;
	background: #253141;
	color: #e1e8ef;
	z-index: 3;
}

.sl-layout--single li #respond .sl-comment-form__title #cancel-comment-reply-link:hover {
	background: #303d4d;
}

.sl-layout--single li #respond .form-submit input[type="submit"] {
	min-width: 76px;
	position: relative;
	z-index: 2;
}

@media (max-width: 480px) {
	.sl-layout--single .sl-comment-form-wrap {
		padding: 6px 7px;
		border-radius: 14px !important;
	}

	.sl-layout--single li #respond .sl-comment-form__title #cancel-comment-reply-link {
		right: 84px;
	}
}