.wp-block-ralify-app-shell,
.ralify-app-shell {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	color: var(--ralify-color-text, #f8fafc);
	font-family: var(--ralify-font, "Sora", sans-serif);
}

.ralify-app-shell--contained {
	max-width: calc(var(--ralify-content-width, 1320px) + (var(--ralify-page-gutter, 24px) * 2));
	margin-inline: auto;
	padding-inline: var(--ralify-page-gutter, 24px);
}

.ralify-app-shell--surface {
	padding-block: var(--ralify-space-5, 24px);
	border-radius: var(--ralify-radius-lg, 16px);
	background:
		radial-gradient(circle at 30% 0%, rgba(37, 99, 235, 0.08), transparent 34%),
		var(--ralify-color-midnight, #0b0f17);
}

.ralify-app-shell__layout,
.ralify-app-shell__layout > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: grid;
	grid-template-columns: 280px minmax(0, 1fr);
	gap: var(--ralify-space-5, 24px);
	align-items: start;
	min-width: 0;
}

.ralify-app-shell--sidebar-compact .ralify-app-shell__layout {
	grid-template-columns: 76px minmax(0, 1fr);
}

.ralify-app-shell__main {
	display: grid;
	min-width: 0;
	gap: var(--ralify-space-5, 24px);
}

.ralify-app-shell__content {
	min-width: 0;
}

.ralify-app-shell__placeholder {
	display: grid;
	min-height: 420px;
	place-items: center;
	padding: var(--ralify-space-6, 32px);
	border: 1px dashed rgba(148, 163, 184, 0.22);
	border-radius: var(--ralify-radius-lg, 16px);
	background: rgba(17, 24, 39, 0.45);
	text-align: center;
}

.ralify-app-shell__placeholder strong {
	display: block;
	font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.ralify-app-shell__placeholder span {
	display: block;
	max-width: 520px;
	margin-top: 8px;
	color: var(--ralify-color-text-muted, #94a3b8);
	font-size: 0.875rem;
	line-height: 1.65;
}

/*
 * Two states only, and they cannot overlap.
 *
 *   >= 901px  persistent sidebar column, full labels
 *   <= 900px  off-canvas drawer opened by the header hamburger, full labels
 *
 * An earlier version had three interlocking breakpoints (900 / 767 / 640) where
 * the middle one visually hid every navigation label and a later one had to put
 * them back. If any link in that chain failed to apply, the navigation rendered
 * as unlabelled icons or as a full-width block sitting on top of the page.
 * There is no icon-only rail and no hidden-then-restored label anywhere now:
 * the drawer is the answer at every width below the desktop column.
 */

@media (min-width: 901px) {
	.ralify-header-row__nav-toggle {
		display: none;
	}

	.ralify-nav-backdrop {
		display: none;
	}
}

@media (max-width: 900px) {
	.ralify-app-shell--contained {
		padding-inline: var(--ralify-space-3, 12px);
	}

	.ralify-app-shell__layout,
	.ralify-app-shell--sidebar-compact .ralify-app-shell__layout,
	.ralify-app-shell__layout > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Borderless, matching .ralify-topbar__icon-button exactly. The bordered
	 * 8px-radius box it used to be was the only outlined control anywhere in
	 * the header, so it read as a stray element floating next to the logo
	 * rather than part of the same icon set as the bell, bookmark and avatar
	 * sitting directly below it.
	 */
	.ralify-header-row__nav-toggle {
		display: grid;
		flex: 0 0 40px;
		width: 40px;
		height: 40px;
		padding: 0;
		place-items: center;
		border: 0;
		border-radius: var(--ralify-radius-md, 12px);
		background: transparent;
		color: var(--ralify-color-text-muted, #94a3b8);
		cursor: pointer;
		transition: background-color var(--ralify-transition, 180ms ease), color var(--ralify-transition, 180ms ease);
		order: 1;
		margin-left: auto;
	}

	.ralify-header-row__nav-toggle:hover,
	.ralify-header-row__nav-toggle:focus-visible {
		background: rgba(255, 255, 255, 0.06);
		color: var(--ralify-color-text, #f8fafc);
		outline: none;
	}

	/* Open state reads as pressed, so it is obvious which control closes it. */
	.ralify-header-row__nav-toggle[aria-expanded="true"] {
		background: rgba(136, 92, 246, 0.16);
		color: var(--ralify-color-text, #f8fafc);
	}

	.ralify-header-row__nav-toggle svg {
		width: 18px;
		height: 18px;
		fill: none;
		stroke: currentColor;
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
	}

	.ralify-app-shell .ralify-sidebar-shell,
	.ralify-app-shell .ralify-sidebar-shell--compact,
	.ralify-app-shell .ralify-sidebar-shell--sticky {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		z-index: 1000;
		width: min(300px, 86vw);
		height: 100vh;
		height: 100dvh;
		min-height: 0;
		max-height: none;
		padding: var(--ralify-space-5, 24px) var(--ralify-space-4, 16px);
		background: var(--ralify-color-midnight, #0b0f17);
		box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
		transform: translateX(100%);
		transition: transform var(--ralify-transition, 180ms ease);
		overflow-x: hidden;
		overflow-y: auto;
	}

	.ralify-app-shell .ralify-sidebar-shell.is-open,
	.ralify-app-shell .ralify-sidebar-shell--compact.is-open,
	.ralify-app-shell .ralify-sidebar-shell--sticky.is-open {
		transform: translateX(0);
	}

	/* Arabic mirrors it: hamburger on the left, drawer in from the left. */
	[dir="rtl"] .ralify-header-row__nav-toggle {
		margin-right: auto;
		margin-left: 0;
	}

	[dir="rtl"] .ralify-app-shell .ralify-sidebar-shell,
	[dir="rtl"] .ralify-app-shell .ralify-sidebar-shell--compact,
	[dir="rtl"] .ralify-app-shell .ralify-sidebar-shell--sticky {
		right: auto;
		left: 0;
		box-shadow: 12px 0 40px rgba(0, 0, 0, 0.45);
		transform: translateX(-100%);
	}

	[dir="rtl"] .ralify-app-shell .ralify-sidebar-shell.is-open,
	[dir="rtl"] .ralify-app-shell .ralify-sidebar-shell--compact.is-open,
	[dir="rtl"] .ralify-app-shell .ralify-sidebar-shell--sticky.is-open {
		transform: translateX(0);
	}

	.ralify-nav-backdrop {
		position: fixed;
		inset: 0;
		z-index: 999;
		background: rgba(4, 7, 13, 0.6);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--ralify-transition, 180ms ease);
	}

	.ralify-nav-backdrop.is-open {
		opacity: 1;
		pointer-events: auto;
	}

	body.ralify-nav-locked {
		overflow: hidden;
	}
}