/*
 * TP Comparison Block v16
 * Accessibility fixes:
 *   --cb-text-3:  #9298b0 → #60657a  (was 2.69:1, now 5.43:1 ✓ WCAG AA)
 *   toggle track: #c8cbd8 → #767b91  (was 1.52:1, now 3.94:1 ✓ WCAG 1.4.11)
 *   separator:    #c8cbd8 → #7c8299  (decorative, 3.59:1 ✓ non-text)
 * Footer bar:
 *   Mobile: switch row + desc wraps to second line
 *   Desktop: single line
 *   Link = the description text itself (one string in DOM, SEO-clean)
 */

.tp-cb {
	--cb-bg:         #ffffff;
	--cb-surface:    #f7f8fa;
	--cb-border:     #e2e4ea;
	--cb-border-med: #c8cbd8;
	--cb-text:       #111318;
	--cb-text-2:     #4a4f68;
	--cb-text-3:     #60657a;   /* was #9298b0 – now WCAG AA compliant */
	--cb-link:       #0066cc;   /* Apple-style blue, WCAG AA: 5.24:1 on surface ✓ */

	--cb-tab-active-bg:   #3d4148;
	--cb-tab-active-text: #ffffff;
	--cb-toggle-on:       #1a1d2e;
	--cb-toggle-off:      #3d4148;  /* was #c8cbd8 – now WCAG 1.4.11 compliant */
	--cb-sep:             #7c8299;  /* separator dot – decorative, 3:1 ✓ */

	--cb-sh-xs: 0 1px 2px rgba(17,19,24,.05);
	--cb-sh-sm: 0 1px 3px rgba(17,19,24,.07), 0 1px 6px rgba(17,19,24,.04);
	--cb-sh:    0 2px 16px rgba(17,19,24,.08), 0 1px 4px rgba(17,19,24,.05);

	--cb-r-lg:  0.9rem;
	--cb-knob:  44px;
	--cb-ease:  cubic-bezier(.32,0,.15,1);
	--tp-pos:   50%;

	margin-block: 1rem;
	container-type: inline-size;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	background: transparent;
}
/* Hint text between H3 and block */
.tp-important {
	margin-top: .35rem !important;
	margin-bottom: .75rem !important;
}

/* ── Card ──────────────────────────────────────────────────────── */
.tp-cb .tp-cb__card {
	border:        1px solid var(--cb-border);
	border-radius: var(--cb-r-lg) !important;
	overflow:      hidden !important;
	background:    var(--cb-bg);
}

/* ── Header – tabs centered ────────────────────────────────────── */
.tp-cb__card-header {
	display:         flex;
	align-items:     center;
	justify-content: center;
	height:          58px;
	background:      var(--cb-surface);
	border-bottom:   1px solid var(--cb-border);
	overflow:        hidden;
}
@container (min-width: 680px) {
	.tp-cb__card-header { height: 62px; }
}

/* ── Tabs scroll wrapper + fade ────────────────────────────────── */
.tp-cb__tabs-wrap {
	flex:      0 1 auto;     /* shrink to content, don't force full width */
	min-width: 0;
	max-width: 100%;
	height:    100%;
	-webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
	mask-image:         linear-gradient(to right, black calc(100% - 40px), transparent 100%);
}
.tp-cb__tabs-wrap:not(.tp-cb__tabs-wrap--faded) {
	-webkit-mask-image: none;
	mask-image:         none;
}

/* ── Tabs ──────────────────────────────────────────────────────── */
.tp-cb__tabs {
	display:     flex;
	flex-wrap:   nowrap;
	gap:         25px;
	align-items: center;
	height:      100%;
	padding:     0 16px;          /* tighter on mobile */
	overflow-x:  auto;
	overflow-y:  hidden;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}
.tp-cb__tabs::-webkit-scrollbar { display: none; }
@container (min-width: 680px) {
	.tp-cb__tabs { padding: 0 24px; gap: 15px; }
}

/* iOS: replace mask-image fade with pseudo-element (more stable on Safari) */
@supports (-webkit-touch-callout: none) {
	.tp-cb__tabs-wrap {
		-webkit-mask-image: none !important;
		mask-image:         none !important;
		position:           relative;
	}
	.tp-cb__tabs-wrap::after {
		content:        '';
		position:       absolute;
		top:            0; right: 0; bottom: 0;
		width:          50px;
		background:     linear-gradient(to right, transparent, var(--cb-surface));
		pointer-events: none;
		opacity:        1;
		transition:     opacity .2s;
		z-index:        2;
	}
	.tp-cb__tabs-wrap:not(.tp-cb__tabs-wrap--faded)::after { opacity: 0; }
}

.tp-cb .tp-cb__tab {
	display:      flex;
	align-items:  center;
	gap:          6px;
	padding:      8px 16px;
	min-height:   36px;
	background:   var(--cb-bg) !important;
	border:       1px solid var(--cb-border) !important;
	border-radius: 10px !important;
	color:        var(--cb-text-3) !important;
	font-size:    .875rem !important;
	font-weight:  500 !important;
	cursor:       pointer;
	outline:      none;
	white-space:  nowrap;
	flex-shrink:  0;
	box-shadow:   var(--cb-sh-xs);
	transition:   background .13s var(--cb-ease),
	              border-color .13s var(--cb-ease),
	              color .13s var(--cb-ease);
	text-decoration: none !important;
	line-height:  1 !important;
}
.tp-cb .tp-cb__tab:hover {
	border-color: var(--cb-border-med) !important;
	color:        var(--cb-text-2) !important;
	background:   var(--cb-bg) !important;
}
.tp-cb .tp-cb__tab--active,
.tp-cb .tp-cb__tab[aria-selected="true"] {
	background:   var(--cb-tab-active-bg) !important;
	border-color: var(--cb-tab-active-bg) !important;
	color:        var(--cb-tab-active-text) !important;
	font-weight:  600 !important;
	box-shadow:   var(--cb-sh-sm);
}
.tp-cb .tp-cb__tab:focus-visible { box-shadow: 0 0 0 3px rgba(17,19,24,.15); }
.tp-cb__tab-icon {
	display:     inline-flex;
	align-items: center;
	justify-content: center;
	width:       1.125rem;
	height:      1.125rem;
	font-size:   1rem;
	line-height: 1;
	flex-shrink: 0;
}

/* On very narrow containers: larger gap and slightly bigger touch targets */
@container (max-width: 480px) {
	.tp-cb__tabs { gap: 12px; padding: 0 12px; }
	.tp-cb .tp-cb__tab  { padding: 7px 14px; font-size: .875rem; }
}

/* ── Panel ─────────────────────────────────────────────────────── */
.tp-cb__panel[hidden] { display: none; }

/* ── Slider ────────────────────────────────────────────────────── */
.tp-cb__slider {
	position:     relative;
	width:        100%;
	aspect-ratio: 16 / 9;
	overflow:     hidden;
	cursor:       col-resize;
	user-select:  none;
	touch-action: pan-y;
	background:   var(--cb-border);
}
.tp-cb__img { position: absolute; inset: 0; }
.tp-cb__img img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	pointer-events: none; -webkit-user-drag: none;
	transition: opacity .25s var(--cb-ease);
	border-radius: 0 !important;
}
/* Class-based shader toggle – no src swapping, both imgs in DOM for Google */
.tp-cb__img-shader { display: none; }
.tp-cb--shader-on  .tp-cb__img-base   { display: none; }
.tp-cb--shader-on  .tp-cb__img-shader { display: block; }
.tp-cb__img--after  { z-index: 1; }
.tp-cb__img--before { z-index: 2; clip-path: inset(0 calc(100% - var(--tp-pos)) 0 0); }

/* ── Divider ───────────────────────────────────────────────────── */
.tp-cb__divider {
	position: absolute; top: 0; bottom: 0;
	left:     var(--tp-pos); width: 2px;
	background: rgba(255,255,255,.85);
	transform: translateX(-50%); z-index: 3;
	pointer-events: none;
}

/* ── Handle ────────────────────────────────────────────────────── */
.tp-cb__handle {
	position:  absolute; top: 0; bottom: 0;
	left:      var(--tp-pos); z-index: 4;
	width:     var(--cb-knob);
	transform: translateX(-50%);
	display:   flex; align-items: center; justify-content: center;
	cursor:    col-resize; outline: none;
}
.tp-cb__knob {
	width:  var(--cb-knob); height: var(--cb-knob);
	background:              rgba(255,255,255,.82);
	border:                  1.5px solid rgba(255,255,255,.7);
	border-radius:           50%;
	display: flex; align-items: center; justify-content: center; gap: 2px;
	box-shadow: 0 2px 12px rgba(0,0,0,.22);
	color: rgba(0,0,0,.75);
	pointer-events: none; flex-shrink: 0;
}
.tp-cb__handle:focus-visible .tp-cb__knob {
	box-shadow: 0 2px 12px rgba(0,0,0,.18), 0 0 0 3px rgba(255,255,255,.5);
}

/* ── Badges ────────────────────────────────────────────────────── */
.tp-cb .tp-cb__badge {
	position: absolute; bottom: 14px; z-index: 5;
	padding:  8px 11px !important;
	margin:   0 !important;
	background: rgba(0,0,0,.45) !important; color: rgba(255,255,255,.95) !important;
	font-size: .6875rem !important; font-weight: 600 !important; letter-spacing: .05em; text-transform: uppercase;
	border-radius: 6px !important; pointer-events: none;
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255,255,255,.14) !important; white-space: nowrap;
	transition: opacity .15s ease, transform .15s ease;
	line-height: 1.4 !important;
}
.tp-cb__badge--left  { left:  14px; }
.tp-cb__badge--right { right: 14px; }
/* Hide left badge when slider is pushed fully left */
.tp-cb__slider--hide-left  .tp-cb__badge--left  { opacity: 0; transform: translateY(4px); }
/* Hide right badge when slider is pushed fully right */
.tp-cb__slider--hide-right .tp-cb__badge--right { opacity: 0; transform: translateY(4px); }
/* Hide badges on narrow screens – images are cropped tight on mobile */
@container (max-width: 500px) {
	.tp-cb__badge { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   SHADER TOGGLE FOOTER BAR – Apple style
   Single line: [switch + label]  [desc text + blue link]
   No separators, no pills, no decoration.
   Typography hierarchy does the work.
   ══════════════════════════════════════════════════════════════ */

.tp-cb__shader-toggle {
	display:     flex;
	align-items: center;
	gap:         12px;
	padding:     0 16px;
	height:      44px;            /* Apple's standard touch target height */
	background:  var(--cb-surface);
	border-top:  1px solid var(--cb-border);
	min-height:  44px;
}
@container (min-width: 680px) {
	.tp-cb__shader-toggle { padding: 0 20px; }
}

/* Keeps layout stable when hidden */
.tp-cb__shader-toggle[hidden] {
	display:        flex !important;
	visibility:     hidden;
	pointer-events: none;
}

/* ── Switch button ─────────────────────────────────────────────── */
.tp-cb .tp-cb__shader-btn {
	display:      flex;
	align-items:  center;
	gap:          8px;
	padding:      0 !important;
	background:   none !important;
	border:       none !important;
	cursor:       pointer;
	outline:      none;
	white-space:  nowrap;
	flex-shrink:  0;
	-webkit-tap-highlight-color: transparent;
	box-shadow:   none !important;
	color:        var(--cb-text) !important;
	font-size:    inherit !important;
}
.tp-cb .tp-cb__shader-btn:focus-visible .tp-cb__shader-track {
	box-shadow: 0 0 0 3px rgba(0,102,204,.3);
}
.tp-cb .tp-cb__shader-btn[disabled],
.tp-cb .tp-cb__shader-btn:disabled {
	cursor:  not-allowed;
	opacity: 1;
}
.tp-cb .tp-cb__shader-btn[disabled] .tp-cb__shader-track,
.tp-cb .tp-cb__shader-btn:disabled .tp-cb__shader-track {
	background: var(--cb-border-med);
}
.tp-cb .tp-cb__shader-btn[disabled] .tp-cb__shader-name,
.tp-cb .tp-cb__shader-btn:disabled .tp-cb__shader-name {
	color: var(--cb-border-med);
}

/* Track */
.tp-cb__shader-track {
	position:     relative;
	display:      inline-flex;
	align-items:  center;
	width:        34px; height: 20px;
	background:   var(--cb-toggle-off);
	border-radius: 999px !important;
	flex-shrink:  0;
	transition:   background .22s var(--cb-ease);
}
.tp-cb__shader-thumb {
	position:    absolute; left: 2px;
	width: 16px; height: 16px;
	background:  #fff; border-radius: 50% !important;
	box-shadow:  0 1px 4px rgba(0,0,0,.22);
	transition:  transform .22s var(--cb-ease);
}
.tp-cb__shader-btn.is-on .tp-cb__shader-track,
.tp-cb__shader-btn[aria-checked="true"] .tp-cb__shader-track { background: var(--cb-toggle-on); }
.tp-cb__shader-btn.is-on .tp-cb__shader-thumb,
.tp-cb__shader-btn[aria-checked="true"] .tp-cb__shader-thumb { transform: translateX(14px); }

/* Label "Shaders" */
.tp-cb__shader-name {
	font-size:   .875rem;
	font-weight: 500;
	color:       var(--cb-text-2);
	flex-shrink: 0;
	letter-spacing: -.01em;
}
.tp-cb--shader-on .tp-cb__shader-name { color: var(--cb-text); }

/* ── Separator dot – hidden (Apple doesn't use them) ───────────── */
/* separator dot removed */

/* ── Description text ──────────────────────────────────────────── */
.tp-cb__shader-desc {
	font-size:     .875rem;
	color:         var(--cb-text-3);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
	min-width:     0;
}

/* Three sub-states */
.tp-cb__shader-desc--on,
.tp-cb__shader-desc--off,
.tp-cb__shader-desc--none { display: none; }

.tp-cb__shader-toggle.is-has-shader .tp-cb__shader-desc--off  { display: inline; }

.tp-cb--shader-on .tp-cb__shader-toggle.is-has-shader .tp-cb__shader-desc--off { display: none; }
.tp-cb--shader-on .tp-cb__shader-toggle.is-has-shader .tp-cb__shader-desc--on  { display: inline; }

.tp-cb__shader-toggle.is-no-shader .tp-cb__shader-desc--none  { display: inline; }

/* ── Link: 1px underline, same color as surrounding desc text ──── */
.tp-cb__shader-link {
	color:                    inherit;      /* matches surrounding desc text color */
	font-size:                inherit;
	font-weight:              600;
	text-decoration:          underline;
	text-decoration-thickness: 1px;
	text-underline-offset:    2px;
	text-decoration-color:    var(--cb-border-med);
	white-space:              nowrap;
	transition:               text-decoration-color .15s;
}
.tp-cb__shader-link:hover {
	text-decoration-color: var(--cb-text-3);
}
.tp-cb__shader-link:focus-visible {
	outline:        2px solid rgba(17,19,24,.25);
	outline-offset: 2px;
	border-radius:  3px !important;
}

/* ── Screen reader ─────────────────────────────────────────────── */
.tp-cb__sr,
.tp-cb__live { position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0; }

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.tp-cb__tab, .tp-cb__img img,
	.tp-cb__shader-track, .tp-cb__shader-thumb,
	.tp-cb__shader-name, .tp-cb__shader-link { transition: none; }
}

/* ── High contrast ─────────────────────────────────────────────── */
@media (forced-colors: active) {
	.tp-cb .tp-cb__tab--active   { background: Highlight; color: HighlightText; border-color: Highlight; }
	.tp-cb__divider       { background: ButtonText; }
	.tp-cb__knob          { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText;
	                        backdrop-filter: none; -webkit-backdrop-filter: none; }
	.tp-cb__badge         { background: Canvas; color: CanvasText; border: 1px solid ButtonText; }
	.tp-cb__shader-track  { border: 2px solid ButtonText; background: ButtonFace; }
	.tp-cb__shader-btn[aria-checked="true"] .tp-cb__shader-track { background: Highlight; }
	.tp-cb__shader-link   { text-decoration-color: currentColor; }
}

/* ── Intro H3 above block – unstyled, handled globally ──────────── */

/* Defer rendering of off-screen blocks until near viewport */
.tp-cb {
	content-visibility: auto;
	contain-intrinsic-size: auto 700px;
}