/* Compare tool (/compare/), simpler layout (Oct 22 2026). Loaded only on the Compare page by ts_compare_html().
   Colors use var(--ts-x, light value): the light value applies unless dark mode defines --ts-x (site.css "Dark mode"). */
.ts-cmp { --cmp-red: var(--wp--preset--color--accent, #D7261E); --cmp-card: var(--ts-surface, #fff); --cmp-line: var(--ts-line, #E2E2DC); margin: 28px 0 0; }
.ts-cmp p:empty, .ts-cmp > br { display: none; }
.ts-cmp button { font: inherit; }
.ts-cmp :focus-visible { outline: 3px solid var(--cmp-red); outline-offset: 2px; }

/* What you can trust about it: one dark strip */
.ts-cmp__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin: 0 0 22px; padding: 16px 22px; list-style: none; border-radius: var(--ts-radius-md, 14px); background: var(--ts-band, #111113); color: #EDEDEF; }
.ts-cmp__facts li { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; line-height: 1.3; }
.ts-cmp__facts svg { flex: none; color: #FF6A60; }

/* Product type chips and Start over */
.ts-cmp__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 0 0 16px; }
.ts-cmp__kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-cmp__kind { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--ts-soft); color: var(--ts-ink); font-size: 15px !important; font-weight: 600; cursor: pointer; }
.ts-cmp__kind span { margin-left: 4px; font-family: var(--ts-mono); font-size: 12px; font-weight: 500; color: var(--ts-muted); }
.ts-cmp__kind:hover { background: var(--ts-soft-hover, #E4E4DE); }
.ts-cmp__kind[aria-pressed="true"] { background: var(--ts-solid-bg, #111113); color: var(--ts-solid-fg, #fff); }
.ts-cmp__kind[aria-pressed="true"] span { color: var(--ts-solid-muted, #B5B5BA); }
.ts-cmp__resetrow { display: flex; align-items: center; gap: 10px; margin: 0; }
.ts-cmp__reset, .ts-cmp__all, .ts-cmp__copy { min-height: 40px; padding: 0 16px; border: 1px solid var(--cmp-line); border-radius: 999px; background: var(--cmp-card); color: var(--ts-ink); font-size: 14px !important; font-weight: 600; cursor: pointer; }
.ts-cmp__reset:hover, .ts-cmp__all:hover, .ts-cmp__copy:hover { border-color: var(--ts-line-hover, #BDBDBD); }
.ts-cmp__resetrow .ts-ms-save { min-height: 40px; padding: 0 16px; font-size: 14px !important; } /* My Signal's save button (accounts.js) */

/* Product cards */
.ts-cmp__slots { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.ts-cmp__card { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 18px 18px 14px; border: 1px solid var(--cmp-line); border-radius: var(--ts-radius-md, 14px); background: var(--cmp-card); }
.ts-cmp__card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.ts-cmp__brand { font-family: var(--ts-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ts-muted); }
.ts-cmp__remove { display: inline-grid; place-items: center; width: 32px; height: 32px; margin: -6px -8px 0 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ts-muted); cursor: pointer; }
.ts-cmp__remove:hover { background: var(--ts-soft); color: var(--ts-ink); }
.ts-cmp__name { font-size: clamp(19px, 2vw, 24px); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.ts-cmp__ver { display: inline-flex; flex-wrap: wrap; gap: 4px; align-self: flex-start; padding: 3px; border-radius: 999px; background: var(--ts-soft); }
.ts-cmp__ver button { min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--ts-ink); font-size: 13px !important; font-weight: 600; cursor: pointer; }
.ts-cmp__ver button[aria-pressed="true"] { background: var(--ts-solid-bg, #111113); color: var(--ts-solid-fg, #fff); }
.ts-cmp__version { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--ts-ink); color: var(--cmp-card); font-size: 12px; font-weight: 700; }
.ts-cmp__price { margin-top: 6px; font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; line-height: 1; }
.ts-cmp__pnote { color: var(--ts-muted); font-size: 13px; line-height: 1.45; }
.ts-cmp__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 10px; }
.ts-cmp__store, .ts-cmp__hist { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none !important; }
.ts-cmp__store { background: var(--ts-red-bg, #D7261E); color: #fff !important; }
.ts-cmp__store:hover { background: #B81E17; }
.ts-cmp__hist { border: 1px solid var(--ts-ink); color: var(--ts-ink) !important; }
.ts-cmp__hist:hover { background: var(--ts-ink); color: var(--cmp-card) !important; }
.ts-cmp__card .ts-aff-note { color: var(--ts-muted); font-size: 12px; }
.ts-cmp__change { align-self: flex-start; padding: 4px 0; border: 0; background: none; color: var(--ts-muted); font-size: 13px !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ts-cmp__change:hover { color: var(--ts-ink); }

/* The empty "Add" card */
.ts-cmp__card--add { padding: 0; border-style: dashed; border-width: 2px; background: none; }
.ts-cmp__card--add.is-open { border-style: solid; border-color: var(--ts-ink); }
.ts-cmp__add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 200px; height: 100%; padding: 20px; border: 0; border-radius: inherit; background: none; color: var(--ts-ink); font-size: 16px !important; font-weight: 700; cursor: pointer; }
.ts-cmp__add svg { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--ts-soft); }
.ts-cmp__add:hover svg { background: var(--ts-solid-bg, #111113); color: var(--ts-solid-fg, #fff); }
.ts-cmp__add small { color: var(--ts-muted); font-size: 13px; font-weight: 500; }

/* Search box and list */
.ts-cmp__picker { margin: 14px 0 0; padding: 16px; border: 1px solid var(--ts-ink); border-radius: var(--ts-radius-md, 14px); background: var(--cmp-card); }
.ts-cmp__picker[hidden] { display: none; }
.ts-cmp__pickhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.ts-cmp__pickhead label { font-weight: 700; }
.ts-cmp__pickclose { min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--ts-soft); color: var(--ts-ink); font-size: 14px !important; font-weight: 600; cursor: pointer; }
.ts-cmp__q { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--ts-line-strong, #B5B5B0); border-radius: 12px; background: var(--ts-field, #fff); color: var(--ts-ink); font: inherit; font-size: 16px; }
.ts-cmp__q:focus { outline: 3px solid var(--cmp-red); outline-offset: 1px; border-color: transparent; }
.ts-cmp__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); align-content: start; gap: 0 20px; max-height: 340px; margin: 10px 0 0; padding: 0 4px 0 0; overflow-y: auto; list-style: none; }
.ts-cmp__list li { margin: 0; }
.ts-cmp__lbrand { padding: 12px 10px 4px; font-family: var(--ts-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ts-muted); grid-column: 1 / -1; border-top: 1px solid var(--cmp-line); }
.ts-cmp__lbrand:first-child { border-top: 0; }
.ts-cmp__opt { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.ts-cmp__opt:hover, .ts-cmp__opt.is-active { background: var(--ts-soft); }
.ts-cmp__opt[aria-disabled="true"] { cursor: default; color: var(--ts-muted); }
.ts-cmp__oname { font-weight: 600; }
.ts-cmp__oprice { flex: none; font-family: var(--ts-mono); font-size: 13px; color: var(--ts-muted); }
.ts-cmp__none { padding: 14px 10px; color: var(--ts-muted); }

/* Empty state */
.ts-cmp__empty { margin: 18px 0 0; padding: 18px 20px; border-radius: var(--ts-radius-md, 14px); background: var(--ts-soft); color: var(--ts-muted); text-align: center; }

/* Tools above the spec sheet */
.ts-cmp__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 26px 0 12px; }
.ts-cmp__tools-end { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ts-cmp__switch { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; font-weight: 600; cursor: pointer; }
.ts-cmp__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ts-cmp__track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--ts-line-strong, #B5B5B0); transition: background 0.15s; }
.ts-cmp__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.ts-cmp__switch input:checked + .ts-cmp__track { background: var(--cmp-red); }
.ts-cmp__switch input:checked + .ts-cmp__track::after { transform: translateX(18px); }
.ts-cmp__switch input:focus-visible + .ts-cmp__track { outline: 3px solid var(--cmp-red); outline-offset: 2px; }
.ts-cmp__units { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--ts-soft); }
.ts-cmp__units button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ts-ink); font-size: 14px !important; font-weight: 600; cursor: pointer; }
.ts-cmp__units button[aria-pressed="true"] { background: var(--ts-solid-bg, #111113); color: var(--ts-solid-fg, #fff); }
.ts-cmp__copied { color: #1B7A43; font-size: 14px; }
.ts-cmp__copied:empty { display: none; }

/* Spec sections */
.ts-cmp__groups { border-top: 2px solid var(--ts-ink); }
.ts-cmp__group { border-bottom: 1px solid var(--cmp-line); }
.ts-cmp h2.ts-cmp__gtitle { margin: 0 !important; font-size: 18px; }
.ts-cmp__gbtn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 0 4px; border: 0; background: none; color: var(--ts-ink); font-size: 18px !important; font-weight: 800; text-align: left; cursor: pointer; }
.ts-cmp__gbtn:hover { color: var(--cmp-red); }
.ts-cmp__chev { flex: none; transition: transform 0.15s; }
.ts-cmp__gbtn[aria-expanded="true"] .ts-cmp__chev { transform: rotate(90deg); }
.ts-cmp__gcount { margin-left: auto; font-family: var(--ts-mono); font-size: 12px; font-weight: 500; color: var(--ts-muted); }
.ts-cmp__gbody { padding: 0 0 12px; }
.ts-cmp__gbody[hidden] { display: none; }
.ts-cmp__same { margin: 0 0 6px; padding: 0 4px; color: var(--ts-muted); font-size: 14px; }
.ts-cmp__grid { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 15px; }
.ts-cmp__colhead { width: 24%; }
.ts-cmp__grid th, .ts-cmp__grid td { padding: 12px 14px; border: 0; border-top: 1px solid var(--cmp-line); text-align: left; vertical-align: top; }
.ts-cmp__grid tr:first-child th, .ts-cmp__grid tr:first-child td { border-top: 0; }
.ts-cmp__grid th { font-weight: 600; color: var(--ts-ink); }
.ts-cmp__grid th small { display: block; margin-top: 2px; color: var(--ts-muted); font-size: 12px; font-weight: 400; line-height: 1.35; }
.ts-cmp__grid td small { display: block; color: var(--ts-muted); font-size: 13px; }
.ts-cmp__v { font-weight: 600; overflow-wrap: anywhere; }
.ts-cmp__grid td.is-na .ts-cmp__v { color: var(--ts-muted); font-weight: 400; }
.ts-cmp__grid td.is-top { background: var(--ts-soft); }
.ts-cmp__tag { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: #E4E4DE; color: #333; font-size: 12px; font-weight: 700; }
.ts-cmp__meter { display: block; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--cmp-line); }
.ts-cmp__meter span { display: block; height: 100%; border-radius: inherit; background: var(--ts-ink); }
.ts-cmp__group--main .ts-cmp__grid tr:first-child .ts-cmp__v { font-size: 20px; font-weight: 800; }
.ts-cmp__key { margin: 12px 0 0; color: var(--ts-muted); font-size: 13px; }

/* Bar with names and prices that follows you down the page */
.ts-cmp__bar { position: fixed; z-index: 80; border-bottom: 2px solid var(--ts-ink); background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08); }
.ts-cmp__bar[hidden] { display: none; }
.ts-cmp__bar-in { display: grid; grid-template-columns: 24% repeat(var(--cols, 2), minmax(0, 1fr)); align-items: center; }
.ts-cmp__bar-label { padding: 10px 14px; font-family: var(--ts-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ts-muted); }
.ts-cmp__bar-item { display: flex; flex-direction: column; min-width: 0; padding: 8px 14px; }
.ts-cmp__bar-name { overflow: hidden; font-size: 14px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.ts-cmp__bar-price { font-size: 13px; color: var(--ts-muted); }

/* How we check */
.ts-cmp__how { margin: 22px 0 0; color: var(--ts-muted); font-size: 14px; }
.ts-cmp__how summary { min-height: 40px; display: inline-flex; align-items: center; font-weight: 600; color: var(--ts-ink); cursor: pointer; }
.ts-cmp__how p { max-width: 820px; margin: 6px 0 0; }

@media (max-width: 1000px) {
	.ts-cmp__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones: two cards across (a third goes underneath), and each spec label sits above its values */
@media (max-width: 700px) {
	.ts-cmp__facts { display: none; } /* the "How we check" fold says the same on phones */
	.ts-cmp__top { margin-bottom: 12px; }
	.ts-cmp__resetrow:has(> :not([hidden])) { width: 100%; }
	.ts-cmp__kinds { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
	.ts-cmp__kind { flex: none; padding: 0 14px; font-size: 14px !important; }
	.ts-cmp__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.ts-cmp__card { padding: 12px 12px 10px; gap: 4px; }
	.ts-cmp__name { font-size: 17px; }
	.ts-cmp__price { font-size: 22px; }
	.ts-cmp__pnote { font-size: 12px; }
	.ts-cmp__links { flex-direction: column; gap: 6px; }
	.ts-cmp__store, .ts-cmp__hist { min-height: 38px; padding: 0 10px; font-size: 13px; }
	.ts-cmp__ver button { padding: 0 9px; font-size: 12px !important; }
	.ts-cmp__card--add { grid-column: 1 / -1; }
	.ts-cmp__add { flex-direction: row; min-height: 56px; padding: 8px 14px; font-size: 15px !important; }
	.ts-cmp__add svg { width: 32px; height: 32px; padding: 6px; }
	.ts-cmp__card--add + .ts-cmp__card--add { display: none; } /* one Add button at a time on phones */
	.ts-cmp__picker { padding: 12px; }
	.ts-cmp__list { grid-template-columns: 1fr; max-height: 50vh; }
	.ts-cmp__tools-end { margin-left: 0; }
	.ts-cmp__colhead { width: auto; }
	.ts-cmp__grid, .ts-cmp__grid tbody { display: block; }
	.ts-cmp__grid colgroup { display: none; }
	.ts-cmp__grid tr { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); border-top: 1px solid var(--cmp-line); }
	.ts-cmp__grid tr:first-child { border-top: 0; }
	.ts-cmp__grid th { grid-column: 1 / -1; padding: 12px 4px 2px; border: 0; font-size: 13px; color: var(--ts-muted); }
	.ts-cmp__grid td { padding: 4px 4px 12px; border: 0; font-size: 14px; }
	.ts-cmp__grid td.is-top { background: none; }
	.ts-cmp__grid td + td { padding-left: 10px; border-left: 1px solid var(--cmp-line); }
	.ts-cmp__group--main .ts-cmp__grid tr:first-child .ts-cmp__v { font-size: 17px; }
	.ts-cmp__bar-in { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
	.ts-cmp__bar-label { display: none; }
}

/* Dark mode */
:where(:root[data-theme="dark"]) .ts-cmp__facts { border: 1px solid var(--ts-line); }
:where(:root[data-theme="dark"]) .ts-cmp__tag { background: #34343A; color: #E4E4E7; }
:where(:root[data-theme="dark"]) .ts-cmp__version { background: var(--ts-solid-bg); color: var(--ts-solid-fg); }
:where(:root[data-theme="dark"]) .ts-cmp__bar { background: rgba(17, 17, 19, 0.94); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
:where(:root[data-theme="dark"]) .ts-cmp__store:hover { background: #E8483F; }
:where(:root[data-theme="dark"]) .ts-cmp__copied { color: var(--ts-green-text); }
@media (prefers-reduced-motion: reduce) { .ts-cmp__chev, .ts-cmp__track, .ts-cmp__track::after { transition: none; } }

/* Two steps before anything else shows (Oct 22 2026): 1 what you're comparing, 2 pick two */
.ts-cmp__step { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 18px; font-weight: 800; }
.ts-cmp__step[hidden] { display: none; }
.ts-cmp__step > span:first-child { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ts-solid-bg, #111113); color: var(--ts-solid-fg, #fff); font-size: 14px; }
#ts-cmp-step2 { margin-top: 8px; }
.ts-cmp__slots[hidden] { display: none; }
.ts-cmp:not(.is-comparing) .ts-cmp__how { display: none; }
.ts-cmp__step { font-size: 20px; }
/* Before a type is picked, the three choices are big tiles */
.ts-cmp:not(.has-kind) .ts-cmp__top { display: block; }
.ts-cmp:not(.has-kind) .ts-cmp__kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ts-cmp:not(.has-kind) .ts-cmp__kind { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 110px; padding: 18px 22px; border: 1px solid var(--cmp-line); border-radius: var(--ts-radius-md, 14px); background: var(--cmp-card); font-size: 22px !important; font-weight: 800; text-align: left; }
.ts-cmp:not(.has-kind) .ts-cmp__kind:hover { border-color: var(--ts-ink); background: var(--cmp-card); }
.ts-cmp:not(.has-kind) .ts-cmp__kind span { margin: 0; font-size: 13px; }
.ts-cmp:not(.has-kind) .ts-cmp__kind span::after { content: " to choose from"; font-family: var(--wp--preset--font-family--body, inherit); }
@media (max-width: 700px) {
	.ts-cmp:not(.has-kind) .ts-cmp__kinds { grid-template-columns: 1fr; margin: 0; padding: 0; }
	.ts-cmp:not(.has-kind) .ts-cmp__kind { min-height: 72px; font-size: 19px !important; }
}