/* Template sections: Comparison variants (template-sections/comparison.html). V1 is the homepage workflow shift (css/sections/workflow.css).
   The slider in V6 uses [data-ts-range] + [data-ts-range-target] from js/library/library.js. */
.ts-cmp p { color: var(--text-medium); }
.ts-cmp__center { text-align: center; }

/* V2 table */
.ts-cmp__scroll { overflow-x: auto; border: 1px solid var(--border-thin); border-radius: var(--radius-xl); background: var(--base-high); }
.ts-cmp__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ts-cmp__table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: var(--body-md-size); }
.ts-cmp__table th, .ts-cmp__table td { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-thin); text-align: center; }
.ts-cmp__table tbody tr:last-child > * { border-bottom: 0; }
.ts-cmp__table thead th { font-weight: var(--fw-medium); color: var(--text-strong); white-space: nowrap; }
.ts-cmp__table thead img { display: inline-block; vertical-align: -4px; margin-right: 4px; }
.ts-cmp__table tbody th { position: sticky; left: 0; z-index: 1; background: var(--base-high); font-weight: var(--fw-regular); text-align: left; color: var(--text-strong); }
.ts-cmp__table .is-us { background: color-mix(in srgb, var(--accent) 7%, var(--base-high)); }
.ts-cmp__y, .ts-cmp__n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; }
.ts-cmp__y { background: var(--mint-100); color: var(--emerald-600); }
.ts-cmp__n { background: var(--base-medium); color: var(--text-low); }
.ts-cmp__y .ts-svg, .ts-cmp__n .ts-svg { width: 14px; height: 14px; stroke-width: 2; }
.ts-cmp__p { font-size: var(--body-sm-size); color: var(--text-medium); }
.is-us .ts-cmp__p { font-weight: var(--fw-medium); color: var(--text-strong); }

/* V3 before / after cards */
.ts-cmp__pair { display: grid; gap: var(--space-4); max-width: 960px; margin: var(--space-10) auto 0; }
.ts-cmp__card { display: grid; align-content: start; gap: var(--space-6); padding: var(--space-8) var(--space-6); border: 1px solid var(--border-thin); border-radius: var(--radius-xl); background: var(--stone-50); }
.ts-cmp__card--yes { border-color: transparent; background: var(--ts-surface); box-shadow: var(--shadow-lg); }
.ts-cmp__label { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-weight: var(--fw-heading); font-size: var(--h6-size); color: var(--text-strong) !important; }
.ts-cmp__list { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.ts-cmp__list li { display: grid; grid-template-columns: 22px 1fr; gap: var(--space-3); align-items: start; color: var(--text-medium); }
.ts-cmp__list .ts-svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; stroke-width: 2; }
.ts-cmp__list--no .ts-svg { background: var(--base-medium); color: var(--text-low); }
.ts-cmp__list--no li { text-decoration: line-through; text-decoration-color: var(--border-strong); }
.ts-cmp__list--yes .ts-svg { background: var(--accent); color: #fff; }
.ts-cmp__list--yes li { color: var(--text-strong); }
@media (min-width: 768px) { .ts-cmp__pair { grid-template-columns: 1fr 1fr; } .ts-cmp__card { padding: var(--space-10); } }

/* V4 time bars */
.ts-cmp__timewrap { display: grid; gap: var(--space-10); }
.ts-cmp__timehead { display: grid; gap: var(--space-4); align-content: start; }
.ts-cmp__legend { display: flex; gap: var(--space-5); font-size: var(--body-sm-size); }
.ts-cmp__legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.ts-cmp__legend i { width: 12px; height: 12px; border-radius: 3px; }
.ts-cmp .is-old { background: var(--base-low); }
.ts-cmp .is-new { background: var(--accent); }
.ts-cmp__bars { display: grid; gap: var(--space-6); margin: 0; }
.ts-cmp__bars dt { margin-bottom: var(--space-2); font-weight: var(--fw-medium); color: var(--text-strong); }
.ts-cmp__bars dd { display: grid; gap: 6px; margin: 0; }
.ts-cmp__bars dd span { display: flex; align-items: center; width: max(var(--w), 72px); height: 28px; padding-inline: var(--space-3); border-radius: 6px; font-size: 12px; font-weight: var(--fw-medium); white-space: nowrap; transform-origin: left; }
.ts-cmp__bars .is-old { color: var(--text-strong); }
.ts-cmp__bars .is-new { color: #fff; }
.motion .ts-cmp__bars > :is(.is-revealing, .is-revealed) dd span { animation: ts-cmp-grow 900ms var(--ease-out) both; }
@keyframes ts-cmp-grow { from { transform: scaleX(0.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ts-cmp__bars dd span { animation: none !important; } }
@media (min-width: 1024px) { .ts-cmp__timewrap { grid-template-columns: 1fr 1.4fr; gap: var(--space-20); } }

/* V5 competitor cards */
.ts-cmp__vs { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.ts-cmp__vs .card { display: grid; align-content: start; gap: var(--space-4); }
.ts-cmp__vs .link { margin-top: auto; justify-self: start; }
.ts-cmp__vs-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--body-sm-size); }
.ts-cmp__vs-head span { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--base-medium); font-weight: var(--fw-medium); color: var(--text-strong); }
.ts-cmp__vs-head span:first-child { background: var(--peach-100); color: var(--accent); }
.ts-cmp__vs-head em { font-style: normal; color: var(--text-low); }
@media (min-width: 1024px) { .ts-cmp__vs { grid-template-columns: repeat(3, 1fr); } }

/* V6 before / after slider */
.ts-cmp__slider { position: relative; max-width: 880px; margin-inline: auto; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.ts-cmp__pane { display: grid; align-content: start; gap: var(--space-4); min-height: 340px; padding: var(--space-6); }
.ts-cmp__pane--after { justify-items: end; background: var(--code-bg); }
.ts-cmp__pane--after .ts-code { max-width: 46%; }
.ts-cmp__pane--after .ts-code { margin: 0; padding: 0; background: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.ts-cmp__pane--before { position: absolute; inset: 0; background: var(--stone-100); clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.ts-cmp__tag { justify-self: start; padding: 2px 10px; border-radius: var(--radius-pill); background: rgb(255 255 255 / 0.12); font-size: 12px; font-weight: var(--fw-medium); color: #fff !important; }
.ts-cmp__pane--before .ts-cmp__tag { background: var(--base-high); color: var(--text-strong) !important; }
.ts-cmp__pane--after .ts-cmp__tag { justify-self: end; }
.ts-cmp__todo { display: grid; gap: var(--space-3); max-width: 340px; margin: 0; padding: 0; list-style: none; }
.ts-cmp__todo li { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--base-high); font-size: var(--body-sm-size); color: var(--text-medium); box-shadow: var(--shadow-sm); }
.ts-cmp__todo li:nth-child(odd) { rotate: -0.6deg; }
.ts-cmp__todo li:nth-child(even) { rotate: 0.5deg; }
.ts-cmp__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -1px 0; background: #fff; pointer-events: none; }
.ts-cmp__handle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; translate: -50% -50%; border-radius: 50%; background: #fff; box-shadow: var(--shadow-md); }
.ts-cmp__handle .ts-svg { position: absolute; top: 50%; z-index: 1; width: 14px; max-width: none; height: 14px; translate: 0 -50%; color: #0a0a0a; stroke-width: 2; }
.ts-cmp__handle .ts-svg:first-child { right: 2px; }
.ts-cmp__handle .ts-svg:last-child { left: 2px; }
.ts-cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.ts-cmp__slider:has(.ts-cmp__range:focus-visible) .ts-cmp__handle::before { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (min-width: 768px) { .ts-cmp__pane { min-height: 420px; padding: var(--space-10); } }
@media (max-width: 767px) { .ts-cmp__pane { min-height: 420px; } .ts-cmp__pane--after .ts-code { max-width: 47%; font-size: 11px; } .ts-cmp__pane { padding: var(--space-4); } .ts-cmp__tag { font-size: 11px; } .ts-cmp__todo { max-width: 48%; } .ts-cmp__todo li { padding: var(--space-2) var(--space-3); font-size: 12px; } }