/* =============================================================================
   Stack Tabs — Frontend Styles
   ============================================================================= */

/* Custom properties are scoped to the widget wrapper, never :root, so they
   cannot collide with other WPStack widgets or with the theme. */
.stkt-wrap {
	--stk-primary:    #0e0e0e;
	--stk-secondary:  #444444;
	--stk-accent:     #4f46e5;
	--stk-accent-rgb: 79, 70, 229;
	--stk-muted:      #888888;
	--stk-border:     #e0e0e0;
	--stk-white:      #ffffff;
	--stk-shadow:     rgba(0, 0, 0, 0.08);
	--stk-elev:       0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.12);
	--stkt-indicator: #4f46e5;
	--stkt-indicator-size: 3px;
}

/* ── Base Layout ──────────────────────────────────────────────────────────── */

.stkt-wrap {
	display: flex;
	flex-direction: column;
}

/* The tablist scrolls horizontally rather than wrapping. A wrapped bar breaks
   every active-tab indicator that assumes a single row, and reads as broken
   the moment a buyer adds a fifth tab. */
.stkt-tablist {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	position: relative;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}
.stkt-tablist::-webkit-scrollbar {
	display: none;
}
.stkt-tablist > .stkt-tab {
	scroll-snap-align: start;
	flex: 0 0 auto;
}

.stkt-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--stk-secondary);
	background: transparent;
	border: none;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
	position: relative;
	white-space: nowrap;
	outline: none;
	text-align: left;
}
.stkt-tab:focus-visible {
	outline: 2px solid var(--stkt-indicator);
	outline-offset: 2px;
	border-radius: 4px;
}

.stkt-tab-icon {
	display: inline-flex;
	align-items: center;
}
.stkt-tab-icon i,
.stkt-tab-icon svg {
	font-size: 18px;
	width: 18px;
	height: auto;
	fill: currentColor;
	transition: color 0.2s ease, fill 0.2s ease;
}

.stkt-tab-inner {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.stkt-tab-label {
	display: block;
	line-height: 1.2;
}

/* The description is only legible in layouts that give the tab room for two
   lines. Those layouts opt back in; everywhere else it stays out of the way
   rather than crushing the label. */
.stkt-tab-desc {
	display: none;
	font-size: 12px;
	font-weight: 400;
	opacity: 0.7;
	line-height: 1.3;
}
.stkt-mega .stkt-tab-desc {
	display: block;
}

/* ── Mobile accordion headers ─────────────────────────────────────────────── */

.stkt-acc-header {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 0;
	min-height: 44px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	text-align: left;
	color: var(--stk-primary);
	background: none;
	border: none;
	border-bottom: 1px solid var(--stk-border);
	cursor: pointer;
}
.stkt-acc-header.stkt-active {
	color: var(--stkt-indicator);
}
.stkt-acc-chevron {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 0.25s ease;
}
.stkt-acc-header.stkt-active .stkt-acc-chevron {
	transform: rotate(225deg) translate(-2px, -2px);
}

.stkt-tab-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	background-color: var(--stkt-indicator);
	color: var(--stk-white);
	border-radius: 100px;
}

.stkt-tab-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 12px;
	font-weight: 700;
	border-radius: 50%;
	flex-shrink: 0;
	/* Carried over from the duplicate base block that used to sit lower in this
	   file; these three were the only declarations unique to that copy. */
	background: rgba(0,0,0,.06);
	color: var(--stk-primary);
	margin-right: 8px;
}

/* ── Panels ───────────────────────────────────────────────────────────────── */

.stkt-panels {
	flex: 1 1 auto;
	position: relative;
}

.stkt-panel {
	display: none;
	padding: 24px 0;
	animation: stkt-fade 0.25s ease;
}
.stkt-panel.stkt-active {
	display: block;
}

@keyframes stkt-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================================
   STYLE 1 — Classic Horizontal
   ============================================================================= */

.stkt-classic .stkt-tablist {
	border-bottom: 2px solid var(--stk-border);
}
.stkt-classic .stkt-tab {
	padding: 10px 20px;
	border-bottom: var(--stkt-indicator-size) solid transparent;
	margin-bottom: -2px;
}
.stkt-classic .stkt-tab:hover {
	color: var(--stkt-indicator);
}
.stkt-classic .stkt-tab.stkt-active {
	color: var(--stkt-indicator);
	border-bottom-color: var(--stkt-indicator);
}

/* =============================================================================
   STYLE 2 — Tabs at Bottom
   ============================================================================= */

.stkt-bottom {
	flex-direction: column-reverse;
}
.stkt-bottom .stkt-tablist {
	border-top: 2px solid var(--stk-border);
	border-bottom: none;
}
.stkt-bottom .stkt-tab {
	border-bottom: none;
	border-top: var(--stkt-indicator-size) solid transparent;
	margin-top: -2px;
}
.stkt-bottom .stkt-tab.stkt-active {
	color: var(--stkt-indicator);
	border-top-color: var(--stkt-indicator);
}
.stkt-bottom .stkt-panel {
	padding: 0 0 24px;
}

/* =============================================================================
   STYLE 3 — Vertical Left
   ============================================================================= */

.stkt-vert-left {
	flex-direction: row;
	align-items: flex-start;
	gap: 0;
}
.stkt-vert-left .stkt-tablist {
	flex-direction: column;
	min-width: 180px;
	flex-shrink: 0;
	border-right: 2px solid var(--stk-border);
	border-bottom: none;
}
.stkt-vert-left .stkt-tab {
	width: 100%;
	text-align: left;
	justify-content: flex-start;
	border-right: var(--stkt-indicator-size) solid transparent;
	border-bottom: none;
	margin-right: -2px;
	padding: 12px 20px;
}
.stkt-vert-left .stkt-tab.stkt-active {
	color: var(--stkt-indicator);
	border-right-color: var(--stkt-indicator);
}
.stkt-vert-left .stkt-panels {
	padding-left: 28px;
}
.stkt-vert-left .stkt-panel {
	padding-top: 0;
}

/* =============================================================================
   STYLE 4 — Vertical Right
   ============================================================================= */

.stkt-vert-right {
	flex-direction: row-reverse;
	align-items: flex-start;
}
.stkt-vert-right .stkt-tablist {
	flex-direction: column;
	min-width: 180px;
	flex-shrink: 0;
	border-left: 2px solid var(--stk-border);
	border-bottom: none;
}
.stkt-vert-right .stkt-tab {
	width: 100%;
	justify-content: flex-start;
	border-left: var(--stkt-indicator-size) solid transparent;
	margin-left: -2px;
	padding: 12px 20px;
}
.stkt-vert-right .stkt-tab.stkt-active {
	color: var(--stkt-indicator);
	border-left-color: var(--stkt-indicator);
}
.stkt-vert-right .stkt-panels {
	padding-right: 28px;
}
.stkt-vert-right .stkt-panel {
	padding-top: 0;
}

/* =============================================================================
   STYLE 5 — Pills (Filled Active)
   ============================================================================= */

.stkt-pills .stkt-tablist {
	gap: 6px;
	padding: 4px;
	background-color: rgba( var(--stk-accent-rgb), 0.06 );
	border-radius: 100px;
	width: fit-content;
}
.stkt-pills .stkt-tab {
	border-radius: 100px;
	padding: 8px 20px;
	font-size: 14px;
}
.stkt-pills .stkt-tab:hover {
	background-color: rgba( var(--stk-accent-rgb), 0.1 );
	color: var(--stkt-indicator);
}
.stkt-pills .stkt-tab.stkt-active {
	background-color: var(--stkt-indicator);
	color: var(--stk-white);
}

/* =============================================================================
   STYLE 6 — Pills Outline
   ============================================================================= */

.stkt-pills-outline .stkt-tablist {
	gap: 8px;
}
.stkt-pills-outline .stkt-tab {
	border-radius: 100px;
	padding: 8px 20px;
	border: 1px solid var(--stk-border);
	color: var(--stk-secondary);
}
.stkt-pills-outline .stkt-tab:hover {
	border-color: var(--stkt-indicator);
	color: var(--stkt-indicator);
}
.stkt-pills-outline .stkt-tab.stkt-active {
	border-color: var(--stkt-indicator);
	color: var(--stkt-indicator);
	background-color: rgba( var(--stk-accent-rgb), 0.06 );
}

/* =============================================================================
   STYLE 7 — Pointer Tabs
   Was a second plain underline bar. The active tab now points at its panel
   with a notch, and the panel is a bordered plate rather than loose text.
   ============================================================================= */

.stkt-underline .stkt-tablist {
	gap: 4px;
	overflow: visible;
	margin-bottom: 14px;
}
.stkt-underline .stkt-tab {
	padding: 10px 18px;
	border-radius: 8px;
}
.stkt-underline .stkt-tab:hover {
	color: var(--stkt-indicator);
	background: rgba(var(--stk-accent-rgb), 0.06);
}
.stkt-underline .stkt-tab.stkt-active {
	color: var(--stk-white);
	background: var(--stkt-indicator);
}
.stkt-underline .stkt-tab.stkt-active::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: -7px;
	width: 12px;
	height: 12px;
	background: var(--stkt-indicator);
	transform: translateX(-50%) rotate(45deg);
	border-radius: 2px;
}
.stkt-underline .stkt-panels {
	border: 1px solid var(--stk-border);
	border-radius: 12px;
	background: var(--stk-white);
}
.stkt-underline .stkt-panel {
	padding: 20px 22px;
}

/* =============================================================================
   STYLE 8 — Folder Tabs
   ============================================================================= */

.stkt-folder .stkt-tablist {
	gap: 2px;
	align-items: flex-end;
	border-bottom: 2px solid var(--stk-border);
}
.stkt-folder .stkt-tab {
	padding: 10px 22px;
	background-color: #f5f5f5;
	border: 1px solid var(--stk-border);
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	margin-bottom: -2px;
	color: var(--stk-muted);
}
.stkt-folder .stkt-tab:hover {
	background-color: #eee;
	color: var(--stk-secondary);
}
.stkt-folder .stkt-tab.stkt-active {
	background-color: var(--stk-white);
	color: var(--stk-primary);
	border-color: var(--stk-border);
	border-bottom-color: var(--stk-white);
	font-weight: 700;
}
.stkt-folder .stkt-panel {
	border: 1px solid var(--stk-border);
	border-top: none;
	border-radius: 0 0 8px 8px;
	padding: 24px;
	background-color: var(--stk-white);
}

/* =============================================================================
   STYLE 9 — Button Group / Segmented
   ============================================================================= */

.stkt-btn-group .stkt-tablist {
	border: 1px solid var(--stk-border);
	border-radius: 6px;
	overflow: hidden;
	width: fit-content;
}
.stkt-btn-group .stkt-tab {
	border-right: 1px solid var(--stk-border);
	border-radius: 0;
	padding: 10px 20px;
	color: var(--stk-secondary);
	background-color: var(--stk-white);
}
.stkt-btn-group .stkt-tab:last-child {
	border-right: none;
}
.stkt-btn-group .stkt-tab:hover {
	background-color: #f5f5f5;
}
.stkt-btn-group .stkt-tab.stkt-active {
	background-color: var(--stkt-indicator);
	color: var(--stk-white);
	border-color: var(--stkt-indicator);
}

/* =============================================================================
   STYLE 10 — Overlapping Folders
   Was a second boxed panel with folder tabs. The tabs now overlap each other
   in a staggered stack and the active one lifts clear of the pile.
   ============================================================================= */

.stkt-boxed .stkt-tablist {
	gap: 0;
	overflow: visible;
	padding-left: 4px;
	align-items: flex-end;
}
.stkt-boxed .stkt-tab {
	padding: 11px 26px 12px;
	border: 1px solid var(--stk-border);
	border-bottom: none;
	border-radius: 12px 12px 0 0;
	background: #f4f5f7;
	box-shadow: 0 -1px 0 rgba(16,24,40,.04);
}
.stkt-boxed .stkt-tab + .stkt-tab {
	margin-left: -14px;
}
.stkt-boxed .stkt-tab:nth-child(2) { z-index: 2; }
.stkt-boxed .stkt-tab:nth-child(3) { z-index: 3; }
.stkt-boxed .stkt-tab:nth-child(4) { z-index: 4; }
.stkt-boxed .stkt-tab:nth-child(5) { z-index: 5; }
.stkt-boxed .stkt-tab:nth-child(6) { z-index: 6; }
.stkt-boxed .stkt-tab.stkt-active {
	z-index: 9;
	padding-top: 15px;
	background: var(--stk-white);
	color: var(--stkt-indicator);
	box-shadow: 0 -2px 0 var(--stkt-indicator) inset;
}
.stkt-boxed .stkt-panels {
	position: relative;
	z-index: 10;
	border: 1px solid var(--stk-border);
	border-radius: 0 12px 12px 12px;
	background: var(--stk-white);
	margin-top: -1px;
}
.stkt-boxed .stkt-panel {
	padding: 22px;
}

/* =============================================================================
   STYLE 11 — Icon Above Label
   ============================================================================= */

.stkt-icon-top .stkt-tablist {
	border-bottom: 2px solid var(--stk-border);
	gap: 4px;
}
.stkt-icon-top .stkt-tab {
	flex-direction: column;
	gap: 6px;
	padding: 14px 20px 12px;
	min-width: 80px;
	border-bottom: var(--stkt-indicator-size) solid transparent;
	margin-bottom: -2px;
}
.stkt-icon-top .stkt-tab-icon i,
.stkt-icon-top .stkt-tab-icon svg {
	font-size: 22px;
	width: 22px;
}
.stkt-icon-top .stkt-tab.stkt-active {
	color: var(--stkt-indicator);
	border-bottom-color: var(--stkt-indicator);
}
.stkt-icon-top .stkt-tab.stkt-active .stkt-tab-icon i,
.stkt-icon-top .stkt-tab.stkt-active .stkt-tab-icon svg {
	color: var(--stkt-indicator);
	fill: var(--stkt-indicator);
}

/* =============================================================================
   STYLE 12 — Icon Left (Vertical)
   ============================================================================= */

.stkt-icon-left {
	flex-direction: row;
	align-items: flex-start;
}
.stkt-icon-left .stkt-tablist {
	flex-direction: column;
	min-width: 200px;
	flex-shrink: 0;
	gap: 4px;
}
.stkt-icon-left .stkt-tab {
	width: 100%;
	justify-content: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 8px;
}
.stkt-icon-left .stkt-tab:hover {
	background-color: rgba( var(--stk-accent-rgb), 0.06 );
	color: var(--stkt-indicator);
}
.stkt-icon-left .stkt-tab.stkt-active {
	background-color: rgba( var(--stk-accent-rgb), 0.1 );
	color: var(--stkt-indicator);
}
.stkt-icon-left .stkt-tab.stkt-active .stkt-tab-icon i,
.stkt-icon-left .stkt-tab.stkt-active .stkt-tab-icon svg {
	color: var(--stkt-indicator);
	fill: var(--stkt-indicator);
}
.stkt-icon-left .stkt-panels {
	padding-left: 28px;
	flex: 1;
}
.stkt-icon-left .stkt-panel {
	padding-top: 0;
}

/* =============================================================================
   STYLE 13 — Numbered Steps (Vertical)
   ============================================================================= */

.stkt-numbered {
	flex-direction: row;
	align-items: flex-start;
}
.stkt-numbered .stkt-tablist {
	flex-direction: column;
	min-width: 200px;
	flex-shrink: 0;
	gap: 4px;
}
.stkt-numbered .stkt-tab {
	width: 100%;
	justify-content: flex-start;
	gap: 12px;
	padding: 12px 16px;
}
.stkt-numbered .stkt-tab-num {
	border: 2px solid var(--stk-border);
	background: transparent;
	color: var(--stk-muted);
	font-weight: 700;
	transition: all 0.2s ease;
}
.stkt-numbered .stkt-tab.stkt-active .stkt-tab-num {
	background-color: var(--stkt-indicator);
	border-color: var(--stkt-indicator);
	color: var(--stk-white);
}
.stkt-numbered .stkt-tab.stkt-active {
	color: var(--stk-primary);
	font-weight: 700;
}
.stkt-numbered .stkt-panels {
	padding-left: 28px;
	flex: 1;
}
.stkt-numbered .stkt-panel {
	padding-top: 0;
}

/* =============================================================================
   STYLE 14 — Sideways Rail
   Was a second vertical list with an accent bar. The labels now run bottom to
   top along a hairline rail, so the tabs take almost no horizontal room.
   ============================================================================= */

.stkt-accent-left {
	flex-direction: row;
	align-items: stretch;
	gap: 0;
}
.stkt-accent-left .stkt-tablist {
	flex-direction: column-reverse;
	justify-content: flex-end;
	flex: 0 0 auto;
	overflow: visible;
	border-right: 1px solid var(--stk-border);
	padding-right: 10px;
	min-height: 180px;
}
.stkt-accent-left .stkt-tab {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	justify-content: flex-start;
	padding: 14px 8px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12px;
	border-right: 3px solid transparent;
}
.stkt-accent-left .stkt-tab .stkt-tab-badge {
	writing-mode: horizontal-tb;
}
.stkt-accent-left .stkt-tab.stkt-active {
	color: var(--stkt-indicator);
	border-right-color: var(--stkt-indicator);
	margin-right: -13px;
	padding-right: 8px;
}
.stkt-accent-left .stkt-panels {
	padding-left: 26px;
}
.stkt-accent-left .stkt-panel {
	padding-top: 0;
}

/* =============================================================================
   STYLE 15 — Thick Accent Top Bar
   ============================================================================= */

.stkt-accent-top .stkt-tablist {
	gap: 2px;
}
.stkt-accent-top .stkt-tab {
	padding: 12px 22px;
	border-top: 4px solid transparent;
	border-radius: 0 0 4px 4px;
	color: var(--stk-muted);
}
.stkt-accent-top .stkt-tab:hover {
	border-top-color: rgba( var(--stk-accent-rgb), 0.4 );
	color: var(--stk-secondary);
}
.stkt-accent-top .stkt-tab.stkt-active {
	border-top-color: var(--stkt-indicator);
	color: var(--stk-primary);
	font-weight: 700;
	background-color: rgba( var(--stk-accent-rgb), 0.05 );
}

/* =============================================================================
   STYLE 16 — Dark Tab Bar
   ============================================================================= */

.stkt-dark .stkt-tablist {
	background-color: var(--stk-primary);
	border-radius: 8px 8px 0 0;
	padding: 4px 4px 0;
	gap: 2px;
}
.stkt-dark .stkt-tab {
	color: rgba(255,255,255,0.6);
	padding: 10px 20px;
	border-radius: 6px 6px 0 0;
}
.stkt-dark .stkt-tab:hover {
	color: var(--stk-white);
	background-color: rgba(255,255,255,0.08);
}
.stkt-dark .stkt-tab.stkt-active {
	color: var(--stk-white);
	background-color: rgba(255,255,255,0.12);
	border-bottom: 2px solid var(--stkt-indicator);
}

/* =============================================================================
   STYLE 17 — Equal Columns
   Was a tinted active tab on the same bar. The tabs now divide the full width
   into equal columns split by hairlines, the way a wide filter bar reads.
   ============================================================================= */

.stkt-gradient .stkt-tablist {
	width: 100%;
	gap: 0;
	border: 1px solid var(--stk-border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--stk-white);
}
.stkt-gradient .stkt-tab {
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
	padding: 14px 12px;
}
.stkt-gradient .stkt-tab + .stkt-tab {
	box-shadow: inset 1px 0 0 var(--stk-border);
}
.stkt-gradient .stkt-tab:hover {
	background: #f7f8fa;
}
.stkt-gradient .stkt-tab.stkt-active {
	color: var(--stkt-indicator);
	background: rgba(var(--stk-accent-rgb), 0.07);
	box-shadow: inset 0 3px 0 var(--stkt-indicator);
}
.stkt-gradient .stkt-tab + .stkt-tab.stkt-active {
	box-shadow: inset 1px 0 0 var(--stk-border), inset 0 3px 0 var(--stkt-indicator);
}

/* =============================================================================
   STYLE 18 — Floating Tabs
   ============================================================================= */

.stkt-floating .stkt-tablist {
	gap: 8px;
	margin-bottom: -16px;
	padding: 0 20px;
	z-index: 1;
	position: relative;
}
.stkt-floating .stkt-tab {
	border-radius: 8px;
	padding: 10px 20px;
	background-color: var(--stk-white);
	border: 1px solid var(--stk-border);
	box-shadow: 0 2px 8px var(--stk-shadow);
	color: var(--stk-muted);
}
.stkt-floating .stkt-tab:hover {
	box-shadow: 0 4px 16px var(--stk-shadow);
	color: var(--stk-secondary);
}
.stkt-floating .stkt-tab.stkt-active {
	border-color: var(--stkt-indicator);
	color: var(--stkt-indicator);
	box-shadow: 0 4px 16px rgba( var(--stk-accent-rgb), 0.2 );
	font-weight: 700;
}
.stkt-floating .stkt-panel {
	background-color: var(--stk-white);
	border: 1px solid var(--stk-border);
	border-radius: 12px;
	padding: 40px 28px 28px;
	box-shadow: 0 4px 24px var(--stk-shadow);
}

/* =============================================================================
   STYLE 19 — Numbered Row
   Was a third filled-pill row. Each tab now carries its step number above the
   label, so a sequence of tabs reads in order at a glance.
   ============================================================================= */

.stkt-rounded .stkt-tablist {
	gap: 8px;
	border-bottom: 1px solid var(--stk-border);
}
.stkt-rounded .stkt-tab {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas: 'num num' 'label badge';
	justify-content: start;
	align-items: center;
	column-gap: 8px;
	row-gap: 4px;
	padding: 12px 18px 14px;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
}
.stkt-rounded .stkt-tab-inner { grid-area: label; }
.stkt-rounded .stkt-tab-badge { grid-area: badge; }
.stkt-rounded .stkt-tab-num {
	grid-area: num;
	justify-self: start;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--stk-muted);
}
.stkt-rounded .stkt-tab:hover {
	color: var(--stkt-indicator);
}
.stkt-rounded .stkt-tab.stkt-active {
	color: var(--stkt-indicator);
	border-bottom-color: var(--stkt-indicator);
}
.stkt-rounded .stkt-tab.stkt-active .stkt-tab-num {
	color: var(--stkt-indicator);
}

/* =============================================================================
   STYLE 20 — Pipe List
   Was another underline indicator. The tabs now sit as one inline list split
   by hairline rules, with a marker beside the active label.
   ============================================================================= */

.stkt-arrow .stkt-tablist {
	gap: 0;
	align-items: center;
}
.stkt-arrow .stkt-tab {
	padding: 6px 20px;
	font-weight: 500;
}
.stkt-arrow .stkt-tab + .stkt-tab {
	border-left: 1px solid var(--stk-border);
}
.stkt-arrow .stkt-tab::before {
	content: '';
	width: 6px;
	height: 6px;
	margin-right: 8px;
	border-radius: 50%;
	background: transparent;
	flex-shrink: 0;
}
.stkt-arrow .stkt-tab:hover {
	color: var(--stkt-indicator);
}
.stkt-arrow .stkt-tab.stkt-active {
	color: var(--stk-primary);
	font-weight: 700;
}
.stkt-arrow .stkt-tab.stkt-active::before {
	background: var(--stkt-indicator);
}
.stkt-arrow .stkt-panel {
	padding-top: 18px;
	max-width: 72ch;
}

/* =============================================================================
   STYLE 21 — Two-Line Tabs
   Was an underline bar with a restyled counter. Each tab is now a two-line
   block: the label on top, its count on the line beneath.
   ============================================================================= */

.stkt-badge .stkt-tablist {
	gap: 0;
	border-bottom: 1px solid var(--stk-border);
}
.stkt-badge .stkt-tab {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 14px 22px 16px;
	min-width: 120px;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}
.stkt-badge .stkt-tab-badge {
	min-width: 0;
	height: auto;
	padding: 0;
	background: none;
	border-radius: 0;
	font-size: 12px;
	font-weight: 600;
	color: var(--stk-muted);
}
.stkt-badge .stkt-tab-badge::after {
	content: '\00a0items';
	font-weight: 400;
}
.stkt-badge .stkt-tab:hover {
	background: #f7f8fa;
}
.stkt-badge .stkt-tab.stkt-active {
	color: var(--stkt-indicator);
	border-bottom-color: var(--stkt-indicator);
}
.stkt-badge .stkt-tab.stkt-active .stkt-tab-badge {
	color: var(--stkt-indicator);
}

/* =============================================================================
   STYLE 22 — Panel Header
   Was a second numbered vertical stepper. The tabs now live in the header bar
   of the panel itself, ranged right against a standing caption.
   ============================================================================= */

.stkt-steps {
	border: 1px solid var(--stk-border);
	border-radius: 12px;
	background: var(--stk-white);
	overflow: hidden;
}
.stkt-steps .stkt-tablist {
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	padding: 10px 16px;
	background: #f7f8fa;
	border-bottom: 1px solid var(--stk-border);
	overflow: visible;
}
.stkt-steps .stkt-tablist::before {
	content: 'Sections';
	margin-right: auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stk-muted);
}
.stkt-steps .stkt-tab {
	padding: 8px 14px;
	border-radius: 8px;
	font-size: 13px;
}
.stkt-steps .stkt-tab:hover {
	background: rgba(var(--stk-accent-rgb), 0.08);
	color: var(--stkt-indicator);
}
.stkt-steps .stkt-tab.stkt-active {
	background: var(--stk-white);
	color: var(--stkt-indicator);
	box-shadow: 0 1px 2px rgba(16,24,40,.08);
}
.stkt-steps .stkt-panel {
	padding: 22px;
}

/* =============================================================================
   STYLE 23 — Timeline (Vertical)
   ============================================================================= */

.stkt-timeline {
	flex-direction: row;
	align-items: flex-start;
}
.stkt-timeline .stkt-tablist {
	flex-direction: column;
	min-width: 220px;
	flex-shrink: 0;
	gap: 0;
	padding-left: 20px;
}
.stkt-timeline .stkt-tab {
	width: 100%;
	justify-content: flex-start;
	gap: 12px;
	padding: 10px 16px 20px;
	position: relative;
}
.stkt-timeline .stkt-tab::before {
	content: '';
	position: absolute;
	left: -20px;
	top: 14px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--stk-border);
	border: 2px solid var(--stk-white);
	box-shadow: 0 0 0 2px var(--stk-border);
	transition: all 0.2s ease;
	z-index: 1;
}
.stkt-timeline .stkt-tab.stkt-active::before {
	background-color: var(--stkt-indicator);
	box-shadow: 0 0 0 3px rgba( var(--stk-accent-rgb), 0.2 );
}
.stkt-timeline-line {
	position: absolute;
	left: -14px;
	top: 26px;
	width: 2px;
	bottom: 0;
	background-color: var(--stk-border);
	z-index: 0;
}
.stkt-timeline .stkt-tab:last-child .stkt-timeline-line {
	display: none;
}
.stkt-timeline .stkt-tab.stkt-active {
	color: var(--stk-primary);
	font-weight: 700;
}
.stkt-timeline .stkt-tab:hover {
	color: var(--stkt-indicator);
}
.stkt-timeline .stkt-panels {
	padding-left: 32px;
	flex: 1;
}
.stkt-timeline .stkt-panel {
	padding-top: 0;
}

/* =============================================================================
   STYLE 24 — Mega Tabs (Icon + Description)
   ============================================================================= */

.stkt-mega .stkt-tablist {
	gap: 8px;
	border-bottom: 2px solid var(--stk-border);
}
.stkt-mega .stkt-tab {
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 16px 24px;
	min-width: 140px;
	border-bottom: var(--stkt-indicator-size) solid transparent;
	margin-bottom: -2px;
	border-top: 1px solid transparent;
	border-left: 1px solid transparent;
	border-right: 1px solid transparent;
	border-radius: 6px 6px 0 0;
}
.stkt-mega .stkt-tab-icon {
	margin-bottom: 4px;
}
.stkt-mega .stkt-tab-icon i,
.stkt-mega .stkt-tab-icon svg {
	font-size: 22px;
	width: 22px;
}
.stkt-mega .stkt-tab-label {
	font-size: 15px;
	font-weight: 700;
}
.stkt-mega .stkt-tab-desc {
	font-size: 12px;
	color: var(--stk-muted);
	opacity: 1;
}
.stkt-mega .stkt-tab:hover {
	background-color: rgba( var(--stk-accent-rgb), 0.04 );
	color: var(--stk-primary);
}
.stkt-mega .stkt-tab.stkt-active {
	border-bottom-color: var(--stkt-indicator);
	border-top-color: var(--stk-border);
	border-left-color: var(--stk-border);
	border-right-color: var(--stk-border);
	background-color: var(--stk-white);
	color: var(--stkt-indicator);
}
.stkt-mega .stkt-tab.stkt-active .stkt-tab-desc {
	color: rgba( var(--stk-accent-rgb), 0.7 );
}
.stkt-mega .stkt-tab.stkt-active .stkt-tab-icon i,
.stkt-mega .stkt-tab.stkt-active .stkt-tab-icon svg {
	color: var(--stkt-indicator);
	fill: var(--stkt-indicator);
}

/* =============================================================================
   STYLE 25 — Neon Glow
   ============================================================================= */

.stkt-neon {
	background-color: #0d0d0d;
	border-radius: 12px;
	padding: 24px;
}
.stkt-neon .stkt-tablist {
	gap: 4px;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	padding-bottom: 4px;
}
.stkt-neon .stkt-tab {
	color: rgba(255,255,255,0.4);
	padding: 10px 20px;
	border-radius: 6px;
	border: 1px solid transparent;
}
.stkt-neon .stkt-tab:hover {
	color: rgba(255,255,255,0.7);
	background-color: rgba(255,255,255,0.05);
}
.stkt-neon .stkt-tab.stkt-active {
	color: var(--stkt-indicator);
	border-color: var(--stkt-indicator);
	background-color: rgba( var(--stk-accent-rgb), 0.1 );
	box-shadow: 0 0 12px rgba( var(--stk-accent-rgb), 0.35 ),
	            inset 0 0 12px rgba( var(--stk-accent-rgb), 0.08 );
	font-weight: 700;
}
.stkt-neon .stkt-tab.stkt-active .stkt-tab-icon i,
.stkt-neon .stkt-tab.stkt-active .stkt-tab-icon svg {
	filter: drop-shadow( 0 0 4px var(--stkt-indicator) );
}
.stkt-neon .stkt-panel {
	color: rgba(255,255,255,0.85);
	padding-top: 20px;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media ( max-width: 767px ) {
	/* All vertical layouts collapse to horizontal */
	.stkt-vert-left,
	.stkt-vert-right,
	.stkt-icon-left,
	.stkt-numbered,
	.stkt-accent-left,
	.stkt-steps,
	.stkt-timeline {
		flex-direction: column;
	}

	.stkt-vert-left .stkt-tablist,
	.stkt-vert-right .stkt-tablist,
	.stkt-icon-left .stkt-tablist,
	.stkt-numbered .stkt-tablist,
	.stkt-accent-left .stkt-tablist,
	.stkt-steps .stkt-tablist,
	.stkt-timeline .stkt-tablist {
		flex-direction: row;
		flex-wrap: wrap;
		min-width: auto;
		border-right: none;
		border-left: none;
		border-bottom: 2px solid var(--stk-border);
	}

	.stkt-vert-left .stkt-tab,
	.stkt-vert-right .stkt-tab {
		border-right: none;
		border-left: none;
		border-bottom: var(--stkt-indicator-size) solid transparent;
		margin-right: 0;
		margin-left: 0;
		margin-bottom: -2px;
	}
	.stkt-vert-left .stkt-tab.stkt-active,
	.stkt-vert-right .stkt-tab.stkt-active {
		border-bottom-color: var(--stkt-indicator);
		border-right-color: transparent;
		border-left-color: transparent;
	}

	.stkt-vert-left .stkt-panels,
	.stkt-vert-right .stkt-panels,
	.stkt-icon-left .stkt-panels,
	.stkt-numbered .stkt-panels,
	.stkt-accent-left .stkt-panels,
	.stkt-steps .stkt-panels,
	.stkt-timeline .stkt-panels {
		padding-left: 0;
		padding-right: 0;
		padding-top: 0;
	}

	.stkt-accent-left .stkt-tab {
		border-left: none;
		border-bottom: var(--stkt-indicator-size) solid transparent;
		margin-bottom: -2px;
		border-radius: 0;
	}
	.stkt-accent-left .stkt-tab.stkt-active {
		border-bottom-color: var(--stkt-indicator);
		border-left-color: transparent;
		background: transparent;
	}

	.stkt-steps .stkt-tab {
		border-left: none;
		border-bottom: none;
	}

	.stkt-timeline .stkt-tablist {
		padding-left: 0;
	}
	.stkt-timeline .stkt-tab::before,
	.stkt-timeline-line {
		display: none;
	}

	/* Mega wraps */
	.stkt-mega .stkt-tab {
		min-width: 100px;
	}
}
/* =============================
   NEW STYLES 36–60
   Each style is heavily differentiated with its own palette and layout accents.
   ============================= */

/* 36 — Newspaper */
.stkt-wrap.stkt-newspaper {
	--stkt-indicator: #111;
	font-family: "Georgia", "Times New Roman", Times, serif;
	background: #faf7f1;
	border: 1px solid #d6d0c4;
	box-shadow: 0 1px 0 #fff inset;
	padding: 8px 12px;
}
.stkt-newspaper .stkt-tablist {
	border-bottom: 2px solid #111;
	gap: 0;
}
.stkt-newspaper .stkt-tab {
	color: #111;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-right: 1px solid #bdb7a9;
	padding: 12px 18px;
	background: linear-gradient(#fff, #f2ede3);
}
.stkt-newspaper .stkt-tab.stkt-active {
	background: #fff;
	box-shadow: 0 2px 0 #111 inset;
}
.stkt-newspaper .stkt-panel {
	padding: 18px 0 0;
	border-top: 1px dotted #bdb7a9;
	color: #222;
}
.stkt-newspaper .stkt-panel h1,
.stkt-newspaper .stkt-panel h2,
.stkt-newspaper .stkt-panel h3 { font-family: inherit; text-transform: none; }

/* 37 — Futuristic (Cyber) */
.stkt-wrap.stkt-futuristic {
	--stkt-indicator: #19e3ff;
	background: radial-gradient(1200px 600px at 10% 0%, #0a0f1f, #02040a 70%);
	color: #cfe9ff;
	border-radius: 12px;
	padding: 16px;
}
.stkt-futuristic .stkt-tablist { gap: 8px; }
.stkt-futuristic .stkt-tab {
	color: #9ad1ff;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(25,227,255,0.25);
	border-radius: 10px;
	backdrop-filter: blur(4px);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .08em;
	box-shadow: 0 0 0 0 rgba(25,227,255,0.4);
}
.stkt-futuristic .stkt-tab:hover { box-shadow: 0 0 0 2px rgba(25,227,255,0.25) inset; }
.stkt-futuristic .stkt-tab.stkt-active {
	color: #08121f;
	background: linear-gradient(180deg, #19e3ff 0%, #72f3ff 100%);
	border-color: #19e3ff;
	text-shadow: 0 0 8px rgba(0,0,0,.35);
	box-shadow: 0 6px 22px rgba(25,227,255,0.35);
}
.stkt-futuristic .stkt-panel {
	padding: 20px;
	background: rgba(255,255,255,0.03);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 12px;
	box-shadow: inset 0 0 0 1px rgba(25,227,255,0.15);
}

/* 38 — Command Bar
   Replaces a steampunk pastiche. A dark utility bar: monospace uppercase
   labels, a status dot per tab and a hairline divider between them. */
.stkt-wrap.stkt-command {
	--stkt-indicator: #6ee7b7;
	background: #14161d;
	border-radius: 12px;
	padding: 6px 6px 0;
}
.stkt-command .stkt-tablist {
	gap: 0;
	border-bottom: 1px solid rgba(255,255,255,0.10);
}
.stkt-command .stkt-tab {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.5);
	padding: 14px 20px 14px 32px;
	border-bottom: 2px solid transparent;
}
.stkt-command .stkt-tab + .stkt-tab {
	box-shadow: inset 1px 0 0 rgba(255,255,255,0.08);
}
.stkt-command .stkt-tab::before {
	content: '';
	position: absolute;
	left: 14px;
	top: 50%;
	margin-top: -3px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255,255,255,0.22);
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.stkt-command .stkt-tab:hover {
	color: rgba(255,255,255,0.85);
}
.stkt-command .stkt-tab.stkt-active {
	color: #ffffff;
	border-bottom-color: var(--stkt-indicator);
}
.stkt-command .stkt-tab.stkt-active::before {
	background: var(--stkt-indicator);
	box-shadow: 0 0 0 3px rgba(110,231,183,0.18);
}
.stkt-command .stkt-tab-badge {
	background: rgba(255,255,255,0.14);
	color: #fff;
}
.stkt-command .stkt-panel {
	color: rgba(255,255,255,0.78);
	padding: 22px 16px 20px;
}

/* 39 — Pastel Cards */
.stkt-wrap.stkt-pastel-cards { --stkt-indicator: #6b8dd6; background: #fcfcff; padding: 10px; }
.stkt-pastel-cards .stkt-tablist { gap: 10px; }
.stkt-pastel-cards .stkt-tab {
	border-radius: 12px;
	border: 1px solid #e7e9ff;
	background: #fff;
	color: #6b6f76;
	box-shadow: 0 6px 14px rgba(107,141,214,0.08);
}
.stkt-pastel-cards .stkt-tab:nth-child(1) { background: #f6f0ff; color: #6a56a5; }
.stkt-pastel-cards .stkt-tab:nth-child(2) { background: #e9f7ff; color: #3b84a1; }
.stkt-pastel-cards .stkt-tab:nth-child(3) { background: #eafbea; color: #2f7a44; }
.stkt-pastel-cards .stkt-tab.stkt-active { filter: saturate(1.2) contrast(1.1); }
.stkt-pastel-cards .stkt-panel { background: #fff; border: 1px solid #eef0ff; border-radius: 12px; padding: 18px; }

/* 40 — High Contrast */
.stkt-wrap.stkt-high-contrast { --stkt-indicator: #ffea00; background: #000; color: #fff; padding: 12px; }
.stkt-high-contrast .stkt-tablist { gap: 4px; }
.stkt-high-contrast .stkt-tab { background: #111; color: #fff; border: 2px solid #fff; text-transform: uppercase; }
.stkt-high-contrast .stkt-tab.stkt-active { background: #ffea00; color: #000; border-color: #ffea00; }
.stkt-high-contrast .stkt-panel { border-top: 2px solid #ffea00; }

/* 41 — Track Slider -------------------------------------------------------- */

.stkt-wrap.stkt-material-bar { background: #fff; }
.stkt-material-bar .stkt-tablist {
	position: relative;
	width: 100%;
	gap: 0;
	padding-bottom: 12px;
	overflow: visible;
}
.stkt-material-bar .stkt-tablist::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	border-radius: 4px;
	background: #eef0f4;
}
.stkt-material-bar .stkt-tab {
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
	padding: 8px 12px 14px;
}
.stkt-material-bar .stkt-tab::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -12px;
	height: 4px;
	border-radius: 4px;
	background: transparent;
	z-index: 1;
	transition: background-color 0.2s ease;
}
.stkt-material-bar .stkt-tab.stkt-active {
	color: var(--stkt-indicator);
}
.stkt-material-bar .stkt-tab.stkt-active::after {
	background: var(--stkt-indicator);
}

/* 42 — Dashed Outline */
.stkt-wrap.stkt-dashed { --stkt-indicator: #ff5b5b; }
.stkt-dashed .stkt-tab { border: 2px dashed #b8c0cc; border-radius: 8px; margin-right: 8px; }
.stkt-dashed .stkt-tab.stkt-active { border-color: #ff5b5b; background: rgba(255,91,91,0.07); color: #861b1b; }

/* 43 — Progress Segments
   Replaces a ribbon pastiche. Equal-width segments over a shared track; the
   filled portion of the track runs up to and includes the active segment. */
.stkt-wrap.stkt-progress-seg {
	--stkt-indicator: #4f46e5;
}
.stkt-progress-seg .stkt-tablist {
	gap: 2px;
	background: #eceef5;
	border-radius: 999px;
	padding: 3px;
	overflow: hidden;
}
.stkt-progress-seg .stkt-tab {
	flex: 1 1 0;
	min-width: 0;
	padding: 12px 14px;
	min-height: 44px;
	color: #5b5b70;
	border-radius: 999px;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.stkt-progress-seg .stkt-tab .stkt-tab-label {
	overflow: hidden;
	text-overflow: ellipsis;
}
.stkt-progress-seg .stkt-tab:hover {
	color: #24243a;
}
.stkt-progress-seg .stkt-tab.stkt-active {
	background: var(--stkt-indicator);
	color: #ffffff;
}
.stkt-progress-seg .stkt-tab.stkt-active ~ .stkt-tab {
	opacity: 0.65;
}
.stkt-progress-seg .stkt-tab.stkt-active .stkt-tab-badge {
	background: rgba(255,255,255,0.25);
}
.stkt-progress-seg .stkt-panel {
	padding: 22px 4px 0;
}

/* 44 — Section Header
   Replaces a ticket-stub pastiche. The tab bar reads as a section header: the
   panel title sits large on the left and the remaining tabs group compactly to
   the right of a shared rule. */
.stkt-wrap.stkt-section-header {
	--stkt-indicator: #4f46e5;
}
.stkt-section-header .stkt-tablist {
	gap: 4px;
	align-items: baseline;
	border-bottom: 1px solid #e3e4ee;
	padding-bottom: 10px;
}
.stkt-section-header .stkt-tab:first-child {
	margin-right: auto;
	padding: 0 18px 0 0;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--stk-primary);
}
.stkt-section-header .stkt-tab:first-child.stkt-active {
	color: var(--stkt-indicator);
}
.stkt-section-header .stkt-tab {
	padding: 8px 14px;
	font-size: 13px;
	color: #6a6a80;
	border-radius: 8px;
}
.stkt-section-header .stkt-tab:not(:first-child):hover {
	background: #f2f3f8;
	color: #24243a;
}
.stkt-section-header .stkt-tab:not(:first-child).stkt-active {
	background: rgba(79,70,229,.10);
	color: var(--stkt-indicator);
}
.stkt-section-header .stkt-panel {
	padding: 20px 0 0;
	max-width: 72ch;
}

/* 45 — Stat Tabs
   Replaces a sticky-note pastiche. Each tab is a wide tile that leads with its
   badge as a headline figure, which finally gives the badge field a job worth
   filling in. */
.stkt-wrap.stkt-stat {
	--stkt-indicator: #4f46e5;
}
.stkt-stat .stkt-tablist {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );
	gap: 10px;
	overflow: visible;
}
.stkt-stat .stkt-tab {
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 2px;
	padding: 16px 18px;
	background: #ffffff;
	border: 1px solid #e2e4ee;
	border-radius: 12px;
	color: #64647a;
	white-space: normal;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.stkt-stat .stkt-tab-badge {
	order: -1;
	background: none;
	color: var(--stk-primary);
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.1;
	height: auto;
	padding: 0;
	min-width: 0;
}
.stkt-stat .stkt-tab-label {
	font-size: 13px;
	font-weight: 600;
}
.stkt-stat .stkt-tab:hover {
	border-color: #b9bdd2;
}
.stkt-stat .stkt-tab.stkt-active {
	border-color: var(--stkt-indicator);
	background: rgba(79,70,229,.05);
	color: var(--stkt-indicator);
}
.stkt-stat .stkt-tab.stkt-active .stkt-tab-badge {
	color: var(--stkt-indicator);
}
.stkt-stat .stkt-panel {
	padding: 22px 0 0;
}

/* 46 — Zigzag Edge */
.stkt-wrap.stkt-zigzag { --stkt-indicator: #7b61ff; }
.stkt-zigzag .stkt-tab { position: relative; background: #fff; border:1px solid #e6e4ff; }
.stkt-zigzag .stkt-tab::after {
	content:""; position:absolute; left:0; right:0; bottom:-6px; height:6px; background: repeating-linear-gradient(-45deg, #7b61ff, #7b61ff 6px, transparent 6px, transparent 12px);
}
.stkt-zigzag .stkt-tab.stkt-active { background: #f3f0ff; color:#2a1e66; }

/* 47 — Card Rail ----------------------------------------------------------- */

.stkt-wave .stkt-tablist {
	gap: 12px;
	padding: 4px 2px 10px;
}
.stkt-wave .stkt-tab {
	flex: 0 0 auto;
	width: 230px;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 14px 16px;
	border: 1px solid var(--stk-border);
	border-radius: 12px;
	background: var(--stk-white);
	white-space: normal;
}
.stkt-wave .stkt-tab-desc {
	display: block;
	white-space: normal;
}
.stkt-wave .stkt-tab-inner {
	gap: 4px;
}
.stkt-wave .stkt-tab:hover {
	border-color: var(--stkt-indicator);
}
.stkt-wave .stkt-tab.stkt-active {
	border-color: var(--stkt-indicator);
	color: var(--stkt-indicator);
	box-shadow: var(--stk-elev);
}

/* 48 — Chapter Divider
   Replaces a rainbow gradient. The tab bar is centred and interrupts a
   full-width rule, the way a chapter break interrupts body copy. */
.stkt-wrap.stkt-chapter {
	--stkt-indicator: #4f46e5;
}
.stkt-chapter .stkt-tablist {
	position: relative;
	justify-content: center;
	gap: 6px;
	padding: 0 14px;
	margin: 8px 0 4px;
	overflow: visible;
}
.stkt-chapter .stkt-tablist::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	background: #e2e3ec;
	z-index: 0;
}
.stkt-chapter .stkt-tab {
	position: relative;
	z-index: 1;
	background: #ffffff;
	padding: 9px 18px;
	margin: 0 2px;
	border-radius: 999px;
	color: #6b6b80;
	min-height: 40px;
}
.stkt-chapter .stkt-tab:hover {
	color: #24243a;
}
.stkt-chapter .stkt-tab.stkt-active {
	background: var(--stkt-indicator);
	color: #ffffff;
}
.stkt-chapter .stkt-tab.stkt-active .stkt-tab-badge {
	background: rgba(255,255,255,0.25);
}
.stkt-chapter .stkt-panel {
	padding: 20px 0 0;
	text-align: center;
	max-width: 64ch;
	margin: 0 auto;
}

/* 49 — Monochrome Invert */
/* The active and inactive states used to be the wrong way round: the selected
   tab took the same fill as the wrapper and vanished, while every unselected
   tab rendered as a solid black block. */
.stkt-wrap.stkt-mono-invert { --stkt-indicator: #111; background: #f3f3f3; color: #111; padding: 10px; border-radius: 12px; }
.stkt-mono-invert .stkt-tablist { gap: 6px; }
.stkt-mono-invert .stkt-tab { background: #ffffff; color: #4a4a4a; border: 1px solid #d6d6d6; border-radius: 8px; }
.stkt-mono-invert .stkt-tab:hover { color: #111; border-color: #999; }
.stkt-mono-invert .stkt-tab.stkt-active { background: #111; color: #ffffff; border-color: #111; }
.stkt-mono-invert .stkt-tab.stkt-active .stkt-tab-badge { background: #ffffff; color: #111; }
.stkt-mono-invert .stkt-panel { background: #ffffff; border: 1px solid #d6d6d6; border-radius: 10px; padding: 18px; }

/* 50 — Glass Lines */
.stkt-wrap.stkt-glass-lines { --stkt-indicator: #5ad1ff; background: linear-gradient(180deg, #eef7ff, #ffffff); padding: 12px; }
.stkt-glass-lines .stkt-tablist { gap:8px; }
.stkt-glass-lines .stkt-tab {
	background: rgba(255,255,255,0.6); border:1px solid rgba(90,209,255,0.4); border-radius: 10px; backdrop-filter: blur(8px);
}
.stkt-glass-lines .stkt-tab.stkt-active { box-shadow: 0 10px 30px rgba(90,209,255,0.3); }
.stkt-glass-lines .stkt-panel { background: rgba(255,255,255,0.7); border:1px solid rgba(90,209,255,0.35); border-radius: 12px; padding: 18px; backdrop-filter: blur(10px); }

/* 51 — Chip Cloud ---------------------------------------------------------- */

.stkt-outline-badges .stkt-tablist {
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	overflow: visible;
	padding-bottom: 4px;
}
.stkt-outline-badges .stkt-tablist::before {
	content: 'Browse';
	margin-right: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--stk-muted);
}
.stkt-outline-badges .stkt-tab {
	flex: 0 0 auto;
	padding: 7px 14px;
	border: 1px solid var(--stk-border);
	border-radius: 999px;
	font-size: 13px;
	background: var(--stk-white);
}
.stkt-outline-badges .stkt-tab-badge {
	background: #eef0f4;
	color: var(--stk-secondary);
}
.stkt-outline-badges .stkt-tab:hover {
	border-color: var(--stkt-indicator);
	color: var(--stkt-indicator);
}
.stkt-outline-badges .stkt-tab.stkt-active {
	background: var(--stkt-indicator);
	border-color: var(--stkt-indicator);
	color: var(--stk-white);
}
.stkt-outline-badges .stkt-tab.stkt-active .stkt-tab-badge {
	background: rgba(255,255,255,.22);
	color: var(--stk-white);
}

/* 52 — Stacked Rows -------------------------------------------------------- */

.stkt-minimal-dots .stkt-tablist {
	flex-direction: column;
	overflow: visible;
	gap: 0;
}
.stkt-minimal-dots .stkt-tab {
	width: 100%;
	justify-content: flex-start;
	padding: 14px 16px;
	border-left: 3px solid transparent;
	border-bottom: 1px solid var(--stk-border);
}
.stkt-minimal-dots .stkt-tab:first-child {
	border-top: 1px solid var(--stk-border);
}
.stkt-minimal-dots .stkt-tab .stkt-tab-badge {
	margin-left: auto;
}
.stkt-minimal-dots .stkt-tab:hover {
	background: #f7f8fa;
}
.stkt-minimal-dots .stkt-tab.stkt-active {
	color: var(--stkt-indicator);
	border-left-color: var(--stkt-indicator);
	background: rgba(var(--stk-accent-rgb), 0.06);
}
.stkt-minimal-dots .stkt-panel {
	padding: 20px 16px;
}

/* 53 — Timeline Row -------------------------------------------------------- */

.stkt-underline-slide .stkt-tablist {
	position: relative;
	width: 100%;
	gap: 0;
	padding-top: 26px;
	overflow: visible;
}
.stkt-underline-slide .stkt-tablist::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 11px;
	height: 2px;
	background: var(--stk-border);
}
.stkt-underline-slide .stkt-tab {
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
	padding: 6px 10px;
}
.stkt-underline-slide .stkt-tab::before {
	content: '';
	position: absolute;
	top: -21px;
	left: 50%;
	transform: translateX(-50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid var(--stk-border);
	background: var(--stk-white);
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.stkt-underline-slide .stkt-tab:hover::before {
	border-color: var(--stkt-indicator);
}
.stkt-underline-slide .stkt-tab.stkt-active {
	color: var(--stkt-indicator);
	font-weight: 700;
}
.stkt-underline-slide .stkt-tab.stkt-active::before {
	border-color: var(--stkt-indicator);
	background: var(--stkt-indicator);
}

/* 54 — Overlap Bar --------------------------------------------------------- */

.stkt-shadow-lift .stkt-tablist {
	position: relative;
	z-index: 2;
	align-self: center;
	max-width: calc(100% - 32px);
	gap: 2px;
	margin-bottom: -22px;
	padding: 6px;
	border-radius: 999px;
	background: var(--stk-white);
	box-shadow: var(--stk-elev);
}
.stkt-shadow-lift .stkt-tab {
	padding: 9px 18px;
	border-radius: 999px;
	font-size: 13px;
}
.stkt-shadow-lift .stkt-tab:hover {
	color: var(--stkt-indicator);
}
.stkt-shadow-lift .stkt-tab.stkt-active {
	background: var(--stkt-indicator);
	color: var(--stk-white);
}
.stkt-shadow-lift .stkt-tab.stkt-active .stkt-tab-badge {
	background: rgba(255,255,255,.22);
}
.stkt-shadow-lift .stkt-panels {
	border: 1px solid var(--stk-border);
	border-radius: 16px;
	background: var(--stk-white);
}
.stkt-shadow-lift .stkt-panel {
	padding: 42px 24px 24px;
}

/* 55 — Soft Paper */
.stkt-wrap.stkt-soft-paper { --stkt-indicator: #8d6e63; background: #fbfaf8; }
.stkt-soft-paper .stkt-tab { background: linear-gradient(#fff, #f7f3ee); border: 1px solid #e3ddd5; border-radius: 8px; color:#5b4a40; box-shadow: 0 1px 0 #fff inset; }
.stkt-soft-paper .stkt-tab.stkt-active { box-shadow: 0 2px 0 #8d6e63 inset; }
.stkt-soft-paper .stkt-panel { border: 1px solid #ece6de; border-radius: 10px; background: #fff; padding: 16px; }

/* 56 — Metal */
.stkt-wrap.stkt-metal { --stkt-indicator: #7e8a97; background: #f4f6f8; }
.stkt-metal .stkt-tab { background: linear-gradient(135deg, #dfe5ec, #c7ced7 40%, #e4e9ef); border: 1px solid #b9c2cd; color:#2a3036; text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.stkt-metal .stkt-tab.stkt-active { background: linear-gradient(135deg, #c1c9d3, #a9b4c0); box-shadow: 0 6px 18px rgba(0,0,0,.12) inset; }

/* 57 — Organic (Leafy) */
.stkt-wrap.stkt-organic { --stkt-indicator: #2e7d32; background: #f3fbf4; }
.stkt-organic .stkt-tab { background: #e8f5e9; color: #2e7d32; border-radius: 999px; border: 1px solid #c8e6c9; }
.stkt-organic .stkt-tab.stkt-active { background: #2e7d32; color: #e8f5e9; }
.stkt-organic .stkt-panel { border-left: 4px solid #2e7d32; padding-left: 14px; }

/* 58 — Divided Card -------------------------------------------------------- */

.stkt-wrap.stkt-ocean {
	flex-direction: row;
	align-items: stretch;
	border: 1px solid var(--stk-border);
	border-radius: 14px;
	background: var(--stk-white);
	overflow: hidden;
}
.stkt-ocean .stkt-tablist {
	flex-direction: column;
	flex: 0 0 220px;
	gap: 0;
	overflow: visible;
	background: #f7f8fa;
	border-right: 1px solid var(--stk-border);
}
.stkt-ocean .stkt-tab {
	width: 100%;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 14px 16px;
	white-space: normal;
	border-bottom: 1px solid var(--stk-border);
}
.stkt-ocean .stkt-tab-desc {
	display: block;
	white-space: normal;
}
.stkt-ocean .stkt-tab-inner {
	gap: 3px;
}
.stkt-ocean .stkt-tab:hover {
	background: #fff;
}
.stkt-ocean .stkt-tab.stkt-active {
	background: var(--stk-white);
	color: var(--stkt-indicator);
	box-shadow: inset 3px 0 0 var(--stkt-indicator);
}
.stkt-ocean .stkt-panel {
	padding: 22px 24px;
}

/* 59 — Titled Row ---------------------------------------------------------- */

.stkt-sunset .stkt-tablist {
	align-items: baseline;
	gap: 18px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--stk-primary);
	overflow: visible;
	flex-wrap: wrap;
}
.stkt-sunset .stkt-tablist::before {
	content: 'In this section';
	margin-right: auto;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--stk-primary);
	white-space: nowrap;
}
.stkt-sunset .stkt-tab {
	flex: 0 0 auto;
	padding: 4px 0;
	font-size: 13px;
	color: var(--stk-muted);
}
.stkt-sunset .stkt-tab:hover {
	color: var(--stk-primary);
}
.stkt-sunset .stkt-tab.stkt-active {
	color: var(--stkt-indicator);
	box-shadow: 0 2px 0 var(--stkt-indicator);
}
.stkt-sunset .stkt-panel {
	padding-top: 20px;
	max-width: 72ch;
}

/* 60 — Split Grid ---------------------------------------------------------- */

.stkt-candy .stkt-tablist {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(180px, 1fr) );
	gap: 0;
	overflow: visible;
	border: 1px solid var(--stk-border);
	border-radius: 10px;
}
.stkt-candy .stkt-tab {
	width: 100%;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--stk-white);
	box-shadow: inset -1px -1px 0 var(--stk-border);
}
.stkt-candy .stkt-tab .stkt-tab-badge {
	background: #eef0f4;
	color: var(--stk-secondary);
}
.stkt-candy .stkt-tab:hover {
	background: #f7f8fa;
}
.stkt-candy .stkt-tab.stkt-active {
	background: rgba(var(--stk-accent-rgb), 0.07);
	color: var(--stkt-indicator);
	box-shadow: inset 0 -3px 0 var(--stkt-indicator);
}
.stkt-candy .stkt-tab.stkt-active .stkt-tab-badge {
	background: var(--stkt-indicator);
	color: var(--stk-white);
}

/* =============================================================================
   STYLES 26–35
   These ten selectors had no rules anywhere in this stylesheet, so variants
   26–35 all rendered as identical unstyled text. Each one below is a real
   layout, not a colour swap. The two that were named after dated tropes
   (skeuomorphic, neumorphic) have been redesigned and relabelled.
   ============================================================================= */

/* Mega tabs carry two lines of text, so they wrap into a grid rather than
   scrolling sideways. */
.stkt-mega .stkt-tablist {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(190px, 1fr) );
	overflow: visible;
}

/* 26 — Editorial Rule ------------------------------------------------------ */

.stkt-wrap.stkt-editorial {
	--stkt-indicator: #111;
}
.stkt-editorial .stkt-tablist {
	justify-content: flex-end;
	border-top: 3px solid #111;
	border-bottom: 1px solid #111;
	margin-bottom: 0;
}
.stkt-editorial .stkt-tab {
	font-family: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.01em;
	padding: 14px 22px;
	color: #555;
	border-left: 1px solid #ddd;
}
.stkt-editorial .stkt-tab:first-child {
	border-left: none;
}
.stkt-editorial .stkt-tab:hover {
	color: #111;
	background: #fafafa;
}
.stkt-editorial .stkt-tab.stkt-active {
	background: #111;
	color: #fff;
	border-left-color: #111;
}
.stkt-editorial .stkt-panel {
	padding: 26px 0 8px;
	font-size: 16px;
	line-height: 1.7;
	max-width: 68ch;
}
/* 27 — Headline Tabs ------------------------------------------------------- */

.stkt-wrap.stkt-minimal-line {
	--stkt-indicator: #4f46e5;
}
.stkt-minimal-line .stkt-tablist {
	gap: 22px;
	align-items: baseline;
	padding-bottom: 14px;
	border-bottom: 1px solid #e6e6ec;
}
.stkt-minimal-line .stkt-tab {
	padding: 0;
	font-size: 15px;
	font-weight: 600;
	color: #9a9aa8;
	transition: color 0.2s ease, font-size 0.2s ease;
}
.stkt-minimal-line .stkt-tab:hover {
	color: #4a4a55;
}
.stkt-minimal-line .stkt-tab.stkt-active {
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--stk-primary);
}
.stkt-minimal-line .stkt-tab.stkt-active .stkt-tab-badge {
	transform: translateY(-4px);
}
.stkt-minimal-line .stkt-panel {
	padding: 20px 0 0;
	max-width: 70ch;
}

/* 28 — Breadcrumb ---------------------------------------------------------- */

.stkt-wrap.stkt-breadcrumb {
	--stkt-indicator: #4f46e5;
}
.stkt-breadcrumb .stkt-tablist {
	gap: 0;
	background: #f6f7fb;
	border: 1px solid #e5e6ef;
	border-radius: 10px;
	padding: 4px;
}
.stkt-breadcrumb .stkt-tab {
	padding: 10px 26px 10px 18px;
	color: #71718a;
	border-radius: 8px;
}
.stkt-breadcrumb .stkt-tab::after {
	content: '';
	position: absolute;
	right: 6px;
	top: 50%;
	width: 6px;
	height: 6px;
	border-top: 2px solid #c3c4d4;
	border-right: 2px solid #c3c4d4;
	transform: translateY(-50%) rotate(45deg);
}
.stkt-breadcrumb .stkt-tab:last-child {
	padding-right: 18px;
}
.stkt-breadcrumb .stkt-tab:last-child::after {
	display: none;
}
.stkt-breadcrumb .stkt-tab:hover {
	color: #2b2b3d;
}
.stkt-breadcrumb .stkt-tab.stkt-active {
	background: #ffffff;
	color: var(--stkt-indicator);
	box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.12);
}
.stkt-breadcrumb .stkt-panel {
	margin-top: 18px;
	padding: 0 0 0 18px;
	border-left: 3px solid var(--stkt-indicator);
}

/* 29 — Sidebar Nav (vertical) ---------------------------------------------- */

.stkt-wrap.stkt-sidebar-nav {
	--stkt-indicator: #4f46e5;
	flex-direction: row;
	gap: 28px;
	align-items: flex-start;
}
.stkt-sidebar-nav .stkt-tablist {
	flex-direction: column;
	flex-wrap: nowrap;
	overflow: visible;
	width: 220px;
	flex: 0 0 220px;
	gap: 2px;
	padding: 6px;
	background: #f6f7fb;
	border-radius: 12px;
}
.stkt-sidebar-nav .stkt-tab {
	justify-content: flex-start;
	width: 100%;
	padding: 12px 14px;
	border-radius: 8px;
	color: #55556a;
	white-space: normal;
}
.stkt-sidebar-nav .stkt-tab-desc {
	display: block;
	margin-top: 2px;
}
.stkt-sidebar-nav .stkt-tab:hover {
	background: #edeef6;
	color: #24243a;
}
.stkt-sidebar-nav .stkt-tab.stkt-active {
	background: #ffffff;
	color: var(--stkt-indicator);
	box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.12);
}
.stkt-sidebar-nav .stkt-tab.stkt-active .stkt-tab-badge {
	background: var(--stkt-indicator);
}
.stkt-sidebar-nav .stkt-panels {
	min-width: 0;
}
.stkt-sidebar-nav .stkt-panel {
	padding: 4px 0;
}

/* 30 — Card Stack ---------------------------------------------------------- */

.stkt-wrap.stkt-card-stack {
	--stkt-indicator: #4f46e5;
}
.stkt-card-stack .stkt-tablist {
	gap: 0;
	padding: 6px 6px 0;
	align-items: flex-end;
}
.stkt-card-stack .stkt-tab {
	margin-left: -14px;
	padding: 12px 26px;
	background: #eef0f7;
	border: 1px solid #dcdfeb;
	border-bottom: none;
	border-radius: 12px 12px 0 0;
	color: #5c5c72;
	box-shadow: -3px -2px 6px rgba(16,24,40,.05);
}
.stkt-card-stack .stkt-tab:first-child {
	margin-left: 0;
}
.stkt-card-stack .stkt-tab:hover {
	background: #f6f7fc;
}
.stkt-card-stack .stkt-tab.stkt-active {
	background: #ffffff;
	color: var(--stkt-indicator);
	border-color: #d4d7e6;
	padding-bottom: 16px;
	margin-bottom: -1px;
	z-index: 3;
}
.stkt-card-stack .stkt-panel {
	background: #ffffff;
	border: 1px solid #d4d7e6;
	border-radius: 0 12px 12px 12px;
	padding: 22px;
	position: relative;
	z-index: 1;
}

/* 31 — Tinted Band --------------------------------------------------------- */

.stkt-wrap.stkt-tinted-band {
	--stkt-indicator: #4f46e5;
}
.stkt-tinted-band .stkt-tablist {
	gap: 4px;
	padding: 6px;
	border-radius: 999px;
	background: linear-gradient( 90deg, rgba(79,70,229,.12), rgba(79,70,229,.04) );
}
.stkt-tinted-band .stkt-tab {
	padding: 10px 22px;
	border-radius: 999px;
	color: #4b4b63;
	min-height: 44px;
}
.stkt-tinted-band .stkt-tab:hover {
	background: rgba(255,255,255,0.55);
}
.stkt-tinted-band .stkt-tab.stkt-active {
	background: #ffffff;
	color: var(--stkt-indicator);
	box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px -8px rgba(16,24,40,.12);
}
.stkt-tinted-band .stkt-panel {
	margin-top: 18px;
	padding: 20px 22px;
	background: rgba(79,70,229,.04);
	border-radius: 14px;
}

/* 32 — Bold ---------------------------------------------------------------- */

.stkt-wrap.stkt-bold {
	--stkt-indicator: #4f46e5;
}
.stkt-bold .stkt-tablist {
	gap: 0;
	background: #14141c;
	border-radius: 12px 12px 0 0;
	padding: 0 4px;
}
.stkt-bold .stkt-tab {
	padding: 20px 26px;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
	border-bottom: 4px solid transparent;
}
.stkt-bold .stkt-tab:hover {
	color: #ffffff;
}
.stkt-bold .stkt-tab.stkt-active {
	color: #ffffff;
	border-bottom-color: var(--stkt-indicator);
}
.stkt-bold .stkt-panel {
	padding: 28px 26px;
	background: #f7f7fa;
	border-radius: 0 0 12px 12px;
	font-size: 17px;
	line-height: 1.65;
}

/* 33 — Segmented Control --------------------------------------------------- */

.stkt-wrap.stkt-segmented {
	--stkt-indicator: #4f46e5;
}
.stkt-segmented .stkt-tablist {
	display: inline-flex;
	gap: 0;
	padding: 4px;
	background: #ecedf3;
	border-radius: 10px;
	align-self: flex-start;
	max-width: 100%;
}
.stkt-segmented .stkt-tab {
	padding: 9px 20px;
	min-height: 40px;
	font-size: 13px;
	font-weight: 600;
	color: #4a4a5c;
	border-radius: 7px;
	position: relative;
}
.stkt-segmented .stkt-tab + .stkt-tab::before {
	content: '';
	position: absolute;
	left: 0;
	top: 20%;
	bottom: 20%;
	width: 1px;
	background: #d6d8e2;
	transition: opacity 0.15s ease;
}
.stkt-segmented .stkt-tab.stkt-active::before,
.stkt-segmented .stkt-tab.stkt-active + .stkt-tab::before {
	opacity: 0;
}
.stkt-segmented .stkt-tab.stkt-active {
	background: #ffffff;
	color: #14141c;
	box-shadow: 0 1px 2px rgba(16,24,40,.10), 0 1px 1px rgba(16,24,40,.06);
}
.stkt-segmented .stkt-panel {
	padding: 22px 0 0;
	max-width: 72ch;
}

/* 34 — Diagonal ------------------------------------------------------------ */

.stkt-wrap.stkt-diagonal {
	--stkt-indicator: #4f46e5;
}
.stkt-diagonal .stkt-tablist {
	gap: 6px;
	padding-left: 8px;
	border-bottom: 3px solid var(--stkt-indicator);
}
.stkt-diagonal .stkt-tab {
	padding: 13px 30px;
	color: #55556a;
	overflow: visible;
}
.stkt-diagonal .stkt-tab::before {
	content: '';
	position: absolute;
	inset: 0;
	background: #eff0f6;
	transform: skewX(-14deg);
	border-radius: 3px 3px 0 0;
	transition: background-color 0.2s ease;
	z-index: 0;
}
.stkt-diagonal .stkt-tab > * {
	position: relative;
	z-index: 1;
}
.stkt-diagonal .stkt-tab:hover::before {
	background: #e3e5f2;
}
.stkt-diagonal .stkt-tab.stkt-active {
	color: #ffffff;
}
.stkt-diagonal .stkt-tab.stkt-active::before {
	background: var(--stkt-indicator);
}
.stkt-diagonal .stkt-panel {
	padding: 22px 8px 0;
}

/* 35 — Tab Grid ------------------------------------------------------------ */

.stkt-wrap.stkt-tab-grid {
	--stkt-indicator: #4f46e5;
}
.stkt-tab-grid .stkt-tablist {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(150px, 1fr) );
	gap: 8px;
	overflow: visible;
}
.stkt-tab-grid .stkt-tab {
	justify-content: flex-start;
	padding: 16px;
	min-height: 64px;
	background: #ffffff;
	border: 1px solid #e0e2ec;
	border-radius: 12px;
	color: #4a4a5c;
	white-space: normal;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.stkt-tab-grid .stkt-tab-desc {
	display: block;
	margin-top: 3px;
}
.stkt-tab-grid .stkt-tab:hover {
	border-color: #b9bdd2;
}
.stkt-tab-grid .stkt-tab.stkt-active {
	background: rgba(79,70,229,.06);
	border-color: var(--stkt-indicator);
	color: var(--stkt-indicator);
	box-shadow: inset 0 0 0 1px var(--stkt-indicator);
}
.stkt-tab-grid .stkt-panel {
	padding: 24px 0 0;
}


/* =============================================================================
   Scrolling tablist affordance
   The bar no longer wraps, so a fade on the right edge signals that there is
   more to scroll to. It is drawn on the wrapper, not the scroller, so it does
   not scroll away with the content.
   ============================================================================= */

@media ( max-width: 767px ) {
	.stkt-wrap[data-collapse="scroll"] {
		position: relative;
	}
	.stkt-wrap[data-collapse="scroll"]::after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		width: 40px;
		height: 56px;
		pointer-events: none;
		background: linear-gradient( to right, rgba(255,255,255,0), rgba(255,255,255,0.95) );
		z-index: 2;
	}
	.stkt-wrap[data-collapse="scroll"] .stkt-tablist {
		padding-right: 32px;
	}
}

/* =============================================================================
   Responsive collapse to an accordion
   Below 768px the tab bar is replaced by a stack of headers, one per panel,
   so every label stays readable instead of being squeezed or scrolled past.
   ============================================================================= */

@media ( max-width: 767px ) {
	.stkt-collapse-accordion .stkt-tablist {
		display: none;
	}
	.stkt-collapse-accordion .stkt-acc-header {
		display: flex;
	}
	.stkt-collapse-accordion .stkt-panel {
		display: none;
		padding: 14px 0 20px;
	}
	.stkt-collapse-accordion .stkt-panel.stkt-active {
		display: block;
	}
	/* Reset layout chrome that only makes sense with a tab bar present. */
	.stkt-collapse-accordion {
		flex-direction: column !important;
		background: none;
		padding: 0;
	}
	.stkt-collapse-accordion .stkt-panels {
		width: 100%;
	}
	.stkt-collapse-accordion .stkt-panel {
		background: none;
		border: none;
		border-radius: 0;
		box-shadow: none;
		padding-left: 0;
		padding-right: 0;
	}
}

/* =============================================================================
   Reduced motion
   ============================================================================= */

@media ( prefers-reduced-motion: reduce ) {
	.stkt-wrap *,
	.stkt-wrap *::before,
	.stkt-wrap *::after {
		animation: none !important;
		transition: none !important;
	}
}