/* Size Guide — .espt-block-size-guide
   vars: --max-width --table-min --table-radius --cell-pad --head-size --cell-size
         --title-color --sub-color --accent-color --head-bg --head-color --table-bg
         --cell-color --first-color --border-color --stripe-color --hover-color
         --highlight-color --note-color --btn-bg --btn-color
   classes: is-design-{striped|bordered|minimal|dark|modern|soft} is-direction-{rows|cols}
            is-mobile-mode-{scroll|stack} is-display-{inline|popup} is-tab-style-{pills|segment|underline}
            is-cell-align-{left|center} is-btn-style-{soft|solid|ghost|link} is-btn-align-* is-tab-align-*
            is-text-align-* is/no-first-col-bold is/no-row-hover is/no-sticky-first is/no-head-case
            is/no-mobile-collapse is/no-btn-full
   JS on .espt-sg: is-open (collapse) / .espt-sg-modal.is-open, tabs .is-active */

.espt-block-size-guide .espt-sg {
	--sg-line: var(--border-color, var(--bd-line));
	--sg-bg: var(--table-bg, var(--bd-box-bg));
	--sg-head-bg: var(--head-bg, #f6f8fa);
	--sg-head-fg: var(--head-color, var(--bd-ink));
	--sg-cell: var(--cell-color, var(--bd-body));
	--sg-first: var(--first-color, var(--bd-ink));
	--sg-stripe: var(--stripe-color, #f7f9fb);
	--sg-hover: var(--hover-color, rgba(15, 23, 42, 0.045));
	--sg-hl: var(--highlight-color, var(--bd-soft));
	--sg-accent: var(--accent-color, var(--bd-primary));
	--sg-pad: var(--cell-pad, 13px);
	--sg-radius: var(--table-radius, 14px);
	--sg-note: var(--note-color, var(--bd-muted));
	max-width: 100%;
	min-width: 0;
}

.espt-block-size-guide .espt-sg-card {
	margin-left: auto;
	margin-right: auto;
	max-width: var(--max-width, 720px);
	min-width: 0;
}

.espt-block-size-guide .espt-sg-body {
	min-width: 0;
}

/* --------------------------------------------------------- heading */

.espt-block-size-guide .espt-sg-head {
	margin-bottom: 14px;
	text-align: left;
}

.espt-block-size-guide.is-text-align-center .espt-sg-head { text-align: center; }
.espt-block-size-guide.is-text-align-right .espt-sg-head { text-align: right; }

.espt-block-size-guide .espt-sg-title {
	color: var(--title-color, var(--bd-ink));
	font-size: clamp(19px, 4.4vw, 26px);
	margin: 0 0 6px;
	overflow-wrap: anywhere;
}

.espt-block-size-guide .espt-sg-sub {
	color: var(--sub-color, var(--bd-muted));
	font-size: 14.5px;
	line-height: 1.6;
	margin: 0;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ tabs */

.espt-block-size-guide .espt-sg-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: flex-start;
	margin: 0 0 12px;
	min-width: 0;
}

.espt-block-size-guide.is-tab-align-center .espt-sg-tabs { justify-content: center; }
.espt-block-size-guide.is-tab-align-right .espt-sg-tabs { justify-content: flex-end; }

.espt-block-size-guide .espt-sg-tab {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--bd-muted);
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.2;
	max-width: 100%;
	overflow-wrap: anywhere;
	padding: 9px 15px;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.espt-block-size-guide .espt-sg-tab:focus-visible {
	outline: 2px solid var(--sg-accent);
	outline-offset: 2px;
}

/* pills (default) */
.espt-block-size-guide.is-tab-style-pills .espt-sg-tab {
	background: color-mix(in srgb, var(--bd-line) 45%, transparent);
	border-color: transparent;
}

.espt-block-size-guide.is-tab-style-pills .espt-sg-tab:hover {
	color: var(--bd-ink);
}

.espt-block-size-guide.is-tab-style-pills .espt-sg-tab.is-active {
	background: var(--sg-accent);
	box-shadow: 0 6px 16px -8px var(--sg-accent);
	color: #fff;
}

/* segmented control */
.espt-block-size-guide.is-tab-style-segment .espt-sg-tabs {
	background: color-mix(in srgb, var(--bd-line) 40%, transparent);
	border-radius: 999px;
	flex-wrap: nowrap;
	gap: 2px;
	max-width: 100%;
	overflow-x: auto;
	padding: 4px;
	scrollbar-width: none;
	width: fit-content;
}

.espt-block-size-guide.is-tab-style-segment .espt-sg-tabs::-webkit-scrollbar { display: none; }

.espt-block-size-guide.is-tab-style-segment .espt-sg-tab {
	flex: 0 0 auto;
	white-space: nowrap;
}

.espt-block-size-guide.is-tab-style-segment .espt-sg-tab.is-active {
	background: var(--bd-box-bg);
	box-shadow: 0 2px 6px -2px rgba(15, 23, 42, 0.28);
	color: var(--bd-ink);
}

.espt-block-size-guide.is-tab-style-segment.is-tab-align-center .espt-sg-tabs { margin-left: auto; margin-right: auto; }
.espt-block-size-guide.is-tab-style-segment.is-tab-align-right .espt-sg-tabs { margin-left: auto; }

/* underline */
.espt-block-size-guide.is-tab-style-underline .espt-sg-tabs {
	border-bottom: 1px solid var(--sg-line);
	gap: 2px;
	padding-bottom: 0;
}

.espt-block-size-guide.is-tab-style-underline .espt-sg-tab {
	border-radius: 0;
	box-shadow: inset 0 -2px 0 transparent;
	padding: 10px 12px;
}

.espt-block-size-guide.is-tab-style-underline .espt-sg-tab.is-active {
	box-shadow: inset 0 -2px 0 var(--sg-accent);
	color: var(--sg-accent);
}

/* ----------------------------------------------------------- panes */

.espt-block-size-guide .espt-sg-pane {
	animation: espt-sg-fade 0.28s ease;
	min-width: 0;
}

.espt-block-size-guide .espt-sg-pane:not(.is-active) {
	display: none;
}

@keyframes espt-sg-fade {
	from { opacity: 0; transform: translateY(4px); }
	to { opacity: 1; transform: none; }
}

/* ------------------------------------------------- the table frame */

.espt-block-size-guide .espt-sg-frame {
	-webkit-overflow-scrolling: touch;
	background: var(--sg-bg);
	border: 1px solid var(--sg-line);
	border-radius: var(--sg-radius);
	max-width: 100%;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: thin;
}

.espt-block-size-guide .espt-sg-frame:focus-visible {
	outline: 2px solid var(--sg-accent);
	outline-offset: 2px;
}

.espt-block-size-guide .espt-sg-frame::-webkit-scrollbar { height: 6px; }
.espt-block-size-guide .espt-sg-frame::-webkit-scrollbar-thumb {
	background: color-mix(in srgb, var(--bd-muted) 40%, transparent);
	border-radius: 999px;
}

.espt-block-size-guide .espt-sg-table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: var(--cell-size, 14px);
	margin: 0;
	width: 100%;
}

.espt-block-size-guide .espt-sg-table th,
.espt-block-size-guide .espt-sg-table td {
	border: 0;
	padding: var(--sg-pad) calc(var(--sg-pad) * 1.2);
	text-align: left;
	vertical-align: middle;
	white-space: nowrap;
}

.espt-block-size-guide.is-cell-align-center .espt-sg-table th,
.espt-block-size-guide.is-cell-align-center .espt-sg-table td {
	text-align: center;
}

.espt-block-size-guide .espt-sg-table thead th {
	background: var(--sg-head-bg);
	color: var(--sg-head-fg);
	font-size: var(--head-size, 13px);
	font-weight: 800;
	letter-spacing: 0.01em;
}

.espt-block-size-guide.is-head-case .espt-sg-table thead th {
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.espt-block-size-guide .espt-sg-table tbody th,
.espt-block-size-guide .espt-sg-table tbody td {
	background: transparent;
	color: var(--sg-cell);
	font-weight: 500;
}

.espt-block-size-guide.is-first-col-bold .espt-sg-table tbody tr > *:first-child {
	color: var(--sg-first);
	font-weight: 800;
}

/* hover + highlight */
.espt-block-size-guide.is-row-hover .espt-sg-table tbody tr {
	transition: background 0.18s ease;
}

.espt-block-size-guide.is-row-hover .espt-sg-table tbody tr:hover {
	background: var(--sg-hover);
}

.espt-block-size-guide .espt-sg-table tbody tr.is-highlight {
	background: var(--sg-hl);
}

.espt-block-size-guide .espt-sg-table tbody tr.is-highlight > *:first-child {
	box-shadow: inset 3px 0 0 var(--sg-accent);
}

/* transposed layout: the recommended size is a whole column — outline it so
   the header and its values read as one block. */
.espt-block-size-guide .espt-sg-table .is-hl {
	background: var(--sg-hl);
}

.espt-block-size-guide .espt-sg-table thead th.is-hl {
	box-shadow: inset 0 3px 0 var(--sg-accent);
}

.espt-block-size-guide.is-direction-cols .espt-sg-table .is-hl {
	box-shadow: inset 1px 0 0 var(--sg-accent), inset -1px 0 0 var(--sg-accent);
}

.espt-block-size-guide.is-direction-cols .espt-sg-table thead th.is-hl {
	box-shadow: inset 1px 0 0 var(--sg-accent), inset -1px 0 0 var(--sg-accent), inset 0 3px 0 var(--sg-accent);
}

.espt-block-size-guide.is-direction-cols .espt-sg-table tbody tr:last-child .is-hl {
	box-shadow: inset 1px 0 0 var(--sg-accent), inset -1px 0 0 var(--sg-accent), inset 0 -3px 0 var(--sg-accent);
}

/* --------------------------------------------------------- designs */

/* 1 — striped */
.espt-block-size-guide.is-design-striped .espt-sg-table thead th {
	border-bottom: 1px solid var(--sg-line);
}

.espt-block-size-guide.is-design-striped .espt-sg-table tbody tr:nth-child(even) {
	background: var(--sg-stripe);
}

.espt-block-size-guide.is-design-striped .espt-sg-table tbody tr:nth-child(even).is-highlight {
	background: var(--sg-hl);
}

.espt-block-size-guide.is-design-striped .espt-sg-table tbody tr + tr > * {
	border-top: 1px solid color-mix(in srgb, var(--sg-line) 65%, transparent);
}

/* 2 — full grid */
.espt-block-size-guide.is-design-bordered .espt-sg-table th,
.espt-block-size-guide.is-design-bordered .espt-sg-table td {
	border: 1px solid var(--sg-line);
}

.espt-block-size-guide.is-design-bordered .espt-sg-table thead th {
	background: var(--head-bg, #f1f3f6);
}

/* 3 — minimal lines */
.espt-block-size-guide.is-design-minimal .espt-sg-frame {
	background: transparent;
	border-color: transparent;
	border-radius: 0;
}

.espt-block-size-guide.is-design-minimal .espt-sg-table thead th {
	background: var(--head-bg, transparent);
	border-bottom: 2px solid var(--border-color, var(--bd-ink));
}

.espt-block-size-guide.is-design-minimal .espt-sg-table tbody tr > * {
	border-bottom: 1px solid var(--sg-line);
}

.espt-block-size-guide.is-design-minimal .espt-sg-table tbody tr:last-child > * {
	border-bottom: 0;
}

/* 4 — dark */
.espt-block-size-guide.is-design-dark .espt-sg {
	--sg-bg: var(--table-bg, #111827);
	--sg-line: var(--border-color, #1f2937);
	--sg-head-bg: var(--head-bg, #0b1220);
	--sg-head-fg: var(--head-color, #e5e7eb);
	--sg-cell: var(--cell-color, #cbd5e1);
	--sg-first: var(--first-color, #ffffff);
	--sg-stripe: var(--stripe-color, rgba(255, 255, 255, 0.03));
	--sg-hover: var(--hover-color, rgba(255, 255, 255, 0.06));
	--sg-hl: var(--highlight-color, rgba(255, 255, 255, 0.09));
	--sg-accent: var(--accent-color, var(--bd-accent));
}

.espt-block-size-guide.is-design-dark .espt-sg-table thead th {
	border-bottom: 1px solid var(--sg-line);
}

.espt-block-size-guide.is-design-dark .espt-sg-table tbody tr + tr > * {
	border-top: 1px solid var(--sg-line);
}

/* 5 — modern (coloured header, soft shadow) */
.espt-block-size-guide.is-design-modern .espt-sg {
	--sg-head-bg: var(--head-bg, var(--bd-primary));
	--sg-head-fg: var(--head-color, #ffffff);
	--sg-stripe: var(--stripe-color, color-mix(in srgb, var(--bd-primary) 6%, transparent));
}

.espt-block-size-guide.is-design-modern .espt-sg-frame {
	border-color: transparent;
	border-radius: calc(var(--sg-radius) + 2px);
	box-shadow: 0 14px 38px -18px rgba(15, 23, 42, 0.45);
}

.espt-block-size-guide.is-design-modern .espt-sg-table thead th {
	font-size: calc(var(--head-size, 13px) - 0.5px);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.espt-block-size-guide.is-design-modern .espt-sg-table tbody tr:nth-child(even) {
	background: var(--sg-stripe);
}

.espt-block-size-guide.is-design-modern .espt-sg-table tbody tr:nth-child(even).is-highlight {
	background: var(--sg-hl);
}

.espt-block-size-guide.is-design-modern .espt-sg-table tbody tr + tr > * {
	border-top: 1px solid color-mix(in srgb, var(--sg-line) 55%, transparent);
}

/* 6 — soft separated rows */
.espt-block-size-guide.is-design-soft .espt-sg-frame {
	background: transparent;
	border-color: transparent;
	padding: 2px;
}

.espt-block-size-guide.is-design-soft .espt-sg-table {
	border-collapse: separate;
	border-spacing: 0 7px;
}

.espt-block-size-guide.is-design-soft .espt-sg-table thead th {
	background: var(--head-bg, transparent);
	color: var(--head-color, var(--bd-muted));
	padding-bottom: 2px;
	padding-top: 2px;
}

.espt-block-size-guide.is-design-soft .espt-sg-table tbody tr > * {
	background: var(--table-bg, var(--bd-soft));
}

.espt-block-size-guide.is-design-soft .espt-sg-table tbody tr > *:first-child {
	border-bottom-left-radius: 12px;
	border-top-left-radius: 12px;
}

.espt-block-size-guide.is-design-soft .espt-sg-table tbody tr > *:last-child {
	border-bottom-right-radius: 12px;
	border-top-right-radius: 12px;
}

.espt-block-size-guide.is-design-soft .espt-sg-table tbody tr.is-highlight > * {
	background: var(--sg-hl);
}

.espt-block-size-guide.is-design-soft.is-row-hover .espt-sg-table tbody tr:hover > * {
	background: var(--sg-hover);
}

/* ------------------------------ row background bookkeeping (sticky) */

/* The frozen first column has to be opaque or the cells scrolling under it
   show through — so it repaints whatever the row's own background is. Every
   design keeps that colour in --sg-row-bg; only the sticky rules read it. */
.espt-block-size-guide .espt-sg-table tbody tr {
	--sg-row-bg: var(--sg-bg);
}

.espt-block-size-guide.is-design-striped .espt-sg-table tbody tr:nth-child(even),
.espt-block-size-guide.is-design-modern .espt-sg-table tbody tr:nth-child(even) {
	--sg-row-bg: var(--sg-stripe);
}

.espt-block-size-guide.is-design-soft .espt-sg-table tbody tr {
	--sg-row-bg: var(--table-bg, var(--bd-soft));
}

.espt-block-size-guide .espt-sg-table tbody tr.is-highlight,
.espt-block-size-guide.is-design-striped .espt-sg-table tbody tr:nth-child(even).is-highlight,
.espt-block-size-guide.is-design-modern .espt-sg-table tbody tr:nth-child(even).is-highlight,
.espt-block-size-guide.is-design-soft .espt-sg-table tbody tr.is-highlight {
	--sg-row-bg: var(--sg-hl);
}

.espt-block-size-guide.is-row-hover .espt-sg-table tbody tr:hover,
.espt-block-size-guide.is-row-hover .espt-sg-table tbody tr.is-highlight:hover {
	--sg-row-bg: var(--sg-hover);
}

/* -------------------------------------------------- notes & footer */

.espt-block-size-guide .espt-sg-note,
.espt-block-size-guide .espt-sg-foot {
	color: var(--sg-note);
	font-size: 13px;
	line-height: 1.6;
	margin: 10px 0 0;
	overflow-wrap: anywhere;
}

.espt-block-size-guide .espt-sg-foot {
	border-top: 1px dashed var(--sg-line);
	margin-top: 14px;
	padding-top: 12px;
}

/* ------------------------------ mobile: stacked cards (base state) */

.espt-block-size-guide.is-mobile-mode-scroll .espt-sg-table {
	min-width: var(--table-min, 460px);
}

.espt-block-size-guide.is-mobile-mode-stack .espt-sg-frame {
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	padding: 0;
}

.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table {
	border-collapse: collapse;
	border-spacing: 0;
	display: block;
	min-width: 0;
	width: 100%;
}

.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table thead {
	display: none;
}

.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody,
.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tr {
	display: block;
	width: 100%;
}

.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tr {
	background: var(--sg-bg);
	border: 1px solid var(--sg-line);
	border-radius: 12px;
	margin-bottom: 10px;
	overflow: hidden;
}

.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tr:last-child {
	margin-bottom: 0;
}

.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody th,
.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody td {
	align-items: center;
	border: 0;
	border-radius: 0;
	border-top: 1px solid color-mix(in srgb, var(--sg-line) 70%, transparent);
	display: flex;
	gap: 12px;
	justify-content: space-between;
	min-width: 0;
	overflow-wrap: anywhere;
	padding: 10px 14px;
	text-align: right;
	white-space: normal;
	width: 100%;
}

.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody tr > *:first-child {
	background: var(--sg-head-bg);
	border-top: 0;
	color: var(--sg-head-fg);
	font-size: calc(var(--cell-size, 14px) + 1px);
	font-weight: 800;
	justify-content: flex-start;
	text-align: left;
}

.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody th::before,
.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody td::before {
	color: var(--sg-note);
	content: attr(data-label);
	flex: 1 1 auto;
	font-size: calc(var(--cell-size, 14px) - 1px);
	font-weight: 700;
	min-width: 0;
	overflow-wrap: anywhere;
	text-align: left;
}

.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody tr > *:first-child::before {
	display: none;
}

.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody tr.is-highlight {
	border-color: var(--sg-accent);
	box-shadow: 0 0 0 1px var(--sg-accent);
}

.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody tr.is-highlight > *:first-child {
	background: var(--sg-hl);
	box-shadow: inset 3px 0 0 var(--sg-accent);
	color: var(--sg-first);
}

.espt-block-size-guide.is-design-modern.is-mobile-mode-stack .espt-sg-table tbody tr > *:first-child,
.espt-block-size-guide.is-design-dark.is-mobile-mode-stack .espt-sg-table tbody tr > *:first-child {
	color: var(--sg-head-fg);
}

/* stacked cards have no columns left to outline — mark the value instead */
.espt-block-size-guide.is-direction-cols.is-mobile-mode-stack .espt-sg-table tbody .is-hl,
.espt-block-size-guide.is-direction-cols.is-mobile-mode-stack .espt-sg-table tbody tr:last-child .is-hl {
	box-shadow: inset 3px 0 0 var(--sg-accent);
}

.espt-block-size-guide.is-design-soft.is-mobile-mode-stack .espt-sg-table tbody tr > * {
	background: transparent;
}

.espt-block-size-guide.is-design-soft.is-mobile-mode-stack .espt-sg-table tbody tr > *:first-child {
	background: var(--sg-head-bg);
}

/* freeze the first column while swiping (never in stacked mode) */
.espt-block-size-guide.is-sticky-first.is-mobile-mode-scroll .espt-sg-table thead th:first-child,
.espt-block-size-guide.is-sticky-first.is-mobile-mode-scroll .espt-sg-table tbody tr > *:first-child {
	left: 0;
	position: sticky;
	z-index: 1;
}

.espt-block-size-guide.is-sticky-first.is-mobile-mode-scroll .espt-sg-table thead th:first-child {
	background: var(--sg-head-bg);
	z-index: 2;
}

.espt-block-size-guide.is-sticky-first.is-mobile-mode-scroll .espt-sg-table tbody tr > *:first-child {
	background: var(--sg-row-bg, var(--sg-bg));
}

/* --------------------------------------- collapse-on-mobile button */

.espt-block-size-guide .espt-sg-collapse {
	align-items: center;
	background: color-mix(in srgb, var(--bd-line) 35%, transparent);
	border: 1px solid var(--sg-line);
	border-radius: 12px;
	color: var(--bd-ink);
	cursor: pointer;
	display: none;
	font-size: 15px;
	font-weight: 700;
	gap: 12px;
	justify-content: space-between;
	padding: 12px 15px;
	text-align: left;
	width: 100%;
}

.espt-block-size-guide.is-display-inline.is-mobile-collapse .espt-sg-collapse {
	display: flex;
}

.espt-block-size-guide .espt-sg-caret {
	display: inline-flex;
	flex: 0 0 auto;
	transition: transform 0.25s ease;
}

.espt-block-size-guide .espt-sg.is-open .espt-sg-caret {
	transform: rotate(180deg);
}

.espt-block-size-guide.is-display-inline.is-mobile-collapse .espt-sg-body {
	display: none;
	margin-top: 12px;
}

.espt-block-size-guide.is-display-inline.is-mobile-collapse .espt-sg.is-open .espt-sg-body {
	display: block;
}

/* --------------------------------------------- popup trigger + modal */

.espt-block-size-guide .espt-sg-actions {
	display: flex;
	justify-content: flex-start;
}

.espt-block-size-guide.is-btn-align-center .espt-sg-actions { justify-content: center; }
.espt-block-size-guide.is-btn-align-right .espt-sg-actions { justify-content: flex-end; }

.espt-block-size-guide .espt-sg-trigger {
	align-items: center;
	background: var(--btn-bg, color-mix(in srgb, var(--bd-line) 40%, transparent));
	border: 1px solid var(--sg-line);
	border-radius: 12px;
	color: var(--btn-color, var(--bd-ink));
	cursor: pointer;
	display: inline-flex;
	font-size: 14.5px;
	font-weight: 800;
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	max-width: 100%;
	padding: 12px 20px;
	transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.espt-block-size-guide .espt-sg-trigger:hover {
	filter: brightness(0.97);
	transform: translateY(-1px);
}

.espt-block-size-guide .espt-sg-trigger:focus-visible {
	outline: 2px solid var(--sg-accent);
	outline-offset: 2px;
}

.espt-block-size-guide .espt-sg-tico svg {
	height: 1.15em;
	width: 1.15em;
}

.espt-block-size-guide.is-btn-style-solid .espt-sg-trigger {
	background: var(--btn-bg, var(--sg-accent));
	border-color: transparent;
	box-shadow: 0 10px 24px -14px var(--sg-accent);
	color: var(--btn-color, #fff);
}

.espt-block-size-guide.is-btn-style-ghost .espt-sg-trigger {
	background: var(--btn-bg, transparent);
	border: 2px solid var(--sg-accent);
	color: var(--btn-color, var(--sg-accent));
}

.espt-block-size-guide.is-btn-style-link .espt-sg-trigger {
	background: var(--btn-bg, transparent);
	border-color: transparent;
	border-radius: var(--espt-btn-radius, 4px);
	color: var(--btn-color, var(--sg-accent));
	padding: 4px 2px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.espt-block-size-guide.is-btn-full .espt-sg-trigger {
	width: 100%;
}

.espt-block-size-guide.is-btn-full.is-btn-style-link .espt-sg-trigger {
	width: auto;
}

.espt-block-size-guide .espt-sg-modal {
	align-items: flex-end;
	display: flex;
	inset: 0;
	justify-content: center;
	opacity: 0;
	padding: 0;
	position: fixed;
	transition: opacity 0.25s ease;
	z-index: 99999;
}

.espt-block-size-guide .espt-sg-modal[hidden] {
	display: none;
}

.espt-block-size-guide .espt-sg-modal.is-open {
	opacity: 1;
}

.espt-block-size-guide .espt-sg-backdrop {
	background: rgba(8, 10, 14, 0.62);
	inset: 0;
	position: absolute;
}

.espt-block-size-guide .espt-sg-panel {
	background: var(--bd-box-bg);
	border-radius: var(--bd-radius, 18px) var(--bd-radius, 18px) 0 0;
	box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.35);
	color: var(--bd-body);
	max-height: 90vh;
	max-height: 90dvh;
	min-width: 0;
	overflow-y: auto;
	padding: 22px 16px 20px;
	position: relative;
	transform: translateY(24px);
	transition: transform 0.28s ease;
	width: 100%;
	z-index: 1;
}

.espt-block-size-guide .espt-sg-modal.is-open .espt-sg-panel {
	transform: none;
}

.espt-block-size-guide .espt-sg-close {
	align-items: center;
	background: color-mix(in srgb, var(--bd-ink) 8%, transparent);
	border: 0;
	border-radius: 50%;
	color: var(--bd-ink);
	cursor: pointer;
	display: inline-flex;
	height: 34px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: 12px;
	top: 12px;
	width: 34px;
	z-index: 2;
}

.espt-block-size-guide .espt-sg-close:hover {
	background: color-mix(in srgb, var(--bd-ink) 15%, transparent);
}

.espt-block-size-guide .espt-sg-panel .espt-sg-head {
	padding-right: 40px;
}

/* ------------------------------------------------ tablet & desktop */

@media (min-width: 768px) {
	.espt-block-size-guide .espt-sg-head {
		margin-bottom: 18px;
	}

	.espt-block-size-guide .espt-sg-tabs {
		gap: 8px;
		margin-bottom: 14px;
	}

	.espt-block-size-guide .espt-sg-tab {
		font-size: 14.5px;
		padding: 10px 18px;
	}

	.espt-block-size-guide .espt-sg-note,
	.espt-block-size-guide .espt-sg-foot {
		font-size: 13.5px;
	}

	/* the stacked view is a phone-only treatment — back to a real table */
	.espt-block-size-guide.is-mobile-mode-stack .espt-sg-frame {
		background: var(--sg-bg);
		border: 1px solid var(--sg-line);
		border-radius: var(--sg-radius);
		overflow-x: auto;
	}

	.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table {
		display: table;
	}

	.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table thead {
		display: table-header-group;
	}

	.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody {
		display: table-row-group;
	}

	.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tr {
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		display: table-row;
		margin: 0;
		overflow: visible;
	}

	.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody th,
	.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody td {
		display: table-cell;
		padding: var(--sg-pad) calc(var(--sg-pad) * 1.2);
		text-align: left;
		white-space: nowrap;
		width: auto;
	}

	.espt-block-size-guide.is-mobile-mode-stack.is-cell-align-center .espt-sg-table tbody th,
	.espt-block-size-guide.is-mobile-mode-stack.is-cell-align-center .espt-sg-table tbody td {
		text-align: center;
	}

	.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody th::before,
	.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody td::before {
		content: none;
	}

	.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody tr > *:first-child {
		background: transparent;
		color: var(--sg-cell);
		font-size: var(--cell-size, 15px);
	}

	.espt-block-size-guide.is-mobile-mode-stack.is-first-col-bold .espt-sg-table tbody tr > *:first-child {
		color: var(--sg-first);
		font-weight: 800;
	}

	/* the stacked card paints its first cell like a header row — on wide
	   screens it is an ordinary cell again, so undo the header text colour
	   (white on modern) that would otherwise disappear into the table. */
	.espt-block-size-guide.is-design-modern.is-mobile-mode-stack .espt-sg-table tbody tr > *:first-child,
	.espt-block-size-guide.is-design-dark.is-mobile-mode-stack .espt-sg-table tbody tr > *:first-child {
		color: var(--sg-cell);
	}

	.espt-block-size-guide.is-design-modern.is-mobile-mode-stack.is-first-col-bold .espt-sg-table tbody tr > *:first-child,
	.espt-block-size-guide.is-design-dark.is-mobile-mode-stack.is-first-col-bold .espt-sg-table tbody tr > *:first-child {
		color: var(--sg-first);
	}

	/* real columns are back: outline the recommended one again instead of
	   bar-marking every stacked value. */
	.espt-block-size-guide.is-direction-cols.is-mobile-mode-stack .espt-sg-table tbody .is-hl {
		box-shadow: inset 1px 0 0 var(--sg-accent), inset -1px 0 0 var(--sg-accent);
	}

	.espt-block-size-guide.is-direction-cols.is-mobile-mode-stack .espt-sg-table tbody tr:last-child .is-hl {
		box-shadow: inset 1px 0 0 var(--sg-accent), inset -1px 0 0 var(--sg-accent), inset 0 -3px 0 var(--sg-accent);
	}

	.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody tr.is-highlight {
		background: var(--sg-hl);
	}

	.espt-block-size-guide.is-mobile-mode-stack .espt-sg-table tbody tr.is-highlight > *:first-child {
		background: transparent;
		box-shadow: inset 3px 0 0 var(--sg-accent);
	}

	.espt-block-size-guide.is-design-soft.is-mobile-mode-stack .espt-sg-frame {
		background: transparent;
		border-color: transparent;
	}

	.espt-block-size-guide.is-design-soft.is-mobile-mode-stack .espt-sg-table tbody tr > * {
		background: var(--table-bg, var(--bd-soft));
	}

	.espt-block-size-guide.is-design-soft.is-mobile-mode-stack .espt-sg-table tbody tr.is-highlight > * {
		background: var(--sg-hl);
	}

	/* …and its first cell is a soft row cell again, not a grey card header
	   (kept before the sticky rules so a frozen column still repaints). */
	.espt-block-size-guide.is-design-soft.is-mobile-mode-stack .espt-sg-table tbody tr > *:first-child {
		background: var(--table-bg, var(--bd-soft));
	}

	.espt-block-size-guide.is-design-soft.is-mobile-mode-stack .espt-sg-table tbody tr.is-highlight > *:first-child {
		background: var(--sg-hl);
	}

	.espt-block-size-guide.is-design-minimal.is-mobile-mode-stack .espt-sg-frame {
		background: transparent;
		border-color: transparent;
	}

	/* sticky first column on wide tables too */
	.espt-block-size-guide.is-sticky-first .espt-sg-table thead th:first-child,
	.espt-block-size-guide.is-sticky-first .espt-sg-table tbody tr > *:first-child {
		left: 0;
		position: sticky;
		z-index: 1;
	}

	.espt-block-size-guide.is-sticky-first .espt-sg-table thead th:first-child {
		background: var(--sg-head-bg);
		z-index: 2;
	}

	.espt-block-size-guide.is-sticky-first .espt-sg-table tbody tr > *:first-child {
		background: var(--sg-row-bg, var(--sg-bg));
	}

	/* the stacked-mode resets above are more specific — restate for them */
	.espt-block-size-guide.is-sticky-first .espt-sg-table tbody tr.is-highlight > *:first-child,
	.espt-block-size-guide.is-design-soft.is-sticky-first .espt-sg-table tbody tr > *:first-child,
	.espt-block-size-guide.is-design-soft.is-sticky-first .espt-sg-table tbody tr.is-highlight > *:first-child {
		background: var(--sg-row-bg, var(--sg-bg));
	}

	.espt-block-size-guide.is-design-soft.is-mobile-mode-stack .espt-sg-table {
		border-collapse: separate;
		border-spacing: 0 7px;
	}

	/* collapse is a phone treatment only */
	.espt-block-size-guide.is-display-inline.is-mobile-collapse .espt-sg-collapse {
		display: none;
	}

	.espt-block-size-guide.is-display-inline.is-mobile-collapse .espt-sg-body {
		display: block;
		margin-top: 0;
	}

	/* centred dialog instead of a bottom sheet */
	.espt-block-size-guide .espt-sg-modal {
		align-items: center;
		padding: 24px 16px;
	}

	.espt-block-size-guide .espt-sg-panel {
		border-radius: var(--bd-radius, 18px);
		box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
		max-height: 88vh;
		padding: 28px 24px 24px;
		transform: translateY(12px) scale(0.985);
		width: min(var(--max-width, 720px), 96vw);
	}

	.espt-block-size-guide .espt-sg-trigger {
		font-size: 15px;
	}

	.espt-block-size-guide.is-btn-full .espt-sg-trigger {
		width: auto;
	}
}

@media (min-width: 1024px) {
	.espt-block-size-guide .espt-sg-tab {
		font-size: 15px;
	}
}

/* --------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
	.espt-block-size-guide .espt-sg-pane,
	.espt-block-size-guide .espt-sg-tab,
	.espt-block-size-guide .espt-sg-trigger,
	.espt-block-size-guide .espt-sg-caret,
	.espt-block-size-guide .espt-sg-modal,
	.espt-block-size-guide .espt-sg-panel,
	.espt-block-size-guide .espt-sg-table tbody tr {
		animation: none;
		transition: none;
	}

	.espt-block-size-guide .espt-sg-panel {
		transform: none;
	}
}