/*
 * Circle explorer layout.
 *
 * The board tab remains backed by Zibll's native panels and collapse
 * controls.  Moedes gives it the information hierarchy of an explorer page:
 * a quiet, sticky directory on the left and the complete native circle
 * catalogue on the right.  No post-feed tab or parent AJAX target is changed.
 */
body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	#forum
	.bbs-home-tab
	#home-tab-3.moedes-circle-board {
	min-width: 0;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	#forum
	.bbs-home-tab
	#home-tab-3.moedes-circle-board.active {
	display: block;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	#forum
	.bbs-home-tab
	#home-tab-3.moedes-circle-board:not(.active) {
	display: none !important;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	#forum
	.bbs-home-tab
	#home-tab-3.moedes-circle-board
	> .moedes-circle-layout {
	display: block;
	min-width: 0;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	#forum
	.bbs-home-tab
	#home-tab-3.moedes-circle-board
	> .moedes-content-tab-nav {
	display: block;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory {
	--moedes-circle-inset: var(--moedes-forum-space-sm, 8px);
	--moedes-circle-icon-size: 30px;
	--moedes-circle-toggle-width: 28px;
	--moedes-circle-toggle-height: 38px;
	--moedes-circle-accent: var(--moedes-primary, #F39A07);
	--moedes-circle-scroll-thumb: transparent;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	box-sizing: border-box;
	overflow: visible;
	border: 1px solid var(--moedes-forum-border);
	border-radius: var(--moedes-forum-radius, var(--main-radius, 8px));
	background: var(--moedes-forum-surface);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__scroll {
	flex: 1;
	min-height: 0;
	padding: var(--moedes-forum-space-md, 14px);
	padding-bottom: calc(var(--moedes-circle-toggle-height) + var(--moedes-forum-space-md, 14px));
	overflow: hidden auto;
	overscroll-behavior-y: contain;
	scrollbar-width: thin;
	scrollbar-gutter: stable;
	scrollbar-color: var(--moedes-circle-scroll-thumb) transparent;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory:is(:hover, :has(:focus-visible)) {
	--moedes-circle-scroll-thumb: color-mix(in srgb, var(--moedes-forum-muted) 40%, transparent);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__scroll::-webkit-scrollbar {
	width: 6px;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__scroll::-webkit-scrollbar-thumb {
	border-radius: var(--moedes-forum-control-radius);
	background: var(--moedes-circle-scroll-thumb);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__scroll::-webkit-scrollbar-track {
	background: transparent;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__scroll::-webkit-scrollbar-button {
	display: none;
	width: 0;
	height: 0;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__toggle {
	position: absolute;
	left: calc(-1 * var(--moedes-circle-inset));
	bottom: var(--moedes-forum-space-md, 14px);
	display: grid;
	width: var(--moedes-circle-toggle-width);
	height: var(--moedes-circle-toggle-height);
	padding: 0;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--moedes-tertiary) 35%, var(--moedes-forum-border));
	border-radius: var(--moedes-forum-control-radius);
	background: var(--moedes-forum-surface);
	color: var(--moedes-tertiary);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__toggle[hidden] {
	display: none;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__toggle:hover {
	border-color: var(--moedes-secondary);
	color: var(--moedes-secondary);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory :is(a, button):focus-visible {
	/* Zibll's global outline:0!important must yield for keyboard navigation. */
	outline: 2px solid var(--moedes-tertiary) !important;
	outline-offset: -2px;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__tooltip {
	position: fixed;
	z-index: 45;
	max-width: min(208px, calc(100vw - 80px));
	padding: 6px 9px;
	border: 1px solid var(--moedes-forum-border);
	border-radius: var(--moedes-forum-control-radius);
	background: var(--moedes-forum-surface);
	color: var(--moedes-forum-text);
	font-size: 12px;
	line-height: 1.4;
	overflow-wrap: anywhere;
	pointer-events: none;
	transform: translateY(-50%);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__tooltip[hidden] {
	display: none;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__quick {
	display: grid;
	gap: 6px;
	margin-bottom: var(--moedes-forum-space-lg, 18px);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__quick-link {
	display: flex;
	min-height: 40px;
	padding: 9px 12px;
	align-items: center;
	gap: var(--moedes-forum-space-sm, 8px);
	border-radius: var(--moedes-forum-control-radius);
	background: color-mix(in srgb, var(--moedes-circle-accent) 8%, var(--moedes-forum-surface));
	color: var(--moedes-forum-text);
	font-size: 13px;
	text-decoration: none;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) :is(.moedes-circle-directory__quick-link:nth-child(2), .moedes-circle-directory__group:nth-child(3n + 2)) {
	--moedes-circle-accent: var(--moedes-secondary, #FF7073);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__group:nth-child(3n) {
	--moedes-circle-accent: var(--moedes-tertiary, #51A2FF);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__quick-icon {
	width: 16px;
	height: 16px;
	flex: none;
	fill: currentColor;
	color: var(--moedes-circle-accent);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) :is(.moedes-circle-directory__quick-link, .moedes-circle-directory__item):is(:hover, :focus-visible, [aria-current="page"]) {
	background: color-mix(in srgb, var(--moedes-circle-accent) 10%, var(--moedes-forum-surface));
	color: var(--moedes-circle-accent);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__group + .moedes-circle-directory__group {
	margin-top: var(--moedes-circle-directory-group-gap, 20px);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__group-heading {
	display: flex;
	align-items: center;
	gap: var(--moedes-forum-space-sm, 8px);
	margin-bottom: 6px;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__group-title {
	flex: 1;
	min-width: 0;
	padding-left: var(--moedes-forum-space-sm, 8px);
	border-left: 3px solid var(--moedes-circle-accent);
	overflow: hidden;
	color: var(--moedes-forum-nav-muted);
	font-size: 12px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-decoration: none;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__group-toggle {
	display: grid;
	flex: none;
	place-items: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: var(--moedes-forum-control-radius);
	background: transparent;
	color: var(--moedes-forum-nav-muted);
	cursor: pointer;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) :is(.moedes-circle-directory__group-title, .moedes-circle-directory__group-toggle):hover {
	color: var(--moedes-circle-accent);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__group-toggle::before {
	width: 7px;
	height: 7px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	content: "";
	transform: translateY(2px) rotate(225deg);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__group-toggle.is-collapsed::before {
	transform: translateY(-2px) rotate(45deg);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__group.is-collapsed .moedes-circle-directory__group-items {
	display: none;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__item {
	display: flex;
	min-width: 0;
	min-height: var(--moedes-circle-directory-item-height, 42px);
	padding: 6px;
	align-items: center;
	gap: var(--moedes-circle-directory-item-gap, 10px);
	border-radius: var(--moedes-forum-control-radius);
	color: var(--moedes-forum-text);
	font-size: 13px;
	line-height: 1.35;
	text-decoration: none;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__item-icon {
	display: grid;
	width: var(--moedes-circle-icon-size);
	height: var(--moedes-circle-icon-size);
	min-width: var(--moedes-circle-icon-size);
	flex: none;
	place-items: center;
	overflow: hidden;
	border-radius: var(--moedes-forum-control-radius);
	background: var(--moedes-forum-surface-muted);
	color: var(--moedes-circle-accent);
	font-size: 12px;
	font-weight: 600;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__item-icon img {
	display: block;
	width: 100%;
	height: 100%;
	min-width: 0;
	max-width: 100%;
	object-fit: cover;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__item-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory__item-count {
	margin-left: auto;
	flex: none;
	color: var(--moedes-forum-muted);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory.is-collapsed {
	--moedes-circle-icon-size: 32px;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory.is-collapsed .moedes-circle-directory__scroll {
	padding-inline: 6px;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory.is-collapsed :is(.moedes-circle-directory__quick, .moedes-circle-directory__group-heading, .moedes-circle-directory__item-label, .moedes-circle-directory__item-count) {
	display: none;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory.is-collapsed .moedes-circle-directory__group + .moedes-circle-directory__group {
	margin-top: var(--moedes-forum-space-sm, 8px);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory.is-collapsed .moedes-circle-directory__item {
	justify-content: center;
	padding-inline: 0;
	gap: 0;
}

/*
 * The explorer is a viewport rail, not a card belonging to the archive
 * content below it. Fixing it below the measured Zibll header keeps the
 * icons visible and the bottom edge toggle stationary on every
 * board, tag, category and post page.
 */
@media (min-width: 768px) {
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory--global {
		position: fixed;
		top: calc(var(--moedes-forum-header-height, 66px) + var(--moedes-circle-inset));
		left: var(--moedes-circle-inset);
		z-index: 12;
		width: calc(var(--moedes-circle-directory-width, 240px) - var(--moedes-circle-inset)) !important;
		height: calc(100dvh - var(--moedes-forum-header-height, 66px) - var(--moedes-circle-inset) * 2);
	}

}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	#forum
	.bbs-home-tab
	#home-tab-3.moedes-circle-board
	.moedes-circle-panels {
	display: block;
	min-width: 0;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	#forum
	.bbs-home-tab
	#home-tab-3.moedes-circle-board
	.moedes-circle-panels
	> .panel-plate:first-child {
	margin-top: 0;
}

/*
 * The circle directory is a shell-level rail, not a panel inside the
 * "板块" tab. This keeps it visible while the forum home switches between
 * 关注、最新、板块 and 热门, matching the explorer layout used by the
 * reference site.  The original Zibll right sidebar remains a separate
 * column and is never copied into the rail.
 */
@media (min-width: 768px) {
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell)) {
		display: grid;
		width: var(--moedes-forum-viewport-width, 100vw) !important;
		max-width: none !important;
		margin-right: 0 !important;
		margin-left: 0 !important;
		column-gap: var(--moedes-forum-column-gap, 24px);
		padding-right: var(--moedes-forum-shell-inline-padding, 24px);
		padding-left: 0;
		align-items: start;
	}

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell))
		> .moedes-circle-directory--global {
		grid-column: 1;
		grid-row: 1;
		width: auto;
		min-width: 0;
	}

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell))
		> .content-wrap {
		grid-column: 2;
		grid-row: 1;
		float: none !important;
		width: 100% !important;
		max-width: var(--moedes-forum-main-column-max, 1080px);
		justify-self: center;
		min-width: 0;
		box-sizing: border-box;
		margin: 0 !important;
		padding-top: var(--moedes-forum-header-content-gap, 8px);
	}

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell))
		> .content-wrap
		> .content-layout {
		width: auto !important;
		min-width: 0;
		margin-right: 0 !important;
	}}

@media (min-width: 1200px) {
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell)) {
		grid-template-columns:
			var(--moedes-circle-directory-width, 240px)
			minmax(0, 1fr)
			minmax(var(--moedes-forum-right-column-width, 300px), var(--moedes-forum-right-column-width, 300px));
	}

	/*
	 * Category/search/tag archives often expose an empty sidebar placeholder.
	 * Do not reserve the 300px explorer rail for an element with no widget
	 * children; the reference layout keeps the content column fluid in that
	 * case while forum home/detail pages retain the real right rail.
	 */
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(
			#forum > .container.moedes-circle-shell.moedes-circle-shell--no-sidebar,
			:is(main.container.moedes-circle-shell.moedes-circle-shell--no-sidebar, main > .container.moedes-circle-shell.moedes-circle-shell--no-sidebar)
		) {
		grid-template-columns:
			var(--moedes-circle-directory-width, 240px)
			minmax(0, 1fr);
	}

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(
			#forum > .container.moedes-circle-shell.moedes-circle-shell--no-sidebar,
			:is(main.container.moedes-circle-shell.moedes-circle-shell--no-sidebar, main > .container.moedes-circle-shell.moedes-circle-shell--no-sidebar)
		)
		> .sidebar {
		display: none !important;
	}

	/*
	 * Archive/search/tag pages do not have a right rail.  Keep their main
	 * column anchored immediately after the directory instead of centering a
	 * narrower 1080px column inside the remaining grid track.
	 */
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(
			#forum > .container.moedes-circle-shell.moedes-circle-shell--no-sidebar,
			:is(main.container.moedes-circle-shell.moedes-circle-shell--no-sidebar, main > .container.moedes-circle-shell.moedes-circle-shell--no-sidebar)
		)
		> .content-wrap {
		justify-self: start;
	}

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell))
		> .sidebar {
		grid-column: 3;
		grid-row: 1;
		float: none !important;
		width: 100% !important;
		min-width: 0;
		box-sizing: border-box;
		margin: 0 !important;
		padding-top: var(--moedes-forum-header-content-gap, 8px);
		justify-self: stretch;
	}}

@media (min-width: 768px) and (max-width: 1199px) {
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell)) {
		grid-template-columns:
			var(--moedes-circle-directory-width, 240px)
			minmax(0, 1fr);
	}

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(
			#forum > .container.moedes-circle-shell.moedes-circle-shell--no-sidebar,
			:is(main.container.moedes-circle-shell.moedes-circle-shell--no-sidebar, main > .container.moedes-circle-shell.moedes-circle-shell--no-sidebar)
		)
		> .sidebar {
		display: none !important;
	}

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell))
		> .sidebar {
		/*
		 * Keep the tablet sidebar aligned with the content column.  Spanning
		 * the whole shell makes it start at the viewport edge and become
	 * almost the full page width, unlike the 300px right rail on desktop.
		 */
		grid-column: 2;
		grid-row: 2;
		float: none !important;
		width: auto !important;
		min-width: 0;
		margin: var(--moedes-forum-space-md, 14px) 0 0 !important;
	}}

@media (min-width: 768px) and (max-width: 991px) {
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) {
		--moedes-circle-directory-width: 232px;
		--moedes-circle-directory-expanded-width: 232px;
	}}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list).moedes-circle-directory-collapsed {
	--moedes-circle-directory-width: var(--moedes-circle-directory-collapsed-width, 64px);
}

@media (min-width: 768px) {
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, main.container.moedes-circle-shell, main > .container.moedes-circle-shell)
		> .sidebar {
		display: block !important;
	}
}

@media (max-width: 767px) {
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell)) {
		display: grid;
		grid-template-columns: 1fr;
		row-gap: var(--moedes-forum-space-md, 14px);
	}

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell))
		> .moedes-circle-directory--global,
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell))
		> .content-wrap,
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell))
		> .sidebar {
		grid-column: 1;
		float: none !important;
		width: auto !important;
		min-width: 0;
		margin: 0 !important;
	}

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell))
		> .moedes-circle-directory--global {
		grid-row: 1;
	}

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell))
		> .content-wrap {
		grid-row: 2;
	}

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell))
		> .sidebar {
		grid-row: 3;
	}

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(#forum > .container.moedes-circle-shell, :is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell))
		> .content-wrap
		> .content-layout {
		width: auto !important;
		min-width: 0;
		margin-right: 0 !important;
	}

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) .moedes-circle-directory--global {
		position: relative;
		height: min(360px, 48vh);
	}}


/*
 * Publish-page compatibility: `main > form` owns the editor and sidebar,
 * while the parent shell rules above already define the explorer grid on
 * `:is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell)`. `display: contents` keeps the form
 * submission tree intact and lets its direct children occupy that grid.
 */
body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	:is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell)
	> form.moedes-circle-shell-form {
	display: contents;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	:is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell)
	> form.moedes-circle-shell-form
	> .moedes-circle-directory--global {
	grid-column: 1;
	grid-row: 1;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	:is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell)
	> form.moedes-circle-shell-form
	> .content-wrap {
	grid-column: 2;
	grid-row: 1;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	:is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell)
	> form.moedes-circle-shell-form
	> .sidebar {
	float: none !important;
	width: auto !important;
	min-width: 0;
}

@media (min-width: 1200px) {

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell)
		> form.moedes-circle-shell-form
		> .sidebar {
		grid-column: 3;
		grid-row: 1;
		width: 100% !important;
		margin: 0 0 0 auto !important;
	}}

@media (min-width: 992px) and (max-width: 1199px) {
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell)
		> form.moedes-circle-shell-form
		> .sidebar {
		grid-column: 1 / -1;
		grid-row: 2;
		margin: var(--moedes-forum-space-md, 14px) 0 0 !important;
	}}

@media (min-width: 768px) and (max-width: 991px) {
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell)
		> form.moedes-circle-shell-form
		> .sidebar {
		grid-column: 1 / -1;
		grid-row: 2;
		margin: var(--moedes-forum-space-md, 14px) 0 0 !important;
	}}

@media (max-width: 767px) {
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell)
		> form.moedes-circle-shell-form
		> .content-wrap {
		grid-column: 1;
		grid-row: 2;
	}

	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(main.container.moedes-circle-shell, main > .container.moedes-circle-shell)
		> form.moedes-circle-shell-form
		> .sidebar {
		grid-column: 1;
		grid-row: 3;
		margin: 0 !important;
	}}

/* The publish form owns the content container on /posts-edit/. */
@media (min-width: 1200px) {
body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) #forum > form > .container.moedes-circle-shell {
	display: grid;
	width: var(--moedes-forum-viewport-width, 100vw) !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding-right: var(--moedes-forum-shell-inline-padding, 24px);
	padding-left: 0;
	grid-template-columns:
		var(--moedes-circle-directory-width, 240px)
		minmax(0, 1fr)
		minmax(var(--moedes-forum-right-column-width, 300px), var(--moedes-forum-right-column-width, 300px));
	column-gap: var(--moedes-forum-column-gap, 24px);
	align-items: start;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) #forum > form > .container.moedes-circle-shell
	> .moedes-circle-directory--global {
	grid-column: 1;
	grid-row: 1;
	width: auto;
	min-width: 0;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) #forum > form > .container.moedes-circle-shell
	> .content-wrap {
	grid-column: 2;
	grid-row: 1;
	float: none !important;
	width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
	margin: 0 !important;
	padding-top: var(--moedes-forum-header-content-gap, 8px);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) #forum > form > .container.moedes-circle-shell
	> .content-wrap > .content-layout {
	width: 100% !important;
	min-width: 0;
	margin-right: 0 !important;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) #forum > form > .container.moedes-circle-shell
	> .sidebar {
	grid-column: 3;
	grid-row: 1;
	float: none !important;
	width: auto !important;
	min-width: 0;
	box-sizing: border-box;
	margin: 0 !important;
	padding-top: var(--moedes-forum-header-content-gap, 8px);
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) #forum > form > .container.moedes-circle-shell.moedes-circle-shell--no-sidebar {
	grid-template-columns:
		var(--moedes-circle-directory-width, 240px)
		minmax(0, 1fr);
}}

@media (min-width: 768px) and (max-width: 1199px) {
body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) #forum > form > .container.moedes-circle-shell {
	display: grid;
	width: var(--moedes-forum-viewport-width, 100vw) !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding-right: var(--moedes-forum-shell-inline-padding, 24px);
	padding-left: 0;
	grid-template-columns: var(--moedes-circle-directory-width, 240px) minmax(0, 1fr);
	column-gap: var(--moedes-forum-column-gap, 24px);
	align-items: start;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) #forum > form > .container.moedes-circle-shell
	> .moedes-circle-directory--global {
	grid-column: 1;
	grid-row: 1;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) #forum > form > .container.moedes-circle-shell
	> .content-wrap {
	grid-column: 2;
	grid-row: 1;
	float: none !important;
	width: 100% !important;
	margin: 0 !important;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) #forum > form > .container.moedes-circle-shell
	> .content-wrap > .content-layout {
	width: 100% !important;
	margin-right: 0 !important;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) #forum > form > .container.moedes-circle-shell
	> .sidebar {
	grid-column: 2;
	grid-row: 2;
	float: none !important;
	width: auto !important;
	margin: var(--moedes-forum-space-lg, 18px) 0 0 !important;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list) #forum > form > .container.moedes-circle-shell.moedes-circle-shell--no-sidebar
	> .sidebar {
	display: none !important;
}}

/*
 * Author pages expose the profile header and the AJAX tab container as two
 * sibling Bootstrap containers. Treat those wrappers as transparent
 * structural nodes so the persistent circle directory starts directly below
 * the primary header instead of appearing below the profile cover.
 */
@media (min-width: 768px) {
	body.moedes-author-layout
		main {
		display: grid;
		width: 100%;
		max-width: none;
		position: relative;
		box-sizing: border-box;
		padding-right: var(--moedes-forum-shell-inline-padding, 24px);
		grid-template-columns:
			var(--moedes-circle-directory-width, 240px)
			minmax(0, 1fr);
		column-gap: var(--moedes-forum-column-gap, 24px);
		align-items: start;
	}

	body.moedes-author-layout
		main
		> .container {
		display: contents !important;
	}

	body.moedes-author-layout
		main
		> .container
		> .author-header {
		grid-column: 2 !important;
		grid-row: 1 !important;
		width: 100% !important;
		max-width: var(--moedes-forum-main-column-max, 1080px);
		margin: var(--moedes-forum-space-sm, 8px) 0 var(--moedes-forum-space-lg, 18px) !important;
		justify-self: center;
	}

	body.moedes-author-layout
		main
		> .container.moedes-circle-shell--profile
		> .moedes-circle-directory--global {
		grid-column: 1 !important;
		grid-row: 1 / span 2 !important;
		width: auto;
		min-width: 0;
	}

	body.moedes-author-layout
		main
		> .container
		> :is(.author-tab, .user-center) {
		grid-column: 2 !important;
		grid-row: 2 !important;
		width: 100% !important;
		max-width: var(--moedes-forum-main-column-max, 1080px);
		margin: 0 !important;
		justify-self: center;
	}

	body.moedes-author-layout
		main
		> :is(.moedes-author-fluid-gap, .fluid-widget-wrap:empty) {
		display: none !important;
	}}

@media (min-width: 1200px) {
	body.moedes-author-layout main {
	grid-template-columns:
		var(--moedes-circle-directory-width, 240px)
		minmax(0, 1fr)
		minmax(var(--moedes-forum-right-column-width, 300px), var(--moedes-forum-right-column-width, 300px));
}}

@media (max-width: 767px) {
	body.moedes-author-layout.nav-fixed {
	--moedes-forum-header-height: 53px;
}

	body.moedes-author-layout
	main > .fluid-widget-wrap:empty {
	display: none !important;
}

	body.moedes-author-layout:not(.moedes-circle-directory-enabled) main::before {
	display: block;
	height: 374px;
	content: "";
}

	body.moedes-author-layout:not(.moedes-circle-directory-enabled)
	main > .container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0 10px;
	box-sizing: border-box;
}

	body.moedes-author-layout:not(.moedes-circle-directory-enabled)
	main > .container > .author-header {
	width: 100%;
	margin: 0 0 14px !important;
}

	body.moedes-author-layout:not(.moedes-circle-directory-enabled)
	main > .container > .user-center {
	width: 100%;
	margin: 0;
}
}

/* Author profiles use a second, standalone container instead of content-wrap. */
@media (min-width: 768px) {
body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	main > .container.moedes-circle-shell--profile {
	display: grid;
	width: var(--moedes-forum-viewport-width, 100vw) !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding-right: var(--moedes-forum-shell-inline-padding, 24px);
	padding-left: 0;
	grid-template-columns: var(--moedes-circle-directory-width, 240px) minmax(0, 1fr);
	column-gap: var(--moedes-forum-column-gap, 24px);
	align-items: start;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	main > .container.moedes-circle-shell--profile
	> .moedes-circle-directory--global {
	grid-column: 1;
	grid-row: 1;
	width: auto;
	min-width: 0;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	main > .container.moedes-circle-shell--profile
			> :is(.author-header, .author-tab),
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	main > .container.moedes-circle-shell--profile
				> .user-center {
		grid-column: 2;
		grid-row: 1;
		min-width: 0;
		width: 100% !important;
		max-width: var(--moedes-forum-main-column-max, 1080px);
		justify-self: center;
		margin: 0 !important;
	}}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	main > .container.moedes-circle-shell--profile > .user-center {
	grid-row: 2;
}

body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	main > .container.moedes-circle-shell--profile > .author-header {
	grid-column: 2;
	grid-row: 1;
	width: 100% !important;
	max-width: var(--moedes-forum-main-column-max, 1080px);
	justify-self: center;
	margin: var(--moedes-forum-space-sm, 8px) 0 var(--moedes-forum-space-lg, 18px) !important;
}

/* Profile shells use the same directory and right rail as forum shells. */
@media (min-width: 1200px) {
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		main > .container.moedes-circle-shell--profile > .sidebar {
		position: absolute !important;
		top: 0 !important;
		right: 24px !important;
		width: var(--moedes-forum-right-column-width, 300px) !important;
		grid-column: auto !important;
		grid-row: auto !important;
	}
}

@media (min-width: 768px) and (max-width: 1199px) {
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	main > .container.moedes-circle-shell--profile > .sidebar {
		position: static !important;
		grid-column: 2 !important;
		grid-row: 3 !important;
		width: 100% !important;
		margin: var(--moedes-forum-space-lg, 18px) 0 0 !important;
	}
}

@media (max-width: 767px) {
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		main > .container.moedes-circle-shell--profile {
		display: grid;
		grid-template-columns: 1fr;
		row-gap: var(--moedes-forum-column-gap, 24px);
	}
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		main > .container.moedes-circle-shell--profile > .moedes-circle-directory--global {
		grid-column: 1;
		grid-row: 1;
	}
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		main > .container.moedes-circle-shell--profile > :is(.author-tab, .user-center) {
		grid-column: 1;
		grid-row: 3;
		width: 100% !important;
	}
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
	main > .container.moedes-circle-shell--profile > :is(.author-header, .author-tab) {
		grid-column: 1;
		grid-row: 2;
		width: 100% !important;
		margin: var(--moedes-forum-space-sm, 8px) 0 0 !important;
	}
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		main > .container.moedes-circle-shell--profile > .sidebar {
		display: block !important;
		grid-column: 1;
		grid-row: 4 !important;
		width: 100% !important;
		margin: 0 !important;
	}
}

/* Keep a configured right rail available on mobile as the final shell row. */
@media (max-width: 767px) {
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(
			#forum > .container.moedes-circle-shell,
			main.container.moedes-circle-shell,
			main > .container.moedes-circle-shell
		) > .sidebar {
		display: block !important;
		position: static !important;
		grid-column: 1;
		grid-row: 3;
		width: 100% !important;
		float: none !important;
		margin: var(--moedes-forum-space-md, 14px) 0 0 !important;
	}
	body:is(.moedes-forum, .moedes-content-navigation, .moedes-content-list)
		:is(
			#forum > .container.moedes-circle-shell.moedes-circle-shell--no-sidebar,
			main.container.moedes-circle-shell.moedes-circle-shell--no-sidebar,
			main > .container.moedes-circle-shell.moedes-circle-shell--no-sidebar
		) > .sidebar {
			display: none !important;
	}
}