/*!
 * Baly Blog — blog pages (handle `baly-blog`, depends on `baly-blog-recent`
 * for tokens + card + strip, and on the theme's bch-ui / bch-ui-nav).
 *
 *   1. Page rhythm + page head (title, lede, count, topic chips)
 *   2. The lead story / slider (the card grid lives in baly-blog.css)
 *   3. Blog index: topic tiles, editor's pick, «الأكثر قراءة»
 *   4. Post: layout, byline, featured image, contents list, prose,
 *      author box, aside lists, sign-up box
 *   5. Comments
 *
 * Mobile-first: phone = base, then min-width 641px / 961px / 1281px.
 * Logical properties only. No !important, no gradients, no letter-spacing.
 */

/* ── 1. Page rhythm + head ──────────────────────────────────────────── */
.baly-blog-home,
.baly-blog-category,
.baly-blog-post {
	/* Section rhythm 48 phone / 64 desktop (app-like pages). No page
	   top/bottom padding: the theme spaces the header and the footer. */
	display: flex; flex-direction: column; gap: var(--bsy-block-gap, var(--bb-space-12));
}
.bb-sec { min-width: 0; }

.bb-head { display: flex; flex-direction: column; gap: var(--bb-space-4); }
.bb-head .bsy-crumbs { margin: 0; }
.bb-head--cat { padding-block-end: var(--bb-space-8); border-block-end: 1px solid var(--bb-line); }
.bb-head__count { margin: calc(var(--bb-space-4) * -1 + var(--bb-space-2)) 0 0; font-size: var(--bb-text-sm); color: var(--bb-muted); }
/* Topic chips: one sideways row on phones (to the screen edges), wrapped from 641px. */
.bb-chips .bsy-chips--scroll {
	margin-inline: calc(var(--bsy-gutter, 16px) * -1);
	padding-inline: var(--bsy-gutter, 16px);
	scroll-padding-inline: var(--bsy-gutter, 16px);
}

@media (min-width: 641px) {
	.bb-chips .bsy-chips--scroll { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}
@media (min-width: 961px) {
	.baly-blog-home,
	.baly-blog-category,
	.baly-blog-post { gap: var(--bsy-block-gap, var(--bb-space-16)); }
}

/* ── 2b. Lead story (index slider, category «الأحدث») ──────────────── */
.bb-hero { min-width: 0; }
.bb-lead { display: flex; flex-direction: column; gap: var(--bb-space-4); min-width: 0; }
.bb-lead[hidden] { display: none; }
.bb-lead__media { display: block; border-radius: var(--bb-radius-lg); }
.bb-lead__img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 16 / 10; object-fit: cover;
	border-radius: var(--bb-radius-lg);
	background: var(--bb-grey-100);
}
.bb-lead__b { display: flex; flex-direction: column; align-items: flex-start; gap: var(--bb-space-3); min-width: 0; }
.bb-lead__kicker { margin: 0; font-size: var(--bb-text-sm); color: var(--bb-muted); }
.bb-lead__t { margin: 0; font-size: var(--bb-text-lg); font-weight: var(--bb-fw-bold); line-height: 1.45; color: var(--bb-ink); }
.bb-lead__t a { color: inherit; text-decoration: none; border-radius: var(--bb-radius-xs); }
.bb-lead__x {
	margin: 0;
	font-size: var(--bb-text-base); line-height: 1.7; color: var(--bb-fg2);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.bb-lead__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bb-space-4); width: 100%; padding-block-start: var(--bb-space-2); }
.bb-lead__ctl { display: flex; align-items: center; gap: var(--bb-space-2); margin-inline-start: auto; }
.bb-lead__ctl[hidden] { display: none; }
.bb-lead__ctl .bsy-icon-btn:disabled { cursor: default; }
.bb-lead__pos { min-width: 44px; text-align: center; font-size: var(--bb-text-sm); color: var(--bb-muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
	.bb-lead__t a:hover { color: var(--bb-brand); }
}
@media (prefers-reduced-motion: no-preference) {
	.bb-lead.bb-in { animation: bb-fade 200ms var(--bb-ease-out); }
	@keyframes bb-fade { from { opacity: 0; } }
}
@media (min-width: 961px) {
	.bb-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--bb-space-12); align-items: center; }
	.bb-lead--text { grid-template-columns: minmax(0, 1fr); }
	.bb-lead__media,
	.bb-lead__img { border-radius: var(--bb-radius-xl); }
	.bb-lead__b { gap: var(--bb-space-4); }
	.bb-lead__t { font-size: var(--bb-text-2xl); }
	.bb-lead__x { font-size: var(--bb-text-md); line-height: 1.75; }
}

/* ── 3. Blog index: topic tiles ─────────────────────────────────────── */
.bb-topics .bsy-rail__track { --bsy-rail-w: 150px; --bsy-rail-gap: var(--bb-space-3); }
.bb-tile { display: flex; flex-direction: column; gap: var(--bb-space-2); color: var(--bb-ink); text-decoration: none; border-radius: var(--bb-radius-md); }
.bb-tile__img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--bb-radius-md);
	background: var(--bb-grey-100);
}
.bb-tile__t { margin: 0; font-size: var(--bb-text-base); font-weight: var(--bb-fw-semibold); line-height: 1.5; }
.bb-tile__n { font-size: var(--bb-text-sm); color: var(--bb-muted); }
@media (hover: hover) {
	.bb-tile:hover .bb-tile__t { color: var(--bb-brand); }
}
@media (min-width: 961px) {
	.bb-topics .bsy-rail__track { --bsy-rail-w: calc((100% - (var(--bb-n, 6) - 1) * var(--bb-space-5)) / var(--bb-n, 6)); --bsy-rail-gap: var(--bb-space-5); }
}

/* ── 3b. Editor's pick + «الأكثر قراءة» side by side ───────────────── */
.bb-duo { display: flex; flex-direction: column; gap: var(--bb-space-10); }
.bb-card--pick .bb-card__img { aspect-ratio: 3 / 2; border-radius: var(--bb-radius-lg); }
.bb-card--pick .bb-card__t { font-size: var(--bb-text-md); font-weight: var(--bb-fw-bold); line-height: 1.45; -webkit-line-clamp: 3; }
.bb-card--pick .bb-card__x { font-size: var(--bb-text-base); -webkit-line-clamp: 3; }

.bb-rank { margin: 0; padding: 0; list-style: none; }
.bb-rank__a {
	display: grid; grid-template-columns: 20px 72px minmax(0, 1fr); gap: var(--bb-space-3); align-items: center;
	padding-block: var(--bb-space-4);
	border-block-start: 1px solid var(--bb-line);
	color: var(--bb-ink); text-decoration: none;
}
.bb-rank > li:last-child > .bb-rank__a { border-block-end: 1px solid var(--bb-line); }
.bb-rank__n { font-size: var(--bb-text-sm); font-weight: var(--bb-fw-bold); color: var(--bb-muted); text-align: center; font-variant-numeric: tabular-nums; }
.bb-rank__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bb-radius-sm); background: var(--bb-grey-100); }
.bb-rank__n + .bb-rank__b { grid-column: 2 / -1; } /* no photo */
.bb-rank__b { display: flex; flex-direction: column; gap: var(--bb-space-1); min-width: 0; }
.bb-rank__t {
	margin: 0; font-size: var(--bb-text-base); font-weight: var(--bb-fw-semibold); line-height: 1.5;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.bb-rank__cat { font-size: var(--bb-text-sm); color: var(--bb-muted); }
@media (hover: hover) {
	.bb-rank__a:hover .bb-rank__t { color: var(--bb-brand); }
}
@media (min-width: 641px) {
	.bb-card--pick .bb-card__t { font-size: var(--bb-text-lg); }
}
@media (min-width: 961px) {
	.bb-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bb-space-16); align-items: stretch; }
	/* Both columns end on one line: the pick's photo takes up whatever
	   height the «الأكثر قراءة» list needs beyond the pick's text. */
	.bb-pick { display: flex; flex-direction: column; }
	.bb-pick > .bb-card--pick { flex: 1 1 auto; }
	.bb-card--pick .bb-card__img { flex: 1 1 0; min-height: 240px; aspect-ratio: auto; }
	.bb-rank__a { grid-template-columns: 24px 88px minmax(0, 1fr); gap: var(--bb-space-4); }
}

/* ── 4. Post ────────────────────────────────────────────────────────── */
.bb-post { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-12); }
.bb-post__main { display: flex; flex-direction: column; gap: var(--bb-space-5); min-width: 0; }
.bb-post__main > * { width: 100%; max-width: 720px; box-sizing: border-box; }
.bb-post__head { display: flex; flex-direction: column; gap: var(--bb-space-4); }
.bb-post__head .bsy-crumbs { margin: 0; }
.bb-post__fig { margin: 0; }
.bb-post__img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: var(--bb-radius-lg);
	background: var(--bb-grey-100);
}

/* Byline + the site mark (also the author box's) */
.bb-by { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bb-space-2); font-size: var(--bb-text-sm); color: var(--bb-fg2); }
.bb-by__name { font-weight: var(--bb-fw-semibold); color: var(--bb-ink); }
.bb-by .bb-meta { column-gap: var(--bb-space-2); }
.bb-mark {
	display: inline-grid; place-items: center; flex: none;
	width: 32px; height: 32px;
	border: 1px solid var(--bb-line); border-radius: var(--bb-radius-pill);
	background: var(--bb-grey-50);
	overflow: hidden;
}
.bb-mark img { display: block; width: 70%; height: 70%; object-fit: contain; }
.bb-mark--lg { width: 56px; height: 56px; }

/* Contents list — one design: grey box, Arabic-Indic numbers, current in blue */
.bb-toc { padding: var(--bb-space-4) var(--bb-space-5); border-radius: var(--bb-radius-lg); background: var(--bb-grey-50); }
.bb-toc__h { margin: 0 0 var(--bb-space-2); font-size: var(--bb-text-base); font-weight: var(--bb-fw-bold); line-height: 1.5; color: var(--bb-ink); }
.bb-toc__l { margin: 0; padding: 0; padding-inline-start: var(--bb-space-5); list-style: arabic-indic; }
.bb-toc__l > li { font-size: var(--bb-text-base); line-height: 1.6; }
.bb-toc__l > li::marker { color: var(--bb-muted); font-weight: var(--bb-fw-semibold); }
.bb-toc__l a {
	display: block;
	padding-block: 10px; padding-inline: 4px 8px;
	border-radius: var(--bb-radius-sm);
	color: var(--bb-ink); text-decoration: none;
}
.bb-toc__l a[aria-current] { color: var(--bb-brand); font-weight: var(--bb-fw-semibold); }
@media (hover: hover) {
	.bb-toc__l a:hover { background: var(--bb-grey-100); }
}
.bb-toc--fold { padding-block: 0; }
.bb-toc--fold > .bb-toc__h {
	display: flex; align-items: center; justify-content: space-between; gap: var(--bb-space-3);
	min-height: 52px; margin: 0;
	cursor: pointer; list-style: none;
}
.bb-toc--fold > .bb-toc__h::-webkit-details-marker { display: none; }
.bb-toc--fold > .bb-toc__h svg { flex: none; color: var(--bb-fg2); }
.bb-toc--fold[open] > .bb-toc__h svg { transform: rotate(180deg); }
.bb-toc--fold > nav { padding-block-end: var(--bb-space-3); }
.bb-toc__n::before { /* drawn dot, not «·» next to digits */
	content: ""; display: inline-block; width: 4px; height: 4px;
	margin-inline: 2px 8px; border-radius: var(--bb-radius-pill);
	background: currentColor; opacity: .6; vertical-align: middle;
}
.bb-toc__n { font-weight: var(--bb-fw-regular); color: var(--bb-fg2); }
/* Which copy shows where: closed disclosure on phones/tablets, open list on
   desktop (inline from 961px; in the aside from 1281px). */
.bb-toc--md,
.bb-toc--wide { display: none; }

/* Prose — the_content: 720px measure, 16/1.8 phones, 18/1.8 from 641px */
.bb-prose { font-size: var(--bb-text-base); line-height: 1.8; color: var(--bb-ink); overflow-wrap: break-word; }
.bb-prose > * { margin-block: 0 var(--bb-space-5); }
.bb-prose > :first-child { margin-block-start: 0; }
.bb-prose > :last-child { margin-block-end: 0; }
.bb-prose :is(h2, h3, h4) { color: var(--bb-ink); scroll-margin-block-start: 72px; }
.bb-prose h2 { margin: 36px 0 var(--bb-space-3); font-size: var(--bb-text-lg); font-weight: var(--bb-fw-bold); line-height: 1.4; }
.bb-prose h3 { margin: var(--bb-space-6) 0 var(--bb-space-2); font-size: var(--bb-text-md); font-weight: var(--bb-fw-bold); line-height: 1.45; }
.bb-prose h4 { margin: var(--bb-space-6) 0 var(--bb-space-2); font-size: var(--bb-text-base); font-weight: var(--bb-fw-bold); line-height: 1.5; }
.bb-prose :is(.lead, .lede) { font-size: var(--bb-text-md); font-weight: var(--bb-fw-medium); line-height: 1.7; }
.bb-prose a { color: var(--bb-brand); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.bb-prose :is(strong, b) { font-weight: var(--bb-fw-bold); }
.bb-prose :is(em, i, cite) { font-style: normal; }
.bb-prose :is(ul, ol) { padding-inline-start: var(--bb-space-6); }
.bb-prose ol { list-style: arabic-indic; }
.bb-prose li { margin-block: 0 var(--bb-space-2); }
.bb-prose li::marker { color: var(--bb-muted); }
.bb-prose ol > li::marker { font-weight: var(--bb-fw-semibold); }
.bb-prose :is(img, video, iframe) { max-width: 100%; height: auto; }
.bb-prose :is(img, video) { border-radius: var(--bb-radius-lg); }
.bb-prose figure { margin-inline: 0; }
.bb-prose figcaption { margin-block-start: var(--bb-space-2); font-size: var(--bb-text-sm); line-height: 1.5; color: var(--bb-muted); }
.bb-prose blockquote {
	margin-inline: 0; padding-inline-start: var(--bb-space-5);
	border-inline-start: 2px solid var(--bb-ink);
	font-size: var(--bb-text-md); font-weight: var(--bb-fw-medium); line-height: 1.7;
}
.bb-prose blockquote > :last-child { margin-block-end: 0; }
.bb-prose hr { border: 0; border-block-start: 1px solid var(--bb-line); margin-block: var(--bb-space-8); }
.bb-prose code { padding: 1px 6px; border-radius: var(--bb-radius-xs); background: var(--bb-grey-100); font-family: ui-monospace, Menlo, monospace; font-size: 0.875em; direction: ltr; unicode-bidi: isolate; }
.bb-prose .wp-block-button__link { display: inline-flex; align-items: center; min-height: var(--bb-size-btn-lg); padding: 0 var(--bb-space-6); border-radius: var(--bb-radius-pill); background: var(--bb-brand); color: var(--bb-white); font-weight: var(--bb-fw-bold); text-decoration: none; }
@media (hover: hover) {
	.bb-prose a:hover { color: var(--bb-brand-hover); }
	.bb-prose .wp-block-button__link:hover { background: var(--bb-brand-hover); color: var(--bb-white); }
}
/* Tables (wrapped by the plugin in .bb-table, scrolls sideways when wide) */
.bb-table { overflow-x: auto; padding: var(--bb-space-1) var(--bb-space-4) var(--bb-space-4); border: 1px solid var(--bb-line); border-radius: var(--bb-radius-lg); }
.bb-table table { width: 100%; border-collapse: collapse; font-size: var(--bb-text-base); line-height: 1.6; font-variant-numeric: tabular-nums; }
.bb-table caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bb-table :is(th, td) { padding: var(--bb-space-3) 0; padding-inline-end: var(--bb-space-4); border-block-end: 1px solid var(--bb-line); text-align: start; vertical-align: baseline; }
.bb-table :is(th, td):last-child { padding-inline-end: 0; }
.bb-table tbody th { font-weight: var(--bb-fw-regular); color: var(--bb-fg2); }
.bb-table thead th { font-weight: var(--bb-fw-semibold); color: var(--bb-ink); }
.bb-table td { font-weight: var(--bb-fw-semibold); }
.bb-table tr:has(> :nth-child(2):last-child) > td:last-child { text-align: end; white-space: nowrap; }
.bb-table tr:last-child > * { border-block-end: 0; }

/* Author box at the end of the article */
.bb-author {
	display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--bb-space-4); align-items: start;
	margin-block-start: var(--bb-space-4);
	padding-block: 28px;
	border-block: 1px solid var(--bb-line);
}
.bb-author__b { display: flex; flex-direction: column; align-items: flex-start; gap: var(--bb-space-1); min-width: 0; }
.bb-author__k { margin: 0; font-size: var(--bb-text-sm); font-weight: var(--bb-fw-medium); color: var(--bb-muted); }
.bb-author__n { margin: 0; font-size: var(--bb-text-md); font-weight: var(--bb-fw-semibold); line-height: 1.4; }
.bb-author__r { margin: 0; font-size: var(--bb-text-sm); color: var(--bb-fg2); }
.bb-author__bio {
	margin: var(--bb-space-1) 0 0; font-size: var(--bb-text-base); line-height: 1.7; color: var(--bb-fg2);
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.bb-author .bsy-link { min-height: var(--bb-size-tap); }

/* Aside: lists on the page (no cards), optional sign-up box */
.bb-post__aside { display: flex; flex-direction: column; gap: var(--bb-space-8); min-width: 0; }
.bb-side__h { margin: 0 0 var(--bb-space-1); font-size: var(--bb-text-md); font-weight: var(--bb-fw-bold); line-height: 1.4; }
.bb-side__l { margin: 0; padding: 0; list-style: none; }
.bb-side__a {
	display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 14px; align-items: center;
	padding-block: 14px;
	border-block-start: 1px solid var(--bb-line);
	color: var(--bb-ink); text-decoration: none;
}
.bb-side__l > li:last-child > .bb-side__a { border-block-end: 1px solid var(--bb-line); }
.bb-side__a > .bb-side__b:first-child { grid-column: 1 / -1; }
.bb-side__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--bb-radius-sm); background: var(--bb-grey-100); }
.bb-side__b { display: flex; flex-direction: column; gap: var(--bb-space-1); min-width: 0; }
.bb-side__t { font-size: var(--bb-text-base); font-weight: var(--bb-fw-semibold); line-height: 1.55; }
.bb-side__d { font-size: var(--bb-text-sm); color: var(--bb-muted); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
	.bb-side__a:hover .bb-side__t { color: var(--bb-brand); }
}
.bb-cta {
	display: flex; flex-direction: column; align-items: flex-start; gap: var(--bb-space-3);
	padding: var(--bb-space-6);
	border: 1px solid var(--bb-line); border-radius: var(--bb-radius-lg);
}
.bb-cta__img { flex: none; width: 72px; height: 72px; object-fit: contain; border-radius: 0; }
.bb-cta__b { display: flex; flex-direction: column; gap: var(--bb-space-1); min-width: 0; }
/* In-article card ([baly_blog_cta]): grey box; phones stack with a
   full-width button, from 641px one row with the button at the end. */
.bb-prose .bb-cta--inline { margin-block: var(--bb-space-2) 28px; }
.bb-cta--inline { flex-flow: row wrap; align-items: center; gap: 14px var(--bb-space-5); padding: var(--bb-space-5); border: 0; background: var(--bb-grey-50); }
.bb-cta--inline .bb-cta__img { width: 56px; height: 56px; }
.bb-cta--inline .bb-cta__b { flex: 1 1 0; }
.bb-cta--inline .bb-cta__x { font-size: var(--bb-text-sm); }
.bb-cta--inline .bsy-btn { flex: 1 1 100%; }
.bb-prose .bb-cta a.bsy-btn { text-decoration: none; }
/* Below the sidebar breakpoint the aside's lists would only repeat posts
   the related strip already lists: show them in the sidebar only. */
.bb-post__aside .bb-side { display: none; }
.bb-post__aside:not(:has(.bb-cta)) { display: none; }
/* Phones: a tall screenshot in a post never fills more than 70% of the screen. */
.bb-prose figure img { max-height: 70vh; width: auto; margin-inline: auto; }
.bb-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--bb-space-3); }
.bb-cta__t { margin: 0; font-size: var(--bb-text-md); font-weight: var(--bb-fw-bold); line-height: 1.4; }
.bb-cta__x { margin: 0; font-size: var(--bb-text-base); line-height: 1.6; color: var(--bb-fg2); }

@media (min-width: 641px) {
	.bb-post__main { gap: 28px; }
	.bb-post__img { aspect-ratio: 16 / 9; }
	.bb-by__name { font-size: var(--bb-text-base); }
	.bb-mark { width: 40px; height: 40px; }
	.bb-mark--lg { width: 72px; height: 72px; }
	.bb-toc { padding: var(--bb-space-5) var(--bb-space-6); }
	.bb-toc--fold { padding-block: 0; }
	.bb-prose { font-size: var(--bb-text-md); }
	.bb-prose :is(h2, h3, h4) { scroll-margin-block-start: 96px; }
	.bb-prose h2 { margin: var(--bb-space-12) 0 var(--bb-space-4); font-size: var(--bb-text-xl); }
	.bb-prose h3 { margin: var(--bb-space-8) 0 var(--bb-space-3); font-size: var(--bb-text-lg); }
	.bb-prose h4 { font-size: var(--bb-text-md); font-weight: var(--bb-fw-semibold); }
	.bb-prose :is(.lead, .lede) { font-size: var(--bb-text-lg); }
	.bb-prose blockquote { font-size: var(--bb-text-lg); }
	.bb-table { padding: var(--bb-space-2) var(--bb-space-6) var(--bb-space-5); }
	.bb-author { grid-template-columns: 72px minmax(0, 1fr); gap: var(--bb-space-5); }
	.bb-cta--inline { flex-wrap: nowrap; padding: var(--bb-space-5) var(--bb-space-6); }
	.bb-cta--inline .bb-cta__img { width: 64px; height: 64px; }
	.bb-cta--inline .bb-cta__x { font-size: var(--bb-text-base); }
	.bb-cta--inline .bsy-btn { flex: none; }
	.bb-prose figure img { max-height: none; }
}
@media (min-width: 961px) {
	.bb-toc--md { display: block; }
	.bb-toc--sm { display: none; }
}
@media (min-width: 1281px) {
	.bb-post { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--bb-space-24); align-items: start; }
	.bb-post--full { grid-template-columns: minmax(0, 1fr); }
	.bb-toc--wide { display: block; }
	.bb-toc--narrow { display: none; }
	.bb-post__aside:not(:has(.bb-cta)) { display: flex; }
	.bb-post__aside .bb-side { display: block; }
	/* Side placement: the aside (contents list + latest) follows the reader,
	   96px under the top, and stops with the article. */
	.bb-post--side .bb-post__aside {
		position: sticky; inset-block-start: 96px;
		max-block-size: calc(100vh - 112px);
		overflow-y: auto;
	}
}
@media (prefers-reduced-motion: no-preference) {
	html:has(.bb-toc) { scroll-behavior: smooth; }
}

/* ── 5. Comments ────────────────────────────────────────────────────── */
.bb-comments { display: flex; flex-direction: column; gap: var(--bb-space-6); max-width: 720px; }
.bb-comments__h { margin: 0; font-size: var(--bb-text-lg); font-weight: var(--bb-fw-bold); line-height: 1.4; }
.bb-comments__n { color: var(--bb-muted); font-weight: var(--bb-fw-medium); }
.bb-comments__l,
.bb-comments__kids { margin: 0; padding: 0; list-style: none; }
.bb-comment {
	display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--bb-space-3);
	padding-block: var(--bb-space-4);
	border-block-start: 1px solid var(--bb-line);
}
.bb-comment > .bb-comments__kids { grid-column: 1 / -1; padding-inline-start: var(--bb-space-6); }
.bb-comment__av {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border-radius: var(--bb-radius-pill);
	background: var(--bb-grey-100); color: var(--bb-fg2);
	font-weight: var(--bb-fw-bold);
}
.bb-comment__b { min-width: 0; }
.bb-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bb-space-2); margin: 0; font-size: var(--bb-text-sm); color: var(--bb-muted); }
.bb-comment__name { font-size: var(--bb-text-base); font-weight: var(--bb-fw-semibold); color: var(--bb-ink); text-decoration: none; }
.bb-comment__text { margin-block-start: var(--bb-space-1); font-size: var(--bb-text-base); line-height: 1.7; overflow-wrap: anywhere; }
.bb-comment__text p { margin: 0 0 var(--bb-space-2); }
.bb-comment__pending { margin: var(--bb-space-1) 0 0; font-size: var(--bb-text-sm); color: var(--bb-muted); }
.bb-comment__reply { margin: 0; }
.bb-comment__reply a { display: inline-flex; align-items: center; min-height: var(--bb-size-tap); font-size: var(--bb-text-sm); font-weight: var(--bb-fw-semibold); color: var(--bb-brand); text-decoration: none; }
.bb-cform__h { margin: 0 0 var(--bb-space-4); font-size: var(--bb-text-md); font-weight: var(--bb-fw-bold); line-height: 1.4; }
.bb-cform__h small { margin-inline-start: var(--bb-space-3); font-size: var(--bb-text-sm); font-weight: var(--bb-fw-medium); }
.bb-cform__h small a { color: var(--bb-brand); }
.bb-cform { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bb-space-5); }
.bb-cform textarea.bsy-input { resize: vertical; }
.bb-cform__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bb-space-3); margin: 0; }
@media (min-width: 641px) {
	.bb-comments__h { font-size: var(--bb-text-xl); }
	.bb-comment > .bb-comments__kids { padding-inline-start: var(--bb-space-12); }
	.bb-cform { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bb-cform > :not(.bb-cform__f--author):not(.bb-cform__f--email) { grid-column: 1 / -1; }
	.bb-cform__h { font-size: var(--bb-text-lg); }
}