/* ---------- Compact & medium (< 840px): no sidebar ---------- */
.container {
	margin-left: var(--space-3);
	margin-right: var(--space-3);
}

.side_footer {
	display: none;
}

.code-scroller {
	margin-left: calc(var(--space-3) * -1);
	margin-right: calc(var(--space-3) * -1);
	width: calc(100% + var(--space-6));
}

.code-scroller-code {
	position: sticky;
	bottom: 0;
	top: auto;
	/* fit the code, up to 40% of the screen */
	height: auto;
	max-height: 40vh;
	max-height: 40dvh;
	z-index: 100;
	background-color: var(--color-scroller-bg);
}

.code-scroller-code::before,
.code-scroller-code::after {
	display: none;
}

.code-scroller-code pre {
	height: auto;
	max-height: 40vh;
	max-height: 40dvh;
	font-size: var(--fs-16);
	line-height: 1.4;
}

.code-scroller-steps {
	padding-top: 10vh;
	padding-bottom: 30vh;
	gap: 15vh;
}

/* the scroller bleeds to the screen edge for the code panel; keep steps aligned with the text */
.code-scroller-step {
	margin: 0 var(--space-3);
}

.code-scroller-step p {
	font-size: var(--fs-18);
	line-height: var(--line-body);
	margin-bottom: var(--space-2);
}

/* copy button has no hover on touch screens */
.copy-badge {
	opacity: 1;
}

body.lang-ja p {
	font-size: var(--fs-16);
	line-height: 40px;
}

body.lang-ja li {
	font-size: var(--fs-16);
}

/* ---------- Compact (< 600px) ---------- */
@media (max-width: 599px) {
	.container {
		font-size: var(--fs-18);
	}

	.banner {
		text-align: center;
	}

	.banner h1 {
		font-size: var(--fs-52);
	}

	.lead,
	.section-nav {
		display: none;
	}

	.sosial {
		justify-content: center;
	}
}

/* ---------- Expanded (>= 840px): sidebar ---------- */
@media (min-width: 840px) {
	.back-to-posts {
		display: flex;
	}

	.banner {
		position: fixed;
		width: var(--sidebar-width);
		text-align: left;
		display: flex;
		flex-flow: column;
		height: 100vh;
		box-sizing: border-box;
		overflow-y: auto;
	}

	.banner > * {
		flex-shrink: 0;
	}

	.banner > .section-nav {
		flex: 1 1 0;
		min-height: 0;
	}

	.container {
		margin-left: calc(var(--sidebar-width) + var(--space-20));
		margin-right: var(--space-20);
	}

	body.lang-ja p {
		font-size: var(--fs-18);
		line-height: var(--line-ja);
	}

	body.lang-ja li {
		font-size: var(--fs-22);
	}

	.side_footer {
		display: block;
	}

	.footer {
		display: none;
	}

	.copy-badge {
		opacity: 0;
	}

	.code-scroller {
		flex-direction: row;
		align-items: flex-start;
		width: 90vw;
		margin-left: calc(50% - 45vw);
		margin-right: calc(50% - 45vw);
		gap: var(--space-8);
		position: relative;
		z-index: 10;
	}

	.code-scroller-code {
		position: sticky;
		top: 0;
		bottom: auto;
		height: 100vh;
		max-height: none;
		z-index: auto;
		background-color: transparent;
	}

	.code-scroller-code::before,
	.code-scroller-code::after {
		display: block;
	}

	.code-scroller-code pre {
		height: auto;
		max-height: 100vh;
		font-size: var(--fs-16);
		line-height: inherit;
	}

	.code-scroller-steps {
		padding-top: 50vh;
		padding-bottom: 50vh;
		gap: 50vh;
	}

	.code-scroller-step {
		margin: 0;
	}

	.code-scroller-step p {
		font-size: inherit;
		line-height: inherit;
		margin-bottom: var(--space-4);
	}

	.banner,
	.post_footer {
		transition: opacity var(--duration-long) var(--ease), visibility var(--duration-long) var(--ease);
	}

	body.scroller-fullscreen-active .banner,
	body.scroller-fullscreen-active .post_footer {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}
}

/* ---------- Large (>= 1200px): side panel ---------- */
@media (min-width: 1200px) {
	.container {
		margin-right: var(--container-margin-right-wide);
	}

	.post_footer {
		position: fixed;
		top: 0;
		left: var(--panel-left);
		right: 0;
		bottom: 0;
		padding: 168px var(--space-10) 0;
		overflow-y: auto;
		z-index: 2;
	}

	h1 .hanchor,
	h2 .hanchor,
	h3 .hanchor {
		visibility: hidden;
	}

	h1:hover .hanchor,
	h2:hover .hanchor,
	h3:hover .hanchor {
		visibility: visible;
	}

	.post_footer h2 {
		font-size: var(--fs-22);
	}

	.post_footer p {
		font-size: var(--fs-18);
	}
}