/* The Synap: Compare (the tool at /compare/ and the matchup pages /compare/{a}-vs-{b}/). Loaded on those pages only.
   On the page deck (home.css .pg-*): breadcrumbs on the black, then a brand-gradient hero band (template-parts/
   page-band.php with ember, the homepage picker's material) carrying the heading and the search or both phones; the
   light card (.pg-sheet) slides over it with rounded top corners and carries the table. Both pad with the shared
   --page-pad, so everything sits on the one content width.
   Every row of the table is one grid (label column + a column per phone), so values line up from the phone heads
   to the last row. Orange only marks what is active or better: the dot, the switch when on, hover. */

.cm {
  --cm-lab: 14em;         /* label column */
  --cm-gap: 1.5em;        /* between columns */
  --cm-col: 9em;          /* narrowest phone column before the table scrolls sideways */
  --cm-bleed: 1.2em;      /* the scroller reaches this far past the content, so the better dot never clips */
  --cm-bar: 4.4em;        /* the slim phone bar */
  --t-h2: clamp(22px, calc(.7vw + 12.6px), 32px);
  font-size: clamp(14px, calc(.5vw + 6.4px), 24px);
}
.cm a { color: inherit; text-decoration: none; }

/* ---------- the band (page-band.php): the shared title block on the gradient ---------- */
/* the standfirst a touch brighter than on black: it can sit over the red part of the gradient */
.cm-band .pg-lede { max-width: 32em; color: rgba(255,255,255,.92); }
.cm--matchup .cm-band .pg-h1 { max-width: 20ch; }

/* search: one glass pill; the suggestions are a solid panel so they read over the gradient and the sheet alike */
.cm-find { position: relative; z-index: 6; margin-top: 2.2em; max-width: 34em; }
.cm-find__box { display: flex; align-items: center; gap: .85em; height: 3.6em; padding: 0 1.6em 0 1.35em; border-radius: 999px; color: #F9F9F9; cursor: text; }
.cm-find__box > svg { width: 1.1em; height: 1.1em; flex: none; }
.cm-find__input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #F9F9F9; font: inherit; font-size: var(--t-ui); outline: 0; -webkit-appearance: none; appearance: none; }
.cm-find__input::placeholder { color: rgba(255,255,255,.84); opacity: 1; }
.cm-find__input:disabled { cursor: not-allowed; }
.cm-find__box:has(.cm-find__input:disabled) { opacity: .7; cursor: not-allowed; }
.cm-find__box:focus-within { outline: 2px solid #fff; outline-offset: 3px; }
.cm-find__hint { margin: .85em 0 0 1.35em; font-size: var(--t-meta); line-height: 1.4; color: rgba(255,255,255,.9); }
.cm-find__list { position: absolute; z-index: 7; top: 4.1em; left: 0; right: 0; margin: 0; padding: .4em; list-style: none; max-height: min(25.5em, 62vh); overflow-y: auto; overscroll-behavior: contain; border-radius: 1.4em; background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(0,0,0,.34); }
.cm-find__list[hidden] { display: none; }
/* the band turns the ink light for its own text; the panel is the page surface, so it takes the page's ink back */
.cm-find__list { --ink: #000000; --ink-3: #646464; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cm-find__list { --ink: #F9F9F9; --ink-3: #a7a7a7; }
}
.cm-opt { display: grid; grid-template-columns: 2.8em minmax(0, 1fr) auto; gap: .9em; align-items: center; padding: .5em .8em .5em .5em; border-radius: 1em; cursor: pointer; }
.cm-opt[aria-selected="true"] { background: var(--bg-3); }
.cm-opt .hp-ph { width: 2.8em; height: 2.8em; border-radius: .75em; background: var(--bg-3); }
.cm-opt__name { display: block; font-size: var(--t-ui); font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s ease; }
.cm-opt[aria-selected="true"] .cm-opt__name { color: var(--acc-text); }
.cm-opt__meta { display: block; margin-top: .2em; font-size: var(--t-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-opt__tag { font-size: var(--t-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

/* matchup band: both phones, in the title block's right-hand column */
.cm-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; align-items: end; }
.cm-duo__one { display: flex; flex-direction: column; gap: .9em; min-width: 0; color: #F9F9F9; border-radius: 1.4em; }
.cm-duo__one:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.cm-duo__name { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.15; letter-spacing: -0.02em; }
.cm-duo__price { display: block; margin-top: .3em; font-size: var(--t-meta); color: rgba(255,255,255,.9); font-variant-numeric: tabular-nums; }
.cm-duo .hp-ph { aspect-ratio: 4 / 5; border-radius: 1.4em; background: rgba(255,255,255,.06); }

/* ---------- the card (.pg-sheet) ---------- */
/* the card clips the sticky phone bar's full-width surface (it reaches past the screen edges once it sticks) */
.cm .pg-sheet { overflow-x: clip; }
.cm a:hover .sy-go svg, .cm a:focus-visible .sy-go svg { transform: rotate(45deg); }
.cm .pg-sheet .hp-ph { background: var(--bg-3); }
.cm .hp-ph.is-product { background: #fff; }
.cm .pg-sheet .hp-tagpill { color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.cm-sec + .cm-sec { margin-top: 5em; }
.cm-head { margin-bottom: 1.8em; }
.cm-label { display: block; margin-bottom: .8em; font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cm-title { margin: 0; font-family: var(--display); font-weight: 500; font-size: var(--t-h2); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
.cm-text { margin: 0 0 1.8em; max-width: 36em; font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
.cm-missing { margin: 0 0 1.8em; font-size: var(--t-ui); color: var(--ink-2); }

/* photos ease in 4% inside their frame on hover, as everywhere on the site */
.cm .hp-ph img { transition: transform .7s cubic-bezier(.22,1,.36,1); }
.cm-duo__one:hover .hp-ph img, .cm-duo__one:focus-visible .hp-ph img, .cm-pair:hover .hp-ph img, .cm-pair:focus-visible .hp-ph img, .cm-phead:has(a:hover) .hp-ph img { transform: scale(1.04); }

/* empty state: the prompt, three quiet slots, then Popular comparisons */
.cm-ghosts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; }
.cm-ghost { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8em; min-height: 9.5em; padding: 1.4em 1em; border: 1px dashed var(--line-2); border-radius: 1.4em; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--t-ui); font-weight: 500; cursor: pointer; transition: color .25s ease, border-color .25s ease; }
.cm-ghost:hover, .cm-ghost:focus-visible { color: var(--acc-text); border-color: currentColor; }
.cm-plus { display: inline-grid; place-items: center; width: 2.75em; height: 2.75em; border-radius: 50%; background: var(--ink); color: var(--bg); transition: background-color .25s ease, color .25s ease; }
.cm-plus svg { width: 1.1em; height: 1.1em; }
.cm-ghost:hover .cm-plus, .cm-ghost:focus-visible .cm-plus { background: #E85002; color: #fff; }

.cm-pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1em; margin: 0; padding: 0; list-style: none; }
.cm-pairs > li { display: flex; min-width: 0; }
.cm-pair { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1em; align-items: center; min-width: 0; padding: 1em .45em 1em 1em; color: var(--ink); }
.cm-pair__ph { display: flex; }
.cm-pair__ph .hp-ph { width: 3.2em; height: 3.2em; border-radius: 50%; box-shadow: 0 0 0 2px #fff; }
.cm-pair__ph .hp-ph + .hp-ph { margin-left: -1em; }
.cm-pair__t { min-width: 0; }
.cm-pair__name { display: block; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.2; letter-spacing: -0.02em; transition: color .25s ease; }
.cm-pair__name i { font-style: normal; font-weight: 400; color: var(--ink-3); }
.cm-pair__price { display: block; margin-top: .3em; font-size: var(--t-meta); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cm-pair:hover .cm-pair__name, .cm-pair:focus-visible .cm-pair__name { color: var(--acc-text); }

/* ---------- the table ---------- */
.cm-table { position: relative; }
.cm-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1em 2em; margin-bottom: 1.4em; }
.cm-tools__set { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1.8em; }
.cm-tools__hint { margin: 0; font-size: var(--t-ui); color: var(--ink-2); }
.cm-legend { display: inline-flex; align-items: center; gap: .6em; font-size: var(--t-meta); color: var(--ink-3); }
.cm-dot { width: .45em; height: .45em; border-radius: 50%; background: #E85002; }

/* the switch: a ringed track when off, ember when on (orange = active) */
.cm-switch { display: inline-flex; align-items: center; gap: .75em; min-height: 2.75em; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--t-ui); font-weight: 500; cursor: pointer; }
.cm-switch:disabled { color: var(--ink-3); cursor: default; }
.cm-switch__track { position: relative; flex: none; width: 2.6em; height: 1.5em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink-3); transition: background-color .25s ease, box-shadow .25s ease; }
.cm-switch__knob { position: absolute; top: .3em; left: .32em; width: .9em; height: .9em; border-radius: 50%; background: var(--ink-3); transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .25s ease; }
.cm-switch[aria-checked="true"] .cm-switch__track { background: #C8470A; box-shadow: none; }
.cm-switch[aria-checked="true"] .cm-switch__knob { background: #fff; transform: translateX(1.06em); }
.cm-switch:focus-visible { outline: 0; }
.cm-switch:focus-visible .cm-switch__track { outline: 2px solid var(--acc); outline-offset: 3px; }

/* the slim phone bar: sticks to the top while the rows scroll. On the tool it only appears once the photo heads have gone by */
.cm-bar { position: sticky; top: 0; z-index: 5; margin: 0 calc(-1 * var(--cm-bleed)); }
/* the bar's surface: the width of the table at rest, the full width of the screen once it sticks (the sheet clips the overhang) */
.cm-bar::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--cm-bleed); right: var(--cm-bleed); background: var(--bg); border-bottom: 1px solid var(--line); }
.cm-bar.is-on::before { left: -100vmax; right: -100vmax; box-shadow: 0 14px 28px -22px rgba(0,0,0,.45); }
.cm-bar__track { overflow: hidden; padding: 0 var(--cm-bleed); }
.cm-bar__row { height: var(--cm-bar); align-items: center; }
.cm-bar--float { height: var(--cm-bar); margin-bottom: calc(-1 * var(--cm-bar)); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s; }
.cm-bar--float.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }
.cm-bar__lab { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-bar__ph { display: flex; align-items: center; gap: .7em; min-width: 0; }
.cm-bar__img { width: 2.4em; height: 2.4em; flex: none; border-radius: .65em; }
.cm-bar__t { min-width: 0; }
.cm-bar__name { display: block; font-size: var(--t-ui); font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-bar__price { display: block; font-size: var(--t-meta); line-height: 1.3; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* rows: the scroller only scrolls when the columns no longer fit (three phones on a phone) */
.cm-scroll { margin: 0 calc(-1 * var(--cm-bleed)); padding: 0 var(--cm-bleed) .5em; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
/* when the columns scroll, the edge with more to see fades out: the hint that there is more */
.cm-scroll, .cm-bar__track { --cm-fl: #000; --cm-fr: #000; }
.cm-scroll.has-left, .cm-bar__track.has-left { --cm-fl: transparent; }
.cm-scroll.has-right, .cm-bar__track.has-right { --cm-fr: transparent; }
.cm-scroll.has-left, .cm-scroll.has-right, .cm-bar__track.has-left, .cm-bar__track.has-right { -webkit-mask-image: linear-gradient(90deg, var(--cm-fl) 0, #000 var(--cm-bleed), #000 calc(100% - 2.5em), var(--cm-fr) 100%); mask-image: linear-gradient(90deg, var(--cm-fl) 0, #000 var(--cm-bleed), #000 calc(100% - 2.5em), var(--cm-fr) 100%); }
.cm-grid { display: grid; grid-template-columns: var(--cm-lab) repeat(var(--n), minmax(0, 1fr)); column-gap: var(--cm-gap); }
.cm-wide { min-width: calc(var(--cm-lab) + var(--n) * (var(--cm-col) + var(--cm-gap))); }

.cm-heads { align-items: start; padding: .4em 0 2em; }
.cm-phead { position: relative; min-width: 0; }
.cm-phead__media { position: relative; max-width: 17em; }
.cm-phead__ph { display: block; border-radius: 1.3em; }
.cm-phead .hp-ph { aspect-ratio: 4 / 3; border-radius: 1.3em; }
/* remove: a small white circle on the photo, inside a bigger invisible target */
.cm-remove { position: absolute; top: .25em; right: .25em; z-index: 1; display: grid; place-items: center; width: 3em; height: 3em; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #000; cursor: pointer; }
.cm-remove__c { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: background-color .25s ease, color .25s ease; }
.cm-remove svg { width: .95em; height: .95em; }
.cm-remove:hover .cm-remove__c, .cm-remove:focus-visible .cm-remove__c { background: #E85002; color: #fff; }
.cm-remove:focus-visible { outline: 0; }
.cm-remove:focus-visible .cm-remove__c { outline: 2px solid var(--ink); outline-offset: 2px; }
.cm-phead__brand { display: block; margin-top: 1.1em; font-size: var(--t-label); font-weight: 600; letter-spacing: .02em; color: var(--ink-3); }
.cm-phead__name { display: block; margin-top: .4em; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.15; letter-spacing: -0.02em; transition: color .25s ease; }
.cm-phead:has(a:hover) .cm-phead__name, .cm-phead__name:focus-visible { color: var(--acc-text); }
.cm-phead__price { display: block; margin-top: .45em; font-size: var(--t-ui); font-weight: 600; font-variant-numeric: tabular-nums; }
.cm-phead__tag { margin-top: .7em; }

.cm-group { margin-top: 2.8em; }
.cm-heads + .cm-group { margin-top: .6em; }
.cm-table--matchup .cm-wide > .cm-group:first-child { margin-top: 1.6em; }
.cm-group__h { position: sticky; left: 0; width: fit-content; margin: 0 0 .8em; font-family: var(--display); font-weight: 500; font-size: var(--t-card-title); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.cm-row { padding: 1em 0; border-top: 1px solid var(--line); align-items: baseline; }
.cm-lab { min-width: 0; font-size: var(--t-ui); line-height: 1.45; color: var(--ink-2); }
.cm-cell { position: relative; min-width: 0; font-size: var(--t-ui); line-height: 1.45; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.cm-cell.is-best { font-weight: 600; }
.cm-cell.is-best::before { content: ""; position: absolute; top: .52em; left: -1em; width: .42em; height: .42em; border-radius: 50%; background: #E85002; }
.cm-none { font-weight: 400; color: var(--ink-3); }
.cm-vars { display: grid; gap: .3em; }
.cm-var { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: .8em; }
.cm-var b { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cm-table.is-diff [data-same="1"] { display: none; }
.cm-table.is-loading, #cm-results.is-loading { opacity: .55; transition: opacity .2s ease; }

/* ---------- matchup: verdict, versions, ways on ---------- */
.cm-verdict__body { max-width: 46em; }
.cm-verdict__lead { margin: 0; font-family: var(--display); font-weight: 500; font-size: calc(var(--t-h2) * .78); line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }
.cm-verdict__list { margin: 1.6em 0 0; padding: 0; list-style: none; }
.cm-verdict__list li { position: relative; padding: .95em 0 .95em 1.5em; border-top: 1px solid var(--line); font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); text-wrap: pretty; }
.cm-verdict__list li::before { content: ""; position: absolute; left: .25em; top: 1.65em; width: .38em; height: .38em; border-radius: 50%; background: var(--ink-3); }
.cm-verdict__pick { margin-top: 1.8em; padding: 1.4em 1.6em 1.5em; }
.cm-verdict__pick p { margin: 0; font-size: var(--t-lead); line-height: 1.5; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.cm-verdict__note { margin: 1.2em 0 0; font-size: var(--t-meta); line-height: 1.5; color: var(--ink-3); }

.cm-vers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5em var(--cm-gap); max-width: 56em; }
.cm-vers__name { display: block; padding-bottom: .7em; font-size: var(--t-ui); font-weight: 600; }
.cm-vers__list { margin: 0; padding: 0; list-style: none; }
.cm-vers__list .cm-var { padding: .8em 0; border-top: 1px solid var(--line); font-size: var(--t-ui); }
.cm-vers__none { margin: 0; padding: .8em 0; border-top: 1px solid var(--line); font-size: var(--t-ui); color: var(--ink-2); }
.cm-vers__note { margin: 1.4em 0 0; font-size: var(--t-meta); color: var(--ink-3); }

.cm-actions { display: flex; flex-wrap: wrap; gap: .7em; }
.cm-sec.cm-actions { margin-top: 3.4em; }

/* wide screens: section headings sit in the label column, so everything to their right starts on the phone columns' line */
@media (min-width: 981px) {
  .cm-rail { display: grid; grid-template-columns: var(--cm-lab) minmax(0, 1fr); column-gap: var(--cm-gap); align-items: start; }
  .cm-rail > .cm-head, .cm-tools--head > .cm-head { margin: 0; padding-right: .6em; }
  .cm-tools--head { display: grid; grid-template-columns: var(--cm-lab) minmax(0, 1fr); column-gap: var(--cm-gap); align-items: end; margin-bottom: 2em; }
  .cm-vers.cm-rail { grid-template-columns: var(--cm-lab) repeat(2, minmax(0, 1fr)); }
  .cm-vers.cm-rail .cm-vers__grid { display: contents; }
  .cm-vers.cm-rail .cm-vers__note { grid-column: 2 / -1; }
  .cm-verdict__body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 3em; align-items: start; max-width: none; }
  .cm-verdict__lead { grid-column: 1 / -1; max-width: 30em; }
  .cm-verdict__list, .cm-verdict__note { grid-column: 1; }
  .cm-verdict__pick { grid-column: 2; grid-row: 2 / span 2; margin-top: 1.6em; position: sticky; top: 2em; }
  .cm-verdict__body.is-solo .cm-verdict__pick { grid-column: 1; grid-row: auto; position: static; }
}
@media (max-width: 980px) {
  .cm-tools--head { display: block; }
  .cm-tools--head > .cm-head { margin-bottom: 1.4em; }
}

/* ---------- dark settings: paper becomes a quiet raised surface ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cm .hp-paper { background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); }
  :root:not([data-theme="light"]) .cm-pair__ph .hp-ph { box-shadow: 0 0 0 2px var(--bg-2); }
}

/* ---------- responsive ---------- */
@media (max-width: 1300px) {
  .cm { --cm-lab: 12em; }
  .cm-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .cm { font-size: 15px; --cm-lab: 10em; --cm-gap: 1.2em; }
  .cm-find { max-width: none; }
  .cm-sec + .cm-sec { margin-top: 3.8em; }
}
@media (min-width: 641px) and (max-width: 980px) {
  .cm-duo { max-width: 30em; }
}
/* phones: each label sits above its values; with three phones the columns scroll sideways, labels stay put */
@media (max-width: 640px) {
  .cm { --cm-gap: 1em; --cm-col: 8.6em; --cm-bleed: 1em; }
  .cm-grid { grid-template-columns: repeat(var(--n), minmax(var(--cm-col), 1fr)); }
  .cm-wide { min-width: calc(var(--n) * var(--cm-col) + (var(--n) - 1) * var(--cm-gap)); }
  .cm-row { padding: .85em 0; }
  .cm-row > .cm-lab { grid-column: 1 / -1; position: sticky; left: 0; width: fit-content; max-width: calc(100vw - 2 * var(--page-x)); margin-bottom: .25em; font-size: var(--t-meta); color: var(--ink-3); }
  .cm-heads > .cm-lab, .cm-bar__lab { display: none; }
  .cm-cell.is-best::before { left: -.78em; }
  .cm-heads { padding-bottom: 1.6em; }
  .cm-phead .hp-ph { border-radius: 1em; }
  .cm-phead__name { font-size: 16px; }
  .cm-remove { top: 0; right: 0; }
  .cm-tools { margin-bottom: 1em; }
  .cm-tools__verdict { order: -1; }
  .cm-ghosts { gap: .6em; }
  .cm-ghost { min-height: 7.5em; padding: 1.2em .5em; gap: .6em; font-size: var(--t-meta); text-align: center; }
  .cm-pairs { grid-template-columns: minmax(0, 1fr); }
  .cm-vers__grid { gap: 1.2em 1em; }
  .cm-duo { gap: .8em; }
  .cm-verdict__pick { padding: 1.2em 1.25em 1.3em; }
}
@media (max-width: 400px) {
  .cm-find__box { padding-left: 1.1em; padding-right: 1.1em; }
  .cm-find__hint { margin-left: 1.1em; }
}

/* touch screens: every control at least 44px to hit */
@media (pointer: coarse) {
  .cm-remove { width: 48px; height: 48px; }
  .cm-switch { min-height: 44px; }
  .cm-opt { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .cm .hp-ph img, .cm-switch__knob, .cm-switch__track, .cm-bar--float { transition: none; }
  .cm-duo__one:hover .hp-ph img, .cm-pair:hover .hp-ph img, .cm-phead:has(a:hover) .hp-ph img { transform: none; }
}