/* Panel deco tabs — the design's boundary motif: a half-width, 24px strip of a
   section's own surface color extends past its top or bottom edge into the
   neighboring section (Figma "Rectangle 10/11" strips, e.g. 15301:27853).

   Opt-in per instance from the layout via the section's classList — which
   boundaries participate and which side the tab sits on is a per-page design
   choice, not derivable from the palettes:

     flr-tab-tp-lt / flr-tab-tp-rt  — tab up into the previous section
     flr-tab-bt-lt / flr-tab-bt-rt  — tab down into the next section

   The tab paints var(--background), so it re-themes with the section's palette
   in every data-colors context. z-index lifts the section so downward tabs
   paint over the following sibling's surface. */

:is([data-colors], .flp-bg):is(.flr-tab-tp-lt, .flr-tab-tp-rt, .flr-tab-bt-lt, .flr-tab-bt-rt) {
	position: relative;
	z-index: 1;

	--flr-tab-h: 27; 
	--flr-tab-h-mbl: 10; 
	--flr-tab-h-clc: calc((var(--flr-tab-h-mbl) * 1px) + (var(--flr-tab-h) - var(--flr-tab-h-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */
	


	&:is(.flr-tab-tp-lt, .flr-tab-tp-rt)::before,
	&:is(.flr-tab-bt-lt, .flr-tab-bt-rt)::after {
		content: '';
		position: absolute;
		width: 50%;
		height: var(--flr-tab-h-clc);
		background-color: var(--background);
		pointer-events: none;
	}

	&::before {
		bottom: 100%;
	}

	&::after {
		top: 100%;
	}

	&.flr-tab-tp-lt::before,
	&.flr-tab-bt-lt::after {
		left: 0;
	}

	&.flr-tab-tp-rt::before,
	&.flr-tab-bt-rt::after {
		right: 0;
	}
}