/* Sam Updater single post skin (Beebom Gadgets layout, Sam Updater colors).
   Unlayered on purpose: the theme ships everything inside @layer, so these
   rules win without extra specificity. Scoped to body.sud-bb. */

.sud-bb {
	--bb-ink: #26201a;
	--bb-ink-2: #3a2b1f;
	--bb-yellow: #ffd84d;
	--bb-orange: #ff5c2b;
	--bb-link: #c2410c;
	--bb-page: #ffffff;
	--bb-surface: #ffffff;
	--bb-soft: #faf6ee;
	--bb-band: #fff6e0;
	--bb-text: #1b1612;
	--bb-head: #26201a;
	--bb-muted: #6b5e52;
	--bb-line: rgba(38, 32, 26, .12);
	--bb-pill: #fff1c7;
	--bb-hero: radial-gradient(60% 90% at 50% 45%, #5a3a1d 0%, #3a2b1f 45%, #1f1813 100%);
	--bb-radius: 16px;
	--bb-max: 1120px;
	--bb-head-h: 64px;
	--bb-nav-h: 40px;
	--bb-font: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--bb-display: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

	--clr-brand: var(--bb-link);
	--clr-link: var(--bb-link);
	--clr-bg-page: var(--bb-page);
	--clr-bg-surface: var(--bb-surface);
	--clr-border-default: var(--bb-line);
	--clr-text-default: var(--bb-text);
	--clr-text-muted: var(--bb-muted);

	background: var(--bb-page);
	color: var(--bb-text);
	font-family: var(--bb-font);
}

html[data-theme="dark"] .sud-bb {
	--bb-link: #ffb27a;
	--bb-page: #14110e;
	--bb-surface: #1c1814;
	--bb-soft: #201b16;
	--bb-band: #1d1814;
	--bb-text: #ece6dd;
	--bb-head: #fff3e0;
	--bb-muted: #b3a797;
	--bb-line: rgba(255, 240, 220, .12);
	--bb-pill: #3a2d1c;
	--bb-hero: radial-gradient(60% 90% at 50% 45%, #4a3018 0%, #2a1f16 45%, #0f0c09 100%);
}

.sud-bb :is(h1, h2, h3, h4) {
	font-family: var(--bb-display);
	color: var(--bb-head);
	letter-spacing: -.01em;
}

.sud-bb .wrapper {
	max-width: var(--bb-max);
	padding-inline: 16px;
}

/* ---------- Header: logo, search, CTA, then the menu band ---------- */

.sud-bb .header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--bb-surface);
	border-bottom: 1px solid var(--bb-line);
}

.sud-bb .header__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"logo search toggle"
		"nav nav nav";
	align-items: center;
	column-gap: 24px;
	padding-block: 0;
	min-height: var(--bb-head-h);
}

.sud-bb .site-logo { grid-area: logo; }

.sud-bb .site-logo__text {
	font-family: var(--bb-display);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -.03em;
	color: var(--bb-head);
	padding: 0;
	margin: 0;
}

.sud-bb .site-logo__text .wordmark__accent { color: var(--bb-orange); }

.sud-bb .sbb-searchbox {
	grid-area: search;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 776px;
	height: 48px;
	margin: 8px auto;
	padding: 0 16px;
	border: 1px solid var(--bb-line);
	border-radius: 8px;
	background: var(--bb-soft);
	color: var(--bb-muted);
	font: 400 14px/1 var(--bb-font);
	letter-spacing: .02em;
	cursor: text;
	transition: border-color .2s ease, background-color .2s ease;
}

.sud-bb .sbb-searchbox:hover { border-color: var(--bb-orange); }

.sud-bb .theme-toggle {
	grid-area: toggle;
	margin: 0;
	color: var(--bb-head);
}

.sud-bb .site-search { position: absolute; }
.sud-bb .site-search__toggle--open { display: none; }

.sud-bb .site-nav:not(.site-nav--mobile) {
	grid-area: nav;
	justify-self: stretch;
	width: 100%;
	margin: 0;
	height: var(--bb-nav-h);
	background: var(--bb-band);
	box-shadow: 0 0 0 100vmax var(--bb-band);
	clip-path: inset(0 -100vmax);
	border-top: 1px solid var(--bb-line);
}

.sud-bb .site-nav:not(.site-nav--mobile) :is(.site-nav__menu, .site-nav__list) {
	width: 100%;
	height: 100%;
	margin: 0;
}

.sud-bb .site-nav__list:not(.site-nav__list--mobile) {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: 0;
	padding: 0;
}

.sud-bb .site-nav__list:not(.site-nav__list--mobile) .site-nav__link {
	padding: 8px 12px 8px 8px;
	border-radius: 6px;
	font: 500 15px/1.2 var(--bb-font);
	color: var(--bb-head);
	text-transform: none;
	white-space: nowrap;
}

.sud-bb .site-nav__list:not(.site-nav__list--mobile) .site-nav__link:hover,
.sud-bb .site-nav__list:not(.site-nav__list--mobile) .site-nav__link[aria-current] {
	color: var(--bb-link);
}

/* ---------- Hero: dark band, glow, ribbons, curved base ---------- */

.sud-bb .post-hero {
	position: relative;
	overflow: hidden;
	padding: 32px 0 0;
	border: 0;
	border-radius: 0;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='120' viewBox='0 0 140 120'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23ffd84d'/%3E%3Cstop offset='1' stop-color='%23ff5c2b'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M-6 108C8 60 20 34 52 34s36 24 64-6' fill='none' stroke='url(%23g)' stroke-width='22' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") left -10px top -14px / 140px auto no-repeat,
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='220' viewBox='0 0 190 220'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ff5c2b'/%3E%3Cstop offset='1' stop-color='%23ffd84d'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M120 14c40 30 54 84 30 120s-78 52-108 24S30 92 70 84s92 22 140 10' fill='none' stroke='url(%23g)' stroke-width='22' stroke-linecap='round' opacity='.38'/%3E%3C/svg%3E") right -30px top 150px / 190px auto no-repeat,
		var(--bb-hero);
	color: #fff;
}

.sud-bb .post-hero::after {
	content: "";
	position: absolute;
	left: -15%;
	right: -15%;
	bottom: 0;
	height: calc(min(var(--bb-max) - 32px, 100vw - 32px) * .5625 * .52);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	background: var(--bb-page);
}

.sud-bb .post-hero__inner {
	position: relative;
	z-index: 1;
	--flow-space: 16px;
}

.sud-bb .post-hero__categories { display: flex; flex-wrap: wrap; gap: 8px; }

.sud-bb .post-hero__category-link {
	margin: 0;
	padding: 6px 12px;
	border: 1px solid rgba(255, 216, 77, .45);
	border-radius: 999px;
	background: rgba(255, 216, 77, .12);
	color: var(--bb-yellow);
	font: 600 13px/1 var(--bb-font);
	text-decoration: none;
}

.sud-bb .post-hero__category-link:hover { background: rgba(255, 216, 77, .24); }

.sud-bb .post-hero__title {
	max-width: none;
	margin-block-start: 20px;
	font: 600 48px/58px var(--bb-display);
	color: #fff;
}

.sud-bb .post-hero__excerpt {
	max-width: none;
	color: rgba(255, 255, 255, .88);
}

.sud-bb .post-hero__excerpt p {
	font: 400 20px/36px var(--bb-font);
	margin: 0;
}

.sud-bb .sbb-byline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-block-start: 20px;
}

.sud-bb .post-hero__meta {
	gap: 10px;
	font: 400 15px/1.4 var(--bb-font);
	color: rgba(255, 255, 255, .8);
}

.sud-bb .post-hero__meta-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .25);
}

.sud-bb .post-hero__meta-text {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
}

.sud-bb .post-hero__meta-text > * + * {
	margin-left: 10px;
	padding-left: 10px;
	border-left: 1px solid rgba(255, 255, 255, .45);
	line-height: 1.1;
}

.sud-bb .post-hero__meta-author {
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.sud-bb .post-hero__meta-author::before {
	content: "by ";
	font-weight: 400;
	color: rgba(255, 255, 255, .8);
}

.sud-bb .post-hero__meta-reviewer,
.sud-bb .post-hero__meta-date { color: rgba(255, 255, 255, .8); }

.sud-bb .post-hero__meta-reviewer-name { color: #fff; font-weight: 600; }
.sud-bb .post-hero__meta-reviewer-badge svg { width: 16px; height: 16px; fill: var(--bb-yellow); }

.sud-bb .sbb-share { display: flex; gap: 12px; flex-shrink: 0; }

.sud-bb .sbb-share__btn {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1.5px solid #fff;
	border-radius: 50%;
	background: none;
	color: #fff;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.sud-bb .sbb-share__btn:hover,
.sud-bb .sbb-share__btn.is-done {
	background: var(--bb-yellow);
	border-color: var(--bb-yellow);
	color: #26201a;
}

.sud-bb .sbb-hero-figure {
	margin: 20px 0 0;
}

.sud-bb .sbb-hero-figure img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--bb-radius);
	box-shadow: 0 18px 40px -18px rgba(20, 12, 4, .55);
}

/* ---------- Body: article column + sticky sidebar ---------- */

.sud-bb .post-layout {
	grid-template-columns: minmax(0, 1fr);
	gap: 80px;
	margin-block-start: 40px;
}

.sud-bb .post-content {
	--flow-space: 24px;
	font: 400 20px/30px var(--bb-font);
	color: var(--bb-text);
}

.sud-bb .post-content :is(h2, h3, h4) { --flow-space: 40px; }
.sud-bb .post-content :is(h2, h3, h4) + * { --flow-space: 20px; }

.sud-bb .post-content h2 { font: 600 24px/32px var(--bb-display); color: var(--bb-head); }
.sud-bb .post-content h3 { font: 600 20px/28px var(--bb-display); color: var(--bb-head); }

.sud-bb .post-content :is(ol, ul) { padding-inline-start: 32px; }
.sud-bb .post-content li { margin-block: 8px; }
.sud-bb .post-content li::marker { color: var(--bb-orange); font-weight: 600; }
.sud-bb .post-content :is(strong, b) { font-weight: 600; color: var(--bb-head); }

.sud-bb .post-content a {
	color: var(--bb-link);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.sud-bb .post-content a:hover { text-decoration-thickness: 2px; }

.sud-bb .post-content img {
	border-radius: 8px;
	margin-inline: auto;
}

.sud-bb .post-content figcaption {
	margin-top: 8px;
	font: italic 400 14px/20px var(--bb-font);
	color: var(--bb-muted);
	text-align: center;
}

.sud-bb .post-content table {
	font-size: 16px;
	line-height: 24px;
	border-radius: 12px;
	overflow: hidden;
}

.sud-bb .post-content th { background: var(--bb-band); font-family: var(--bb-display); }

.sud-bb .post-content blockquote {
	margin-inline: 0;
	padding: 16px 20px;
	border-left: 4px solid var(--bb-yellow);
	border-radius: 0 12px 12px 0;
	background: var(--bb-soft);
}

/* Mobile TOC, styled like Beebom's Summary box */
.sud-bb .toc[data-variant="mobile"] {
	margin-bottom: 24px;
	border: 1px solid var(--bb-line);
	border-radius: 12px;
	padding: 0;
	background: var(--bb-soft);
	overflow: hidden;
}

.sud-bb .toc[data-variant="mobile"] .toc__summary {
	padding: 14px 16px;
	font: 600 17px/1.3 var(--bb-display);
	color: var(--bb-head);
}

.sud-bb .toc[data-variant="mobile"] .toc__nav { background: transparent; padding: 0 16px 14px; }

/* Related box inside the article */
.sud-bb .sbb-related {
	padding: 16px;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	background: var(--bb-soft);
}

.sud-bb .sbb-related__label {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 16px;
	font: 600 15px/1 var(--bb-display);
	color: var(--bb-head);
	white-space: nowrap;
}

.sud-bb .sbb-related__label::before,
.sud-bb .sbb-related__label::after {
	content: "";
	flex: 1;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--bb-yellow), var(--bb-orange));
}

.sud-bb :is(.sbb-related-item, .sbb-rec-item, .sbb-side-item) {
	display: flex;
	align-items: center;
	gap: 20px;
	text-decoration: none !important;
	color: inherit;
}

.sud-bb :is(.sbb-related-item, .sbb-rec-item, .sbb-side-item) img {
	flex-shrink: 0;
	width: 176px;
	height: auto;
	aspect-ratio: 16 / 9;
	margin: 0;
	border-radius: 12px;
	object-fit: cover;
}

.sud-bb :is(.sbb-related-item-body, .sbb-rec-item-body, .sbb-side-item-body) {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.sud-bb .sbb-related-item-title,
.sud-bb .sbb-rec-item-title,
.sud-bb .sbb-side-item-title {
	font: 500 20px/28px var(--bb-display);
	color: var(--bb-head);
	transition: color .2s ease;
}

.sud-bb :is(.sbb-related-item, .sbb-rec-item, .sbb-side-item):hover [class$="-title"] { color: var(--bb-link); }

.sud-bb .sbb-meta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 500 14px/1 var(--bb-font);
	color: var(--bb-muted);
	letter-spacing: .02em;
}

.sud-bb .sbb-meta i { width: 1px; height: 14px; background: currentColor; opacity: .6; }

/* Tags + author */
.sud-bb .post-footer { margin-top: 40px; }

.sud-bb .post-footer__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--bb-line);
	border-radius: 12px;
}

.sud-bb .post-footer__tags-title {
	margin: 0 6px 0 0;
	font: 600 18px/1 var(--bb-display);
	color: var(--bb-head);
}

.sud-bb .post-footer__tags-title::first-letter { color: var(--bb-orange); }

.sud-bb .post-footer__tags-link {
	margin: 0;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: var(--bb-pill);
	color: var(--bb-head);
	font: 500 14px/1 var(--bb-font);
}

.sud-bb .post-footer__tags-link::before { content: "#"; color: var(--bb-orange); }
.sud-bb .post-footer__tags-link:hover { background: var(--bb-yellow); color: #26201a; }

.sud-bb .post-author {
	padding: 24px;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	background: var(--bb-soft);
}

.sud-bb .post-author__title { font: 600 14px/1 var(--bb-font); text-transform: uppercase; letter-spacing: .08em; color: var(--bb-muted); }
.sud-bb .post-author__name { font: 600 22px/1.2 var(--bb-display); }
.sud-bb .post-author__bio { font-size: 16px; line-height: 24px; }
.sud-bb .post-author__cta { color: var(--bb-link); font-weight: 600; }
.sud-bb .author-links li:has(> a[href="#"]), .sud-bb .author-links:not(:has(a:not([href="#"]))) { display: none; }

/* "Verified" refresh card (inline styles in post content) */
.sud-bb .su-refresh-card {
	border: 1px solid var(--bb-line) !important;
	border-left: 4px solid var(--bb-yellow) !important;
	background: var(--bb-soft) !important;
	color: var(--bb-text) !important;
	box-shadow: none !important;
}
.sud-bb .su-refresh-card :is(h2, h3, h4) { color: var(--bb-head) !important; }
.sud-bb .su-refresh-kicker { color: var(--bb-link) !important; }
.sud-bb .su-refresh-card .suf-follow-list { padding-left: 0; }
.sud-bb .su-refresh-card p:not([style]) { margin: 0 0 .9em; }
.sud-bb .su-refresh-button {
	border-color: var(--bb-yellow) !important;
	background: var(--bb-yellow) !important;
	color: #26201a !important;
}
.sud-bb .su-refresh-button-secondary {
	border-color: var(--bb-line) !important;
	background: var(--bb-surface) !important;
	color: var(--bb-link) !important;
}

/* Sidebar */
.sud-bb .post-sidebar {
	margin: 0;
	padding: 0;
	border: 0;
}

.sud-bb .post-sidebar__stack {
	position: sticky;
	top: calc(var(--bb-head-h) + var(--bb-nav-h) + 24px);
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sud-bb .post-sidebar__ad:empty { display: none; }

.sud-bb .sbb-side-card,
.sud-bb .post-sidebar__toc {
	padding: 20px;
	border: 1px solid var(--bb-line);
	border-radius: var(--bb-radius);
	background: var(--bb-surface);
}

.sud-bb .sbb-tabs {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
	padding: 4px;
	border-radius: 999px;
	background: var(--bb-soft);
}

.sud-bb .sbb-tabs span {
	flex: 1;
	padding: 8px 0;
	border-radius: 999px;
	font: 600 14px/1 var(--bb-font);
	color: var(--bb-muted);
	text-align: center;
}

.sud-bb .sbb-tabs .is-active { background: var(--bb-pill); color: var(--bb-head); }

.sud-bb .sbb-side-list { display: flex; flex-direction: column; gap: 12px; }

.sud-bb .sbb-side-item {
	gap: 12px;
	padding: 8px;
	border: 1px solid var(--bb-line);
	border-radius: 12px;
}

.sud-bb .sbb-side-item img { width: 104px; border-radius: 8px; }
.sud-bb .sbb-side-item-title { font: 600 15px/21px var(--bb-display); }
.sud-bb .sbb-side-item-body { gap: 8px; }
.sud-bb .sbb-side-item .sbb-meta { flex-wrap: wrap; gap: 4px 6px; font-size: 12px; line-height: 16px; letter-spacing: 0; }
.sud-bb .sbb-side-item .sbb-meta i { height: 12px; }

.sud-bb .sbb-viewall {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	margin-top: 16px;
	border: 1px solid var(--bb-head);
	border-radius: 8px;
	color: var(--bb-head);
	font: 600 14px/1 var(--bb-font);
	text-decoration: none;
}

.sud-bb .sbb-viewall:hover { background: var(--bb-yellow); border-color: var(--bb-yellow); color: #26201a; }

.sud-bb .post-sidebar__toc .toc__title { font: 600 17px/1.2 var(--bb-display); color: var(--bb-head); }
.sud-bb .post-sidebar__toc .toc__link { font-size: 14px; line-height: 20px; color: var(--bb-muted); text-decoration: none; }
.sud-bb .post-sidebar__toc .toc__link:is(:hover, [aria-current]) { color: var(--bb-link); }

/* Recommended For You */
.sud-bb .sbb-rec { margin-block-start: 56px; }

.sud-bb .sbb-rec__title {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 24px;
	font: 600 28px/36px var(--bb-display);
}

.sud-bb .sbb-rec__title::after {
	content: "";
	flex: 1;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--bb-orange), var(--bb-yellow) 40%, transparent);
}

.sud-bb .sbb-rec__list { max-width: 768px; }

.sud-bb .sbb-rec-item {
	gap: 24px;
	padding-block: 20px;
	border-bottom: 1px solid var(--bb-line);
}

.sud-bb .sbb-rec-item:first-child { padding-top: 0; }
.sud-bb .sbb-rec-item-title { font: 500 24px/32px var(--bb-display); }

/* Prev / next */
.sud-bb .post-navigation__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	max-width: 1100px;
	margin-inline: auto;
	padding: 0;
	border: 0;
	list-style: none;
}

.sud-bb .post-navigation__item { margin: 0; padding: 0; border: 0; min-width: 0; }
.sud-bb .post-navigation__item--next { grid-column: 2; }

.sud-bb .post-navigation__link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 20px 24px;
	border: 1px solid var(--bb-line);
	border-radius: 16px;
	background: var(--bb-soft);
	text-align: left;
	text-decoration: none;
	transition: border-color .2s, transform .2s;
}

.sud-bb .post-navigation__link:hover { border-color: var(--bb-orange); transform: translateY(-2px); }
.sud-bb .post-navigation__label,
.sud-bb .post-navigation__title { text-align: inherit; }
.sud-bb .post-navigation__item--next .post-navigation__link { align-items: flex-end; text-align: right; }

.sud-bb .post-navigation__label {
	color: var(--bb-orange);
	font: 600 13px/16px var(--bb-display);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sud-bb .post-navigation__title {
	font: 600 18px/26px var(--bb-display);
	color: var(--bb-head);
}

/* Comments */
.sud-bb .comments { max-width: 1100px; margin-inline: auto; }

.sud-bb .comments__header {
	display: block;
	height: auto;
	min-height: 0;
	padding: 24px 28px;
	border: 1px solid var(--bb-line);
	border-radius: 16px;
	background: var(--bb-soft);
}

.sud-bb .comments__header-block { position: static; margin: 0; }
.sud-bb .comments__form { margin-top: 24px; }

@media (max-width: 767px) {
	.sud-bb .post-navigation__list { grid-template-columns: 1fr; gap: 12px; }
	.sud-bb .post-navigation__item--next { grid-column: auto; }
	.sud-bb .post-navigation__title { font-size: 16px; line-height: 22px; }
	.sud-bb .comments__header { padding: 20px; }
}

/* Footer */
.sud-bb .footer {
	border-radius: 0;
	background: #1f1813;
}

.sud-bb .footer__wordmark {
	--wm-gradient: linear-gradient(90deg, #ffffff, #ffd84d 55%, #ff5c2b) !important;
	font-family: var(--bb-display);
}

.sud-bb .footer__nav-title { font-family: var(--bb-display); color: var(--bb-yellow); }
.sud-bb .footer__nav-link:hover { color: #26201a; background: var(--bb-yellow); }
.sud-bb .footer__anchor { background: var(--bb-orange); }
.sud-bb .footer-credit a { color: var(--bb-yellow); text-underline-offset: 3px; }

/* Bottom tab bar, phones only */
.sud-bb .sbb-tabbar { display: none; }

/* ---------- Breakpoints ---------- */

@media (min-width: 1024px) {
	.sud-bb .post-layout { grid-template-columns: minmax(0, 668px) 340px; justify-content: space-between; }
	.sud-bb .post-sidebar { display: block; }
}

@media (max-width: 1023px) {
	.sud-bb .post-sidebar { display: none; }
}

@media (max-width: 900px) and (min-width: 768px) {
	.sud-bb .site-nav__list:not(.site-nav__list--mobile) .site-nav__link { padding-inline: 6px; font-size: 14px; }
}

@media (max-width: 767px) {
	.sud-bb { padding-bottom: 64px; }

	.sud-bb .header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto auto;
		grid-template-areas: "burger logo toggle srch";
		column-gap: 4px;
		min-height: 56px;
	}

	.sud-bb .site-nav--mobile { grid-area: burger; order: 0; }
	.sud-bb .site-nav__toggle--open { border: 0; padding: 8px 8px 8px 0; }
	.sud-bb .site-logo__text { font-size: 22px; max-width: none; }
	.sud-bb .site-nav:not(.site-nav--mobile),
	.sud-bb .sbb-searchbox { display: none; }
	.sud-bb .site-search { position: static; grid-area: srch; }
	.sud-bb .site-search__toggle--open { display: inline-grid; }
	.sud-bb .site-search__toggle--open svg { width: 24px; height: 24px; }

	.sud-bb .post-hero { padding-top: 20px; }
	.sud-bb .post-hero__title { margin-block-start: 14px; font-size: 28px; line-height: 36px; }
	.sud-bb .post-hero__excerpt p { font-size: 16px; line-height: 26px; }
	.sud-bb .sbb-byline { flex-direction: column; align-items: stretch; gap: 16px; }
	.sud-bb .post-hero__meta { font-size: 13px; }
	.sud-bb .post-hero__meta-text > .post-hero__meta-reviewer { display: none; }
	.sud-bb .sbb-share { justify-content: center; }
	.sud-bb .sbb-share__btn { width: 36px; height: 36px; }
	.sud-bb .sbb-hero-figure { margin-top: 16px; }
	.sud-bb .sbb-hero-figure img { border-radius: 12px; }

	.sud-bb .post-layout { margin-block-start: 24px; }
	.sud-bb .post-content { --flow-space: 20px; font-size: 16px; line-height: 24px; }
	.sud-bb .post-content :is(h2, h3, h4) { --flow-space: 32px; }
	.sud-bb .post-content :is(h2, h3, h4) + * { --flow-space: 16px; }
	.sud-bb .post-content h2 { font-size: 24px; line-height: 32px; }
	.sud-bb .post-content h3 { font-size: 18px; line-height: 26px; }
	.sud-bb .post-content :is(ol, ul) { padding-inline-start: 24px; }

	.sud-bb :is(.sbb-related-item, .sbb-rec-item) { gap: 14px; align-items: flex-start; }
	.sud-bb :is(.sbb-related-item, .sbb-rec-item) img { width: 112px; border-radius: 10px; }
	.sud-bb :is(.sbb-related-item-title, .sbb-rec-item-title) { font-size: 16px; line-height: 22px; }
	.sud-bb .sbb-meta { font-size: 12px; }
	.sud-bb .sbb-rec__title { font-size: 22px; line-height: 30px; }
	.sud-bb .sbb-rec-item { padding-block: 16px; }

	.sud-bb .sbb-tabbar {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 70;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		height: 64px;
		padding-bottom: env(safe-area-inset-bottom);
		border-top: 1px solid var(--bb-line);
		background: var(--bb-surface);
		box-shadow: 0 -6px 20px -12px rgba(38, 32, 26, .35);
	}

	.sud-bb .sbb-tabbar :is(a, button) {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		border: 0;
		background: none;
		color: var(--bb-muted);
		font: 500 11px/1 var(--bb-font);
		text-decoration: none;
		cursor: pointer;
	}

	.sud-bb .sbb-tabbar [aria-current] { color: var(--bb-link); font-weight: 700; }
	.sud-bb .sbb-tabbar [aria-current] svg { color: var(--bb-orange); }
}

/* Readability: buttons and callouts that still used the old blue palette */
html[data-theme=dark] .sud-bb .suh2-app__btn--primary { color: #26201a; }
.sud-bb .suh2-app__cta { background: radial-gradient(60% 80% at 50% 0%, rgba(255,216,77,.16), transparent 70%), linear-gradient(160deg, #1f1813, #2a211a); color: #e6dccf; }
.sud-bb .suh2-app__cta .suh2-app__btn--light { background: var(--bb-yellow); border-color: var(--bb-yellow); color: #26201a; }
.sud-bb .suh2-app__cta a:not(.suh2-app__btn) { color: #ffd84d; }
.sud-bb a.kb-button { background: var(--bb-yellow) !important; border-color: var(--bb-yellow) !important; color: #26201a !important; }
.sud-bb a.kb-button :is(.kt-btn-inner-text, svg) { color: inherit !important; }
.sud-bb :is(.is-style-callout-note, .sup-note) { border-color: var(--bb-yellow) !important; background: var(--bb-soft) !important; color: var(--bb-text) !important; }
.sud-bb :is(.is-style-callout-note, .sup-note) :is(p, li, strong) { color: inherit; }

/* Mobile menu: left drawer that matches the left hamburger */
.sud-bb .site-nav__overlay {
	padding: 0;
	background: rgba(20, 16, 12, .5);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	animation: sbbFade .2s ease-out;
}

.sud-bb .site-nav__panel {
	position: absolute;
	inset: 0 auto 0 0;
	width: min(84vw, 340px);
	height: 100%;
	margin: 0;
	padding: 10px 20px 24px;
	border: 0;
	border-right: 1px solid var(--bb-line);
	border-radius: 0 18px 18px 0;
	background: var(--bb-surface);
	box-shadow: 12px 0 40px rgba(0, 0, 0, .2);
	overflow-y: auto;
	overscroll-behavior: contain;
	animation: sbbDrawerIn .26s cubic-bezier(.22, 1, .36, 1);
}

.sud-bb .site-nav__toggle--close {
	margin: 0 -8px 8px auto;
	padding: 8px;
	border-radius: 999px;
	color: var(--bb-head);
}

.sud-bb .site-nav__toggle--close:hover { background: var(--bb-soft); }

.sud-bb .site-nav__item--mobile { transform: translateX(-12px); }
.sud-bb [data-visible=true] .site-nav__item--mobile { animation: sbbItemIn .24s ease-out forwards; }
.sud-bb [data-visible=true] .site-nav__item--mobile:nth-child(n) { animation-delay: calc(var(--i, 0) * 30ms + 40ms); }
.sud-bb .site-nav__item--mobile:nth-child(2) { --i: 1; }
.sud-bb .site-nav__item--mobile:nth-child(3) { --i: 2; }
.sud-bb .site-nav__item--mobile:nth-child(4) { --i: 3; }
.sud-bb .site-nav__item--mobile:nth-child(5) { --i: 4; }
.sud-bb .site-nav__item--mobile:nth-child(6) { --i: 5; }
.sud-bb .site-nav__item--mobile:nth-child(n+7) { --i: 6; }

.sud-bb .site-nav__link--mobile {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 0 12px;
	margin-inline: -12px;
	border-radius: 10px;
	font: 600 17px/1.3 var(--bb-font);
	text-align: left;
	text-transform: none;
	color: var(--bb-head);
	text-decoration: none;
	transition: background-color .15s, color .15s;
}

.sud-bb .site-nav__item--mobile + .site-nav__item--mobile { border-top: 1px solid var(--bb-line); }

.sud-bb .site-nav__link--mobile:hover,
.sud-bb .site-nav__link--mobile:focus-visible {
	background: var(--bb-soft);
	color: var(--bb-link);
}

.sud-bb .site-nav__link--mobile[aria-current] {
	background: var(--bb-soft);
	color: var(--bb-link);
}

.sud-bb:has(#nav-overlay[data-visible=true]) .sbb-tabbar { visibility: hidden; }

html[data-theme=dark] .sud-bb .site-nav__overlay { background: rgba(0, 0, 0, .6); }
html[data-theme=dark] .sud-bb .site-nav__panel { box-shadow: 12px 0 40px rgba(0, 0, 0, .5); }

@keyframes sbbFade { from { opacity: 0; } }
@keyframes sbbDrawerIn { from { transform: translateX(-100%); } }
@keyframes sbbItemIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.sud-bb .site-nav__overlay,
	.sud-bb .site-nav__panel { animation: none; }
	.sud-bb .site-nav__item--mobile { opacity: 1; transform: none; }
	.sud-bb [data-visible=true] .site-nav__item--mobile { animation: none; }
}