/* ══════════════════════════════════════════════════════════════════════════
   /compare/{slug} — the components only this page needs

   Scoped `.v2x.atd.atdx.cpd`, one class deeper than public-atd-detail.css, so a
   compare-only rule always out-cascades the shared rule it refines and can
   never leak sideways onto the other nine module pages.

   Everything else — hero, section rail, tone ramp, sidebar cards, the feature
   matrix, prose, related grid, closing band — is the shared kit. What is left
   is the one thing no other page in the system has: TWO SUBJECTS. A versus page
   has to state both of them at once, keep them visually equal, and then let a
   verdict break the tie. That is the §CPD-VS head, the §CPD-WIN rows and the
   §CPD-VOTE control below, and nothing else.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── §CPD-VS) The versus head ───────────────────────────────────────────
   Two identical panels either side of a medallion. `1fr auto 1fr` rather than
   flex, because the two panels MUST be the same width whatever their names are
   — an unequal versus head reads as a verdict before the reader has been given
   one. Below 680px the medallion becomes a full-width divider and the panels
   stack; there is no width at which they sit side by side and unequal. */
.v2x.atd.atdx.cpd .cpd-vs{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:14px;
}
.v2x.atd.atdx.cpd .cpd-tool{
  display:flex; flex-direction:column; gap:11px;
  padding:18px; border-radius:16px;
  background-color:var(--t-bg); border:1px solid var(--t-line);
}
.v2x.atd.atdx.cpd .cpd-tool-h{ display:flex; align-items:center; gap:12px; }
.v2x.atd.atdx.cpd .cpd-tool-lg{
  flex:0 0 auto; width:52px; height:52px; border-radius:14px; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  background-color:#fff; border:1px solid var(--t-line);
  font-weight:800; font-size:1.2rem; line-height:1; color:var(--t-ink);
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-tool-lg{ background-color:rgba(255,255,255,.06); }
.v2x.atd.atdx.cpd .cpd-tool-lg img{ width:100%; height:100%; object-fit:contain; display:block; }
.v2x.atd.atdx.cpd .cpd-tool-nm{ font-size:1.12rem; font-weight:800; line-height:1.25; color:var(--ink); }
.v2x.atd.atdx.cpd .cpd-tool-sub{ font-size:.82rem; line-height:1.45; color:var(--muted); }
.v2x.atd.atdx.cpd .cpd-tool-m{ display:flex; flex-wrap:wrap; gap:6px; }
.v2x.atd.atdx.cpd .cpd-tool-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:4px; }

/* The medallion. Its column is `auto`, so it never steals width from a panel. */
.v2x.atd.atdx.cpd .cpd-vs-mid{
  align-self:center; display:flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  font-size:.82rem; font-weight:800; letter-spacing:.04em; color:#fff;
  background-image:linear-gradient(140deg, #4C8DF2 0%, #8B5CF6 100%);
  background-color:#4C8DF2;
  box-shadow:0 6px 16px -6px rgba(76,141,242,.7);
}

/* ── §CPD-SCORE) The score line ─────────────────────────────────────────
   One bar, split at the ratio of the two scores, with each number sitting on
   its own side. Deliberately NOT two separate bars: the question the page
   answers is which is higher, and two bars make that a subtraction. */
/* The feature-wins row carries BRAND MARKS here, not just a tick, so its plates
   run bigger than the 22px the shared .atdx-check kit uses. Scoped to .cpd: the
   other eight pages on that kit show glyphs only and are left alone.

   NOTE on "full": a mark fills the plate only as far as its own artwork does,
   so a plate that looks under-filled is an ASSET problem, not a CSS one — and
   the fix is to re-crop the asset, never to swap in `cover`, which would crop a
   wide wordmark. google-gemini.png was the standing example: a 256px canvas
   carrying a 16px fully-transparent frame on all four sides, so the mark landed
   at 87.5% however large the plate got, next to a full-bleed claude.png. Cropped
   to its alpha bounding box 2026-09-03 — 224x224, content 100%, no resampling so
   no edge halo (backup `google-gemini.png.pre-crop-20260903`). Check any new
   brand mark the same way before blaming the plate. */
.v2x.atd.atdx.cpd .atdx-check-ic{ width:36px; height:36px; border-radius:11px; margin-top:0; }
.v2x.atd.atdx.cpd .atdx-check{ align-items:center; }

/* 22px, not 4px. The card grid above sets `gap:14px` between its own columns,
   so anything under that read as part of the grid rather than a band beneath
   it — the score numbers looked welded to the bottom of the two cards. Clearing
   the grid gap is what separates them. One rule, no responsive twin, so this
   holds at every breakpoint. */
.v2x.atd.atdx.cpd .cpd-score{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.v2x.atd.atdx.cpd .cpd-score-n{
  flex:0 0 auto; min-width:52px; font-size:1.35rem; font-weight:800; line-height:1; letter-spacing:-.02em;
}
.v2x.atd.atdx.cpd .cpd-score-n.is-a{ color:#2060C0; text-align:start; }
.v2x.atd.atdx.cpd .cpd-score-n.is-b{ color:#5B33C4; text-align:end; }
body.theme-dark .v2x.atd.atdx.cpd .cpd-score-n.is-a{ color:#8CBEFA; }
body.theme-dark .v2x.atd.atdx.cpd .cpd-score-n.is-b{ color:#BFA6FB; }
.v2x.atd.atdx.cpd .cpd-score-bar{
  flex:1 1 auto; display:flex; height:10px; border-radius:999px; overflow:hidden;
  background-color:#EEF1F6;
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-score-bar{ background-color:#232734; }
.v2x.atd.atdx.cpd .cpd-score-bar .a{ background-image:linear-gradient(90deg,#4C8DF2,#2060C0); }
.v2x.atd.atdx.cpd .cpd-score-bar .b{ background-image:linear-gradient(90deg,#7E51E8,#8B5CF6); }
.v2x.atd.atdx.cpd .cpd-score-cap{
  margin:8px 0 0; font-size:.78rem; line-height:1.5; color:var(--muted); text-align:center;
}

/* ── §CPD-WIN) Category winners ─────────────────────────────────────────
   Each row is a claim: category, who took it, and why. The reason is what makes
   the row worth reading, so it gets the same weight as the winner's name and is
   never truncated. A tie keeps its own neutral treatment rather than being
   dropped — "neither" is an answer. */
.v2x.atd.atdx.cpd .cpd-wins{ display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; }
.v2x.atd.atdx.cpd .cpd-win{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:6px 14px;
  padding:14px 16px; border-radius:14px;
  background-color:var(--t-bg); border:1px solid var(--t-line);
}
.v2x.atd.atdx.cpd .cpd-win-k{
  grid-column:1; font-size:.72rem; font-weight:750; letter-spacing:.07em;
  text-transform:uppercase; color:var(--t-ink);
}
.v2x.atd.atdx.cpd .cpd-win-w{
  grid-column:2; grid-row:1 / span 2; align-self:center;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px; white-space:nowrap;
  font-size:.8rem; font-weight:750; color:#fff; background-color:var(--t-1p);
}
.v2x.atd.atdx.cpd .cpd-win-w.is-tie{
  color:var(--muted); background-color:rgba(100,116,139,.14); border:1px solid rgba(100,116,139,.24);
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-win-w.is-tie{
  color:var(--dk-text-3,#9AA0AB); background-color:rgba(148,163,184,.18); border-color:rgba(148,163,184,.26);
}
.v2x.atd.atdx.cpd .cpd-win-r{ grid-column:1; font-size:.88rem; line-height:1.6; color:var(--ink); }

/* ── §CPD-VOTE) Which would you pick — the reader poll ──────────────────
   REBUILT 2026-09-03, then rebuilt again the same day onto the HOUSE CARD.

   The recipe is `.aits-cat` — the "All Free AI Tools" card on /tools — copied
   part for part so this control reads as the same family: 22px radius on a
   white card, a head with a 46px tile beside the title, a DASHED rule under
   the head, a dot-prefixed count pill, a top shine bar and a top-fade wash
   that both arrive on hover, a -5px lift, and an action pill that fills with
   the tone gradient. Two subjects instead of a list of tools, and the pill is
   the vote rather than "View all" — everything else is the house's.

   Both hues are the house's own first two — `#3680ED / #60A4F5` and
   `#7048E8 / #A78BFA` — which are also the blue and violet the versus head
   and the score bar already run on. Nothing new was introduced.

   TWO DELIBERATE DEPARTURES, both measured:
   · The house writes its tints with `color-mix(in oklab, var(--cc) …)` plus a
     `@supports not` fallback, because it cycles eight hues and has no rgb
     triplet for them. There are two hues here and `--cc-rgb` carries them, so
     every tint is a plain `rgba()`. Same result, nothing to fall back to.
   · `.aits-cat-more` inks its label `var(--cc)`, and `#3680ED` on white is
     3.84:1 — under the bar for a 13px label. This uses `--cc-ink` instead
     (`#2463C8` 5.69, `#5A2FD0` 7.63). The FILLED pill runs a ramp measured for
     white: blue `#2F72DA` 4.63 → `#1E56B0` 6.97, violet `#7048E8` 5.55 →
     `#5A2FD0` 7.63. Do not lighten either lightest stop.

   The card never floods with colour — the NAME is always ink on white, so
   there is no state in which the label has to fight its own background. What
   changes when you vote is the pill, the border, the wash and the shine bar.

   ⚠️ THE MARKUP IS PART OF THE DESIGN, as in §UPVOTE: `.cpd-opt-ic >
   .cpd-opt-track > thumb, thumb, check` is three slots in a one-slot clip.
   Hover slides it one, `.is-on` two. Ship this CSS without that Blade and the
   pill shows three stacked glyphs.
   ⚠️ `wire:loading.attr="disabled"` renders a REAL `disabled` attribute, so
   the busy state keys on `:disabled` — never `[wire\:loading]`, which matches
   nothing in Livewire 2.
   ⚠️ Every hover rule lives inside `@media (hover:hover)`, or a tap on a phone
   leaves the lifted state stuck until the next tap lands elsewhere. */
.v2x.atd.atdx.cpd .cpd-poll{
  --cpd-slot:18px;
  display:flex; flex-direction:column; gap:16px;
}

/* Head — the promise on the left, the running tally on the right. The tally
   reads the section's own §TONE6 tone (`.atd-t5`), which already has a dark
   twin, so it can never disagree with the heading plate above it. */
.v2x.atd.atdx.cpd .cpd-poll-top{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:8px 14px;
}
.v2x.atd.atdx.cpd .cpd-poll-lede{
  margin:0; flex:1 1 240px; min-width:0;
  font-size:.84rem; line-height:1.55; color:var(--muted);
}
.v2x.atd.atdx.cpd .cpd-poll-tally{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:999px; white-space:nowrap;
  font-size:.76rem; font-weight:750;
  color:var(--t-ink); background-color:var(--t-bg); border:1px solid var(--t-line);
}
.v2x.atd.atdx.cpd .cpd-poll-tally svg{ flex:0 0 auto; opacity:.85; }

/* Two cards either side of a medallion. `minmax(0,1fr) auto minmax(0,1fr)`
   keeps them identical whatever the names are — an unequal poll reads as a
   verdict before the reader has cast anything. */
.v2x.atd.atdx.cpd .cpd-poll-opts{
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch; gap:16px;
}
.v2x.atd.atdx.cpd .cpd-poll-vs{
  align-self:center; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  font-size:.68rem; font-weight:800; letter-spacing:.06em; line-height:1;
  color:var(--muted); background-color:#fff; border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(15,23,42,.05);
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-poll-vs{
  color:var(--dk-text-3,#9AA0AB);
  background-color:var(--dk-surface-3,#1D1D22); border-color:var(--dk-line-solid,#2C2C31);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* ── The card. `.aits-cat`, part for part. ───────────────────────────── */
.v2x.atd.atdx.cpd .cpd-opt{
  --cc:#3680ED; --cc2:#60A4F5; --cc-rgb:54,128,237; --cc-ink:#2463C8;
  --cc-on1:#2F72DA; --cc-on2:#1E56B0;
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; align-items:stretch;
  width:100%; margin:0; padding:22px 20px 20px; text-align:start;
  border-radius:22px; cursor:pointer; appearance:none;
  color:var(--ink); background-color:#fff; border:1px solid #EEF0F3;
  box-shadow:0 1px 2px rgba(15,23,42,.03), 0 4px 12px rgba(15,23,42,.04);
  transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease,
             border-color .2s ease, background-color .2s ease;
}
.v2x.atd.atdx.cpd .cpd-opt.is-b{
  --cc:#7048E8; --cc2:#A78BFA; --cc-rgb:112,72,232; --cc-ink:#5A2FD0;
  --cc-on1:#7048E8; --cc-on2:#5A2FD0;
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-opt{
  background-color:var(--dk-surface-2,#17171B);
  border-color:var(--dk-line-solid,#2C2C31);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
}

/* The top-fade wash and the shine bar, both idle until something happens to
   the card — hover, or a vote. `z-index:-1` under `isolation:isolate` puts the
   wash above the card's own background and below every label on it. */
.v2x.atd.atdx.cpd .cpd-opt::before{
  content:""; position:absolute; z-index:-1; left:0; right:0; top:0; height:96px;
  background-image:linear-gradient(180deg,rgba(var(--cc-rgb),.07) 0%,rgba(var(--cc-rgb),0) 100%);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.v2x.atd.atdx.cpd .cpd-opt::after{
  content:""; position:absolute; z-index:2; left:20px; right:20px; top:0; height:2px;
  border-radius:0 0 2px 2px;
  background-image:linear-gradient(90deg,rgba(var(--cc-rgb),0),var(--cc),var(--cc2),rgba(var(--cc-rgb),0));
  opacity:0; transform:translateY(-2px);
  transition:opacity .25s ease, transform .25s ease;
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-opt::before{
  background-image:linear-gradient(180deg,rgba(var(--cc-rgb),.16) 0%,rgba(var(--cc-rgb),0) 100%);
}

/* Head — tile, name, chips, then the house's dashed rule. */
.v2x.atd.atdx.cpd .cpd-opt-head{
  display:flex; align-items:center; gap:14px; min-width:0;
  margin-bottom:16px; padding-bottom:16px;
  border-bottom:1px dashed var(--line);
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-opt-head{ border-bottom-color:var(--dk-line-solid,#2C2C31); }

/* The tile is the house's 46px/13px plate, but it carries a real LOGO rather
   than a glyph, so it is white with a real border and the mark goes edge to
   edge — the plate keeps an edge outside the content box, which is exactly the
   condition under which a mark is allowed to fill (see the logo-plate rule).
   `overflow:hidden` clips a square mark to the radius. */
.v2x.atd.atdx.cpd .cpd-opt-lg{
  flex:0 0 auto; width:46px; height:46px; border-radius:13px; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.1rem; font-weight:800; line-height:1; color:var(--cc-ink);
  background-color:#fff; border:1px solid rgba(var(--cc-rgb),.30);
  box-shadow:0 8px 18px -8px rgba(var(--cc-rgb),.34), inset 0 1px 0 rgba(255,255,255,.24);
  transition:transform .3s ease, box-shadow .3s ease, border-color .2s ease;
}
.v2x.atd.atdx.cpd .cpd-opt-lg img{
  width:100%; height:100%; object-fit:contain; display:block;
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-opt-lg{
  background-color:rgba(255,255,255,.94); border-color:rgba(var(--cc-rgb),.42);
}

.v2x.atd.atdx.cpd .cpd-opt-hd{ min-width:0; display:flex; flex-direction:column; gap:6px; }
/* `overflow-wrap:anywhere` — a long tool name wraps to a second line rather
   than clipping. Nothing in this control is allowed to truncate. */
.v2x.atd.atdx.cpd .cpd-opt-nm{
  font-size:1.02rem; font-weight:800; line-height:1.25; letter-spacing:-.01em;
  color:var(--ink); overflow-wrap:anywhere; hyphens:none;
}
.v2x.atd.atdx.cpd .cpd-opt-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; }

/* The house count pill — but WITHOUT the leading dot. `.aits-cat-count` marks
   its number with a 6px dot; here the pill sits an inch from a 46px brand tile
   and a coloured bar, and a third coloured mark on the same line was one too
   many. Padding is even because there is no dot slot to displace. */
.v2x.atd.atdx.cpd .cpd-opt-chip{
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  padding:3px 10px; border-radius:99px;
  font-size:.69rem; font-weight:800; letter-spacing:.02em;
  color:var(--cc-ink);
  background-color:rgba(var(--cc-rgb),.10); border:1px solid rgba(var(--cc-rgb),.22);
}
.v2x.atd.atdx.cpd .cpd-opt-chip.is-flag{
  text-transform:uppercase; letter-spacing:.045em;
  color:#fff; border-color:transparent;
  background-color:var(--cc-on1);
  background-image:linear-gradient(135deg,var(--cc-on1),var(--cc-on2));
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-opt-chip{
  color:var(--cc2); background-color:rgba(var(--cc-rgb),.18); border-color:rgba(var(--cc-rgb),.34);
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-opt-chip.is-flag{ color:#fff; border-color:transparent; }

/* The share. One bar per card rather than one split strip for the pair: each
   card then states its own result where its own name is, and there is no
   legend to carry a colour back and forth across. */
.v2x.atd.atdx.cpd .cpd-opt-share{
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.v2x.atd.atdx.cpd .cpd-opt-bar{
  flex:1 1 auto; min-width:0; height:8px; border-radius:999px; overflow:hidden;
  background-color:#EDF1F7; box-shadow:inset 0 1px 2px rgba(15,23,42,.07);
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-opt-bar{
  background-color:#232734; box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
}
.v2x.atd.atdx.cpd .cpd-opt-bar > span{
  display:block; height:100%; width:var(--pct,0%); border-radius:999px;
  background-image:linear-gradient(90deg,var(--cc2),var(--cc));
  transition:width .65s cubic-bezier(.22,1,.36,1);
}
.v2x.atd.atdx.cpd .cpd-opt-pct{
  flex:0 0 auto; font-size:.98rem; font-weight:800; line-height:1;
  color:var(--cc-ink); font-variant-numeric:tabular-nums;
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-opt-pct{ color:var(--cc2); }

/* The action pill — `.aits-cat-more`, including the way it fills with the tone
   gradient. In the house that fill is the hover; here it is also what a cast
   vote looks like, which is why the ramp had to be measured for white. */
.v2x.atd.atdx.cpd .cpd-opt-act{
  align-self:flex-start; margin-top:auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:10px;
  font-size:.82rem; font-weight:800; letter-spacing:-.005em; line-height:1;
  color:var(--cc-ink);
  background-color:rgba(var(--cc-rgb),.10); border:1px solid rgba(var(--cc-rgb),.18);
  transition:background-color .15s ease, background-image .15s ease, color .15s ease,
             border-color .15s ease, transform .15s ease, box-shadow .15s ease, gap .15s ease;
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-opt-act{
  color:var(--cc2); background-color:rgba(var(--cc-rgb),.16); border-color:rgba(var(--cc-rgb),.30);
}

/* Three-slot icon track. See the ⚠️ above — the Blade ships three glyphs. */
.v2x.atd.atdx.cpd .cpd-opt-ic{
  position:relative; flex:0 0 auto; display:block; line-height:0;
  width:var(--cpd-slot); height:var(--cpd-slot); overflow:hidden;
}
.v2x.atd.atdx.cpd .cpd-opt-track{ display:block; transition:transform .3s cubic-bezier(.2,.7,.3,1); }
.v2x.atd.atdx.cpd .cpd-opt-track > svg{ display:block; width:var(--cpd-slot); height:var(--cpd-slot); }
.v2x.atd.atdx.cpd .cpd-opt-spin{
  /* Livewire forces display:inline-block on a wire:loading element, so the
     baseline gap is killed on the clip (line-height:0) and the spinner is
     pinned to its top rather than to a baseline that no longer exists. */
  display:block; vertical-align:top;
  width:var(--cpd-slot); height:var(--cpd-slot); border-radius:50%;
  border:2px solid rgba(var(--cc-rgb),.30); border-top-color:var(--cc-ink);
  animation:cpd-spin .7s linear infinite;
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-opt-spin{ border-top-color:var(--cc2); }
@keyframes cpd-spin{ to{ transform:rotate(360deg); } }

/* Leading — the shine bar and the wash come up on the side that is ahead, so
   the standing is legible before anything is hovered. Only ever on a side the
   reader has NOT picked; once you hold a pick, that is the only badge that
   matters. */
.v2x.atd.atdx.cpd .cpd-opt.is-lead{ border-color:rgba(var(--cc-rgb),.30); }
.v2x.atd.atdx.cpd .cpd-opt.is-lead::after{ opacity:1; transform:translateY(0); }
.v2x.atd.atdx.cpd .cpd-opt.is-lead::before{ opacity:.7; }

/* Cast. The card keeps its white ground — the NAME is never asked to sit on a
   colour — and the pill, the border, the wash and the shine bar carry it. */
.v2x.atd.atdx.cpd .cpd-opt.is-on{
  border-color:rgba(var(--cc-rgb),.45);
  box-shadow:0 1px 2px rgba(15,23,42,.03), 0 10px 26px -14px rgba(var(--cc-rgb),.55);
}
.v2x.atd.atdx.cpd .cpd-opt.is-on::before{ opacity:1; }
.v2x.atd.atdx.cpd .cpd-opt.is-on::after{ opacity:1; transform:translateY(0); }
.v2x.atd.atdx.cpd .cpd-opt.is-on .cpd-opt-lg{ border-color:rgba(var(--cc-rgb),.55); }
.v2x.atd.atdx.cpd .cpd-opt.is-on .cpd-opt-act{
  color:#fff; border-color:transparent;
  background-color:var(--cc-on1);
  background-image:linear-gradient(135deg,var(--cc-on1),var(--cc-on2));
  box-shadow:0 8px 18px -6px rgba(var(--cc-rgb),.45);
}
.v2x.atd.atdx.cpd .cpd-opt.is-on .cpd-opt-spin{
  border-color:rgba(255,255,255,.38); border-top-color:#fff;
}
.v2x.atd.atdx.cpd .cpd-opt.is-on .cpd-opt-track{ transform:translateY(calc(var(--cpd-slot) * -2)); }
body.theme-dark .v2x.atd.atdx.cpd .cpd-opt.is-on{
  border-color:rgba(var(--cc-rgb),.55);
  box-shadow:0 10px 30px -14px rgba(var(--cc-rgb),.65), 0 1px 2px rgba(0,0,0,.4);
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-opt.is-on .cpd-opt-act{ color:#fff; }

/* Focus. Four wide `:focus-visible` rules on this site paint a `box-shadow`
   ring; this restates box-shadow at (0,6,0) so the card shows ONE ring — its
   own outline — rather than an outline sitting inside somebody else's glow. */
.v2x.atd.atdx.cpd .cpd-opt:focus-visible{
  outline:2px solid var(--cc-ink); outline-offset:3px;
  box-shadow:0 1px 2px rgba(15,23,42,.03), 0 10px 26px -14px rgba(var(--cc-rgb),.5);
}
body.theme-dark .v2x.atd.atdx.cpd .cpd-opt:focus-visible{ outline-color:var(--cc2); }

/* Busy — a real `disabled` attribute, so this is the selector that works. */
.v2x.atd.atdx.cpd .cpd-opt:disabled{ cursor:progress; opacity:.72; transform:none; }

@media (hover:hover){
  .v2x.atd.atdx.cpd .cpd-opt:hover:not(:disabled){
    transform:translateY(-5px);
    border-color:rgba(var(--cc-rgb),.32);
    box-shadow:0 22px 44px -14px rgba(var(--cc-rgb),.32), 0 8px 18px -8px rgba(15,23,42,.10);
  }
  .v2x.atd.atdx.cpd .cpd-opt:hover:not(:disabled)::before{ opacity:1; }
  .v2x.atd.atdx.cpd .cpd-opt:hover:not(:disabled)::after{ opacity:1; transform:translateY(0); }
  .v2x.atd.atdx.cpd .cpd-opt:hover:not(:disabled) .cpd-opt-lg{
    transform:scale(1.08) rotate(-5deg);
    box-shadow:0 10px 22px -8px rgba(var(--cc-rgb),.5), inset 0 1px 0 rgba(255,255,255,.24);
  }
  .v2x.atd.atdx.cpd .cpd-opt:hover:not(:disabled) .cpd-opt-act{
    color:#fff; border-color:transparent; gap:11px; transform:translateY(-2px);
    background-color:var(--cc-on1);
    background-image:linear-gradient(135deg,var(--cc-on1),var(--cc-on2));
    box-shadow:0 8px 18px -6px rgba(var(--cc-rgb),.5);
  }
  .v2x.atd.atdx.cpd .cpd-opt:hover:not(:disabled) .cpd-opt-spin{
    border-color:rgba(255,255,255,.38); border-top-color:#fff;
  }
  /* One slot up: the thumb leaves the clip and an identical one takes its
     place. `.is-on` overrides this to two slots — the check — further up. */
  .v2x.atd.atdx.cpd .cpd-opt:hover:not(:disabled) .cpd-opt-track{
    transform:translateY(calc(var(--cpd-slot) * -1));
  }
  .v2x.atd.atdx.cpd .cpd-opt.is-on:hover:not(:disabled) .cpd-opt-track{
    transform:translateY(calc(var(--cpd-slot) * -2));
  }
  .v2x.atd.atdx.cpd .cpd-opt:active:not(:disabled){ transform:translateY(-2px); }
  body.theme-dark .v2x.atd.atdx.cpd .cpd-opt:hover:not(:disabled){
    background-color:var(--dk-surface-3,#1D1D22);
    border-color:rgba(var(--cc-rgb),.45);
    box-shadow:0 18px 44px -14px rgba(var(--cc-rgb),.30), 0 12px 28px rgba(0,0,0,.55);
  }
}

.v2x.atd.atdx.cpd .cpd-poll-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;
  margin:0; font-size:.78rem; line-height:1.5; color:var(--muted);
}
.v2x.atd.atdx.cpd .cpd-poll-foot span{ display:inline-flex; align-items:center; gap:6px; min-width:0; }
.v2x.atd.atdx.cpd .cpd-poll-foot svg{ flex:0 0 auto; opacity:.8; }

/* One-shot pop on the card just pressed. Fired by the click only — a returning
   visitor must not be congratulated for a vote they cast last week. */
.v2x.atd.atdx.cpd .cpd-opt.just-voted{ animation:cpd-pop .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes cpd-pop{ 0%{ transform:translateY(0) scale(1); } 45%{ transform:translateY(-3px) scale(1.02); } 100%{ transform:translateY(0) scale(1); } }

@media (prefers-reduced-motion:reduce){
  .v2x.atd.atdx.cpd .cpd-opt,
  .v2x.atd.atdx.cpd .cpd-opt::before,
  .v2x.atd.atdx.cpd .cpd-opt::after,
  .v2x.atd.atdx.cpd .cpd-opt-lg,
  .v2x.atd.atdx.cpd .cpd-opt-act,
  .v2x.atd.atdx.cpd .cpd-opt-track,
  .v2x.atd.atdx.cpd .cpd-opt-bar > span{ transition:none; }
  .v2x.atd.atdx.cpd .cpd-opt.just-voted{ animation:none; }
  .v2x.atd.atdx.cpd .cpd-opt-spin{ animation-duration:1.6s; }
  .v2x.atd.atdx.cpd .cpd-opt:hover:not(:disabled){ transform:none; }
  .v2x.atd.atdx.cpd .cpd-opt:hover:not(:disabled) .cpd-opt-lg,
  .v2x.atd.atdx.cpd .cpd-opt:hover:not(:disabled) .cpd-opt-act{ transform:none; }
}

/* ── Breakpoints ────────────────────────────────────────────────────────
   The poll folds BEFORE the versus head does. Two house cards side by side
   start crowding at ~760px — they carry a 46px tile, a name, chips, a bar and
   a pill each — while the head survives to 680, so the two keep their own
   queries rather than sharing one number. */
@media (max-width:759.98px){
  .v2x.atd.atdx.cpd .cpd-poll-opts{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .v2x.atd.atdx.cpd .cpd-poll-vs{
    justify-self:stretch; width:auto; height:auto; padding:0;
    border:0; border-radius:0; background-color:transparent; box-shadow:none;
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px;
  }
  .v2x.atd.atdx.cpd .cpd-poll-vs::before,
  .v2x.atd.atdx.cpd .cpd-poll-vs::after{ content:""; height:1px; background-color:var(--line); }
  body.theme-dark .v2x.atd.atdx.cpd .cpd-poll-vs{
    background-color:transparent; border-color:transparent; box-shadow:none;
  }
  body.theme-dark .v2x.atd.atdx.cpd .cpd-poll-vs::before,
  body.theme-dark .v2x.atd.atdx.cpd .cpd-poll-vs::after{ background-color:var(--dk-line-solid,#2C2C31); }
}

@media (max-width:679.98px){
  .v2x.atd.atdx.cpd .cpd-vs{ grid-template-columns:1fr; }
  .v2x.atd.atdx.cpd .cpd-vs-mid{ justify-self:center; }
  .v2x.atd.atdx.cpd .cpd-win{ grid-template-columns:1fr; }
  .v2x.atd.atdx.cpd .cpd-win-w{ grid-column:1; grid-row:auto; justify-self:start; }
}

@media (max-width:419.98px){
  .v2x.atd.atdx.cpd .cpd-opt{ padding:18px 16px 16px; border-radius:18px; }
  .v2x.atd.atdx.cpd .cpd-opt::after{ left:16px; right:16px; }
  .v2x.atd.atdx.cpd .cpd-opt-head{ gap:12px; margin-bottom:14px; padding-bottom:14px; }
  .v2x.atd.atdx.cpd .cpd-opt-lg{ width:40px; height:40px; border-radius:11px; font-size:.98rem; }
  .v2x.atd.atdx.cpd .cpd-opt-nm{ font-size:.95rem; }
  .v2x.atd.atdx.cpd .cpd-opt-share{ margin-bottom:14px; }
  .v2x.atd.atdx.cpd .cpd-opt-act{ align-self:stretch; justify-content:center; }
  .v2x.atd.atdx.cpd .cpd-poll-lede{ flex:1 1 100%; }
}