/* ═══════════════════════════════════════════════════════════════════
   NPolls — poll list and poll detail.
   Built against the supplied reference. Where the reference invents a
   number (trend, days active, the sparkline), this uses the real thing:
   every vote carries a timestamp, so the trend and the 14-day series
   are measured rather than decorative.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────────── */
.poll-index-hero{ position:relative; padding:48px 0 34px; }
.pulse-rings{ position:absolute; top:38%; left:20%; transform:translate(-50%,-50%); pointer-events:none; z-index:0; }
.pulse-ring{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  border:1px solid var(--c1); border-radius:50%; opacity:0;
  animation:pulseExpand 4s ease-out infinite;
}
.pulse-ring:nth-child(2){ animation-delay:1.3s; }
.pulse-ring:nth-child(3){ animation-delay:2.6s; }
@keyframes pulseExpand{
  0%  { width:100px; height:100px; opacity:.5; border-color:var(--c1); }
  50% { border-color:var(--c5); }
  100%{ width:620px; height:620px; opacity:0; border-color:var(--c3); }
}
.poll-index-hero > *{ position:relative; z-index:1; }
.hero-kicker{
  display:flex; align-items:center; gap:9px; margin:0 0 20px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-2); font-weight:600;
}
/* The headline was set at 76px, which is poster scale — it pushed the
   polls themselves below the fold. Kept bold, brought down to a size
   a person reads rather than squints past. */
.hero-title{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  line-height:1.04; font-size:clamp(27px,3vw,40px); margin:0 0 14px;
  text-wrap:balance;
}
.hero-sub{ color:var(--txt-2); font-size:clamp(14px,1.1vw,15.5px); max-width:48ch; margin:0 0 30px; line-height:1.65; }

/* ── Stat tiles ─────────────────────────────────────────────────── */
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.stat-tile{
  position:relative; overflow:hidden;
  background:var(--glass); border:1px solid var(--edge); border-radius:20px;
  padding:20px 22px; backdrop-filter:blur(20px);
  transition:transform var(--mid) var(--ease), border-color var(--mid) var(--ease);
}
.stat-tile::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,255,255,.04), transparent 50%);
}
.stat-tile:hover{ transform:translateY(-2px); border-color:var(--edge-2); }
.stat-tile .h{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.stat-tile .k{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-2); }
.stat-tile .i{ color:var(--c1); }
.big-stat{
  font-family:var(--display); font-weight:800; font-size:30px; line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--txt),var(--txt-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat-tile .sub{ font-size:12px; margin-top:8px; font-weight:500; color:var(--c3); }
.stat-tile .sub.dim{ color:var(--txt-2); }

/* ── Chips and sort ─────────────────────────────────────────────── */
.pill-row{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  padding:6px; border-radius:100px;
  background:var(--glass); border:1px solid var(--edge); backdrop-filter:blur(14px);
}
.pill{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 17px; border-radius:100px; font-size:13px; font-weight:600;
  border:1px solid transparent; background:transparent; color:var(--txt-2);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:color var(--fast) var(--ease), transform var(--fast) var(--spring);
}
/* The fill lives on a pseudo-element so it can scale from the centre
   instead of the border-box snapping between two flat colours. */
.pill::before{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--glass-2); opacity:0; transform:scale(.82);
  transition:opacity var(--mid) var(--ease), transform var(--mid) var(--spring);
}
.pill:hover{ color:var(--txt); transform:translateY(-1px); }
.pill:hover::before{ opacity:1; transform:scale(1); }
.pill .i{ transition:transform var(--mid) var(--spring); }
.pill:hover .i{ transform:scale(1.18) rotate(-8deg); }

.pill.active{ color:var(--on-cta); }
.pill.active::before{
  opacity:1; transform:scale(1);
  background:var(--grad-cta); box-shadow:var(--glow-a);
}
/* A slow sheen crossing the selected pill, so the current sort is the
   one thing in the row that is visibly alive. */
.pill.active::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.45) 50%,transparent 80%);
  transform:translateX(-100%); animation:pillSheen 3.6s var(--ease) infinite;
}
@keyframes pillSheen{ 0%,55%{ transform:translateX(-100%) } 100%{ transform:translateX(100%) } }
:root[data-theme="light"] .pill.active{ color:var(--on-cta); }
@media (prefers-reduced-motion:reduce){
  .pill.active::after{ animation:none; display:none; }
  .pill:hover{ transform:none; }
  .pill:hover .i{ transform:none; }
}
@media (max-width:620px){
  .pill-row{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; border-radius:var(--r); }
  .pill-row::-webkit-scrollbar{ display:none; }
}

/* ── Poll card ──────────────────────────────────────────────────── */
.poll-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; }

.poll-card{
  position:relative; overflow:hidden;
  background:var(--glass); border:1px solid var(--edge); border-radius:24px;
  padding:26px; backdrop-filter:blur(20px);
  transform:perspective(1000px) rotateX(0) rotateY(0);
  transition:transform .15s ease-out, border-color .3s var(--ease), box-shadow .4s var(--ease);
  will-change:transform;
  animation:cardIn .7s cubic-bezier(.16,1,.3,1) backwards;
}
@keyframes cardIn{ from{ opacity:0; transform:translateY(40px) } to{ opacity:1; transform:none } }
/* A soft spotlight that follows the cursor across the card. */
.poll-card::before{
  content:""; position:absolute; inset:0; border-radius:24px; pointer-events:none;
  background:radial-gradient(circle 250px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.08), transparent 60%);
  opacity:0; transition:opacity .3s var(--ease);
}
.poll-card:hover::before{ opacity:1; }
.poll-card:hover{ border-color:var(--edge-2); box-shadow:var(--lift), 0 0 50px -20px var(--card-glow, rgba(var(--c1-rgb),.3)); }

.pc-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:26px; }
.pc-live{ display:flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--txt-2); font-weight:600; }
.pc-cat{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3); font-weight:500; }

.hot-badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 9px; border-radius:100px; font-size:10px; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em;
  background:var(--grad-2); color:var(--on-cta);
}
.trend-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 10px; border-radius:100px; font-size:11px; font-weight:600;
  background:rgba(var(--c3-rgb),.10); color:var(--c3); border:1px solid rgba(var(--c3-rgb),.20);
  font-variant-numeric:tabular-nums;
}
.trend-chip.down{ background:rgba(var(--c1-rgb),.10); color:var(--c1); border-color:rgba(var(--c1-rgb),.20); }

/* Contender: circular image, name, percentage. */
.pc-sides{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:26px; }
.side-col{ display:flex; flex-direction:column; align-items:center; gap:12px; flex:1; min-width:0; }
.face{
  /* A <span> is inline, and inline boxes ignore width and height — which
     is why the detail portraits rendered at full image size. */
  display:block;
  position:relative; width:76px; height:76px; border-radius:50%; overflow:hidden;
  border:3px solid rgba(255,255,255,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.6), inset 0 2px 4px rgba(255,255,255,.2);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
  background:var(--glass-2);
}
.poll-card:hover .face{ transform:scale(1.08); }
.face img{ width:100%; height:100%; object-fit:cover; display:block; }
/* A specular highlight, so the circle reads as a lit object. */
.face::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 55%);
}
.side-col .nm{ font-family:var(--display); font-weight:700; font-size:13.5px; text-align:center; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-col .pc{ font-family:var(--display); font-weight:800; font-size:24px; line-height:1; margin-top:2px; font-variant-numeric:tabular-nums; }
.side-col.lead .pc{ opacity:1; }
.side-col:not(.lead) .pc{ color:var(--txt-2); opacity:.55; }

.vs-badge{
  display:grid; place-items:center; position:relative;
  width:52px; height:52px; border-radius:50%; flex-shrink:0;
  font-family:var(--display); font-weight:900; font-size:13px; color:var(--on-cta);
  background:var(--grad-2);
  box-shadow:0 0 30px rgba(var(--c1-rgb),.5), inset 0 1px 2px rgba(255,255,255,.3);
  transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.poll-card:hover .vs-badge{ transform:rotate(15deg) scale(1.1); }
.vs-badge::before{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--c1); animation:pulseRing 2s ease-out infinite;
}
@keyframes pulseRing{ 0%{ transform:scale(1); opacity:1 } 100%{ transform:scale(1.6); opacity:0 } }

/* Segmented bar: two fills that grow from zero on load, each with a
   highlight travelling along it afterwards. */
.vote-bar{ display:flex; height:8px; border-radius:100px; overflow:hidden; background:rgba(255,255,255,.04); position:relative; }
:root[data-theme="light"] .vote-bar{ background:rgba(10,18,38,.06); }
.vote-seg{ display:block; height:100%; width:0; position:relative; animation:fillSeg 1.4s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes fillSeg{ to{ width:var(--w) } }
.vote-seg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  animation:barShimmer 2.8s linear infinite; animation-delay:1.4s;
}
@keyframes barShimmer{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(200%) } }
.vote-seg.a{ background:linear-gradient(90deg,var(--c1),var(--c2)); }
.vote-seg.b{ background:linear-gradient(90deg,var(--c5),var(--c5-lite)); }

.pc-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:20px; font-size:12px; color:var(--txt-2); }
.pc-foot .m{ display:flex; align-items:center; gap:14px; }
.pc-foot .m span{ display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
.pc-foot .go{ display:inline-flex; align-items:center; gap:6px; color:var(--txt); font-weight:500; }
.poll-card:hover .pc-foot .go .i{ transform:translateX(3px); }
.pc-foot .go .i{ transition:transform var(--fast) var(--ease); }

@media (max-width:520px){
  .poll-card{ padding:20px; }
  .face{ width:62px; height:62px; }
  .vs-badge{ width:44px; height:44px; font-size:11px; }
}

/* ── Poll detail ────────────────────────────────────────────────── */
.detail-hero{
  position:relative; border-radius:32px; overflow:hidden;
  border:1px solid var(--edge); background:var(--glass); backdrop-filter:blur(20px);
  transform:perspective(1200px) rotateX(0) rotateY(0);
  transition:transform .2s ease-out;
  margin-bottom:32px;
}
.detail-hero .panels{ display:grid; grid-template-columns:1fr 1fr; position:relative; }
/* Each side is its own image panel. The picture used to appear twice —
   once as a round portrait, once as a ghost behind it at 8% — so it read
   as a mistake rather than a design. Now it appears once, at full
   strength, and the panel is the image. */
.country-panel{
  position:relative; overflow:hidden; min-height:330px;
  display:flex; align-items:flex-end;
  padding:30px 32px;
}
.country-panel:last-child{ text-align:right; }
.country-panel:last-child > .inner{ margin-left:auto; }
.panel-bg{
  display:block; position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.03);
  transition:transform .9s var(--ease), filter .5s var(--ease);
}
.country-panel:hover .panel-bg{ transform:scale(1.08); }
/* The scrim. Without it the type sat straight on the photograph, which
   is why nothing in the panel was readable. */
.country-panel::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    linear-gradient(to top, var(--scrim-1) 0%, var(--scrim-2) 42%, var(--scrim-3) 100%);
}
/* Losing side sits back so the leader reads first. */
.country-panel:not(.is-lead) .panel-bg{ filter:saturate(.55) brightness(.8); }

.country-panel > .inner{ position:relative; z-index:2; max-width:100%; }
.country-panel .cname{
  font-family:var(--display); font-weight:800; letter-spacing:-.02em;
  font-size:clamp(20px,2.2vw,27px); margin:0 0 4px; line-height:1.1;
  color:var(--txt);
}
.country-panel .cstate{
  color:var(--txt-2); font-size:11px; font-weight:600; margin:0 0 10px;
  letter-spacing:.14em; text-transform:uppercase;
}
.country-panel .cpct{
  font-family:var(--display); font-weight:900; line-height:1;
  font-size:clamp(30px,3.4vw,44px); margin:0 0 20px;
  font-variant-numeric:tabular-nums; letter-spacing:-.03em;
}

.vs-large-wrap{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:10; pointer-events:none; }
.vs-large{
  display:block; font-family:var(--display); font-weight:900; font-size:clamp(38px,5.2vw,70px); line-height:1;
  background:linear-gradient(180deg,var(--c1),var(--c5));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 40px rgba(var(--c1-rgb),.5));
  animation:vsFloat 4s ease-in-out infinite;
}
@keyframes vsFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
.vs-glow{
  display:block; position:absolute; width:200px; height:200px; top:50%; left:50%;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle,var(--c1),transparent 60%);
  opacity:.25; filter:blur(50px); animation:vsGlow 3s ease-in-out infinite;
}
@keyframes vsGlow{
  0%,100%{ opacity:.25; transform:translate(-50%,-50%) scale(1) }
  50%    { opacity:.45; transform:translate(-50%,-50%) scale(1.25) }
}

.vote-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:100px; position:relative; overflow:hidden;
  border:1px solid var(--edge-2); background:rgba(255,255,255,.05); color:var(--txt);
  font-family:var(--body); font-weight:600; font-size:14px; cursor:pointer;
  backdrop-filter:blur(10px); transition:all .3s var(--ease);
}
.vote-btn::before{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(135deg,transparent,rgba(255,255,255,.1),transparent);
  transition:transform .6s var(--ease);
}
.vote-btn:hover::before{ transform:translateX(100%); }
.vote-btn:hover{ background:var(--txt); color:var(--bg); border-color:var(--txt); transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,255,255,.15); }
:root[data-theme="light"] .vote-btn:hover{ box-shadow:0 12px 30px rgba(10,18,38,.18); }
.vote-btn:active{ transform:translateY(0); }
.vote-btn[disabled]{ opacity:.45; cursor:not-allowed; }
@keyframes voteBurst{ 0%{ transform:scale(1) } 50%{ transform:scale(1.08) } 100%{ transform:scale(1) } }
.voting{ animation:voteBurst .5s ease; }

.detail-bar{ margin-bottom:44px; }
.detail-bar .vote-bar{ height:14px; }
.detail-bar .lbl{ display:flex; justify-content:space-between; gap:14px; margin-top:12px; font-size:12px; color:var(--txt-2); font-variant-numeric:tabular-nums; }

/* ── Section heading ────────────────────────────────────────────── */
.sec-h{ display:flex; align-items:center; gap:14px; margin:0 0 22px; }
.sec-h h2{ font-family:var(--display); font-weight:700; font-size:clamp(18px,2.2vw,24px); margin:0; }
.sec-h .rule{ flex:1; height:1px; background:var(--edge); }
.sec-h .count{ font-size:13px; color:var(--txt-2); }

/* ── Sparkline ──────────────────────────────────────────────────── */
.spark-card{ margin-bottom:44px; }
.spark-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.spark-head .t{ font-family:var(--display); font-weight:700; font-size:17px; }
.spark-head .k{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-2); margin-bottom:5px; }
.spark-key{ display:flex; gap:16px; font-size:12px; color:var(--txt-2); }
.spark-key span{ display:inline-flex; align-items:center; gap:7px; }
.spark-key i{ width:10px; height:10px; border-radius:50%; display:block; }
.sparkline{ width:100%; height:140px; display:block; }
.sparkline path.line{ stroke-dasharray:1200; stroke-dashoffset:1200; animation:drawLine 2.5s ease forwards; }
.sparkline path.area{ opacity:0; animation:fadeArea 1s ease 1s forwards; }
@keyframes drawLine{ to{ stroke-dashoffset:0 } }
@keyframes fadeArea{ to{ opacity:1 } }

/* Comment rules live at the end of this file now — see "Discussion". */

@media (max-width:820px){
  .detail-hero .panels{ grid-template-columns:1fr; }
  .country-panel{ min-height:210px; padding:24px; text-align:left; }
  .country-panel:last-child{ text-align:left; border-top:1px solid var(--edge); }
  .country-panel:last-child > .inner{ margin-left:0; }
  .vs-large-wrap{ position:static; transform:none; display:flex; justify-content:center; padding:6px 0; }
  .vs-large{ font-size:52px; }
}

/* ── Related polls, as cards with faces ─────────────────────────────
   A list of underlined text links was the weakest thing on the page.
   These are matchups: show the matchup. */
.related{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.related li{ margin:0; }
.related a{
  display:flex; align-items:center; gap:16px;
  padding:14px 18px; border-radius:18px;
  background:var(--glass); border:1px solid var(--edge); backdrop-filter:blur(16px);
  transition:transform var(--mid) var(--ease), border-color var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.related a:hover{ transform:translateX(6px); border-color:var(--edge-2); box-shadow:0 0 40px -22px var(--c1); }
.related .pair{ display:flex; align-items:center; flex-shrink:0; }
.related .pair span{
  display:block; width:42px; height:42px; border-radius:50%; overflow:hidden;
  border:2px solid var(--bg); background:var(--glass-2);
}
/* The two faces overlap slightly, so the pair reads as one unit. */
.related .pair span + span{ margin-left:-14px; }
.related .pair img{ width:100%; height:100%; object-fit:cover; display:block; }
.related .t{ flex:1; min-width:0; font-family:var(--display); font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.related .n{ font-size:12.5px; color:var(--txt-2); font-variant-numeric:tabular-nums; white-space:nowrap; }
.related .mini{ display:flex; height:5px; width:74px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.06); flex-shrink:0; }
:root[data-theme="light"] .related .mini{ background:rgba(10,18,38,.07); }
.related .mini i{ display:block; height:100%; }
.related .mini .a{ background:var(--c1); }
.related .mini .b{ background:var(--c5); }
@media (max-width:620px){ .related .mini{ display:none; } }

/* ── Hero: the accent word gets its own emphasis ────────────────── */
.hero-title .accent{
  display:inline-block;
  background:linear-gradient(105deg,var(--c1),var(--c5) 55%,var(--c3));
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:heroSweep 8s linear infinite;
}
@keyframes heroSweep{ to{ background-position:220% center } }
/* A soft bloom behind the headline so it sits in light. */
.poll-index-hero h1{ position:relative; }
.poll-index-hero h1::after{
  content:""; position:absolute; left:-8%; top:0; width:70%; height:100%;
  background:radial-gradient(ellipse at center,var(--c1),transparent 68%);
  opacity:.15; filter:blur(48px); z-index:-1; pointer-events:none;
}

/* ── Back link ──────────────────────────────────────────────────── */
.back-link{
  display:inline-flex; align-items:center; gap:9px;
  padding:9px 18px 9px 14px; border-radius:100px; font-size:13.5px; font-weight:600;
  color:var(--txt-2); background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(10px);
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.back-link:hover{ color:var(--txt); border-color:var(--edge-2); transform:translateX(-3px); }
.back-link .i{ transition:transform var(--fast) var(--ease); }
.back-link:hover .i{ transform:translateX(-3px); }

/* ── Sign-in prompt ─────────────────────────────────────────────── */
.signin-cta{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin:18px 0 0; padding:16px 20px; border-radius:18px;
  background:var(--glass); border:1px solid var(--edge); backdrop-filter:blur(16px);
  font-size:14px; color:var(--txt-2);
}

/* ═══════════════════════════════════════════════════════════════════
   Blog cards — the same treatment as the poll cards.

   The blog hub was still on .story/.story-list: a flat bordered box with
   a heading and a date. Same glass, same cursor spotlight, same tilt,
   same entrance stagger as .poll-card, so the two halves of the site
   read as one product.
   ═══════════════════════════════════════════════════════════════════ */
.story-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:20px; }
.story-card{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:var(--glass); border:1px solid var(--edge); border-radius:24px;
  backdrop-filter:blur(20px);
  transform:perspective(1000px) rotateX(0) rotateY(0);
  transition:transform .15s ease-out, border-color .3s var(--ease), box-shadow .4s var(--ease);
  will-change:transform;
  animation:cardIn .7s cubic-bezier(.16,1,.3,1) backwards;
}
.story-card::before{
  content:""; position:absolute; inset:0; border-radius:24px; pointer-events:none; z-index:2;
  background:radial-gradient(circle 250px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.08), transparent 60%);
  opacity:0; transition:opacity .3s var(--ease);
}
.story-card:hover::before{ opacity:1; }
.story-card:hover{ border-color:var(--edge-2); box-shadow:var(--lift), 0 0 50px -20px rgba(var(--c3-rgb),.32); }

/* ── Cover ──────────────────────────────────────────────────────── */
.story-card .cover{
  position:relative; display:block; aspect-ratio:16/9; overflow:hidden;
  background:var(--glass-2);
}
.story-card .cover img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .9s var(--ease);
}
.story-card:hover .cover img{ transform:scale(1.06); }
/* Articles without a cover still need to hold the grid's rhythm. */
.story-card .cover .ph{
  position:absolute; inset:0; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 40%, rgba(var(--c3-rgb),.18), transparent 70%);
}
.story-card .cover .ph .i{ width:34px; height:34px; color:var(--txt-3); }
/* The image fades into the card body rather than stopping at a hard line. */
.story-card .cover::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, var(--bg) 2%, transparent 55%);
  opacity:.85;
}
.story-card .sc-cat{
  position:absolute; top:14px; left:14px; z-index:1;
  padding:5px 12px; border-radius:100px;
  font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt); background:rgba(10,18,38,.62); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);
}
.story-card .cover .hot-badge{ position:absolute; top:14px; right:14px; z-index:1; }

/* ── Body ───────────────────────────────────────────────────────── */
.story-card .sc-body{
  position:relative; z-index:1;
  padding:20px 24px 22px; display:flex; flex-direction:column; gap:10px; flex:1;
}
.story-card h2{
  font-family:var(--display); font-weight:700; letter-spacing:-.02em;
  font-size:17px; line-height:1.25; margin:0;
}
.story-card h2 a{ color:var(--txt); text-decoration:none; }
/* Stretched link: the whole card is the click target, but only the
   heading is in the tab order. */
.story-card h2 a::after{ content:""; position:absolute; inset:0; z-index:3; }
.story-card h2 a:hover{ color:var(--c3); }
.story-card .sc-dek{
  color:var(--txt-2); font-size:13.5px; line-height:1.55; margin:0; max-width:none;
}
.story-card .sc-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-top:auto; padding-top:14px; border-top:1px solid var(--edge);
  font-size:12px; color:var(--txt-2);
}
.story-card .sc-foot .m{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; }
.story-card .sc-foot .m span{ display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
.story-card .sc-foot .go{ display:inline-flex; align-items:center; gap:6px; color:var(--txt); font-weight:600; white-space:nowrap; }
.story-card .sc-foot .go .i{ transition:transform var(--fast) var(--ease); }
.story-card:hover .sc-foot .go .i{ transform:translateX(3px); }

@media (max-width:520px){
  .story-card .sc-body{ padding:16px 18px 18px; }
  .story-card h2{ font-size:16px; }
}

/* ── Topic rail ─────────────────────────────────────────────────────
   Was a row of plain chips. Now carries its own count per topic, so the
   rail says which sections have depth. */
.topic-rail{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 22px;
}
.topic{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 15px; border-radius:14px; font-size:13px; font-weight:600;
  color:var(--txt-2); text-decoration:none; white-space:nowrap;
  background:var(--glass); border:1px solid var(--edge); backdrop-filter:blur(12px);
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease),
             transform var(--fast) var(--spring), background var(--fast) var(--ease);
}
.topic:hover{ color:var(--txt); border-color:var(--edge-2); transform:translateY(-2px); }
.topic .n{
  font-size:11px; font-weight:700; padding:2px 7px; border-radius:99px;
  background:var(--glass-2); color:var(--txt-3); font-variant-numeric:tabular-nums;
}
.topic.on{
  color:var(--txt); border-color:transparent;
  background:linear-gradient(var(--glass-2),var(--glass-2)) padding-box,
             var(--grad) border-box;
  border:1px solid transparent;
}
.topic.on .n{ background:var(--grad-cta); color:var(--on-cta); }
@media (max-width:620px){
  .topic-rail{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
  .topic-rail::-webkit-scrollbar{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .story-card{ animation:none; }
  .story-card:hover .cover img{ transform:none; }
  .topic:hover{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   The card ring.

   A 1px gradient outline that a plain `border` cannot draw. The trick is
   a filled box masked down to its own 1px padding band: paint the whole
   element with the gradient, then subtract everything inside the padding
   so only the band survives. It sits on its own element rather than a
   pseudo because ::before (spotlight) and ::after (corner wash) are both
   already spoken for on .poll-card.
   ═══════════════════════════════════════════════════════════════════ */
@property --ring-angle{ syntax:"<angle>"; inherits:false; initial-value:0deg; }

.card-ring{
  position:absolute; inset:0; border-radius:inherit; padding:1px;
  pointer-events:none; z-index:4;
  background:conic-gradient(from var(--ring-angle),
    var(--c1) 0deg, var(--c5) 70deg, var(--c3) 150deg,
    rgba(255,255,255,.07) 215deg, rgba(255,255,255,.07) 290deg, var(--c1) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.42;
  transition:opacity .45s var(--ease);
}
.poll-card:hover .card-ring,
.story-card:hover .card-ring{
  opacity:1;
  animation:ringSpin 5s linear infinite;
}
@keyframes ringSpin{ to{ --ring-angle:360deg } }

/* A brighter seam along the top edge — the light source is above, so the
   card catches it there. */
.poll-card, .story-card{ box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
:root[data-theme="light"] .poll-card,
:root[data-theme="light"] .story-card{ box-shadow:inset 0 1px 0 rgba(255,255,255,.9); }
.poll-card:hover, .story-card:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.10), var(--lift), 0 0 50px -20px var(--card-glow, rgba(var(--c1-rgb),.3)); }

@media (prefers-reduced-motion:reduce){
  .poll-card:hover .card-ring,
  .story-card:hover .card-ring{ animation:none; }
}

/* The detail hero gets the same outline, at rest. */
.detail-hero{ box-shadow:inset 0 1px 0 rgba(255,255,255,.07); }
.detail-hero .card-ring{ opacity:.55; }

/* A hairline where the two image panels meet, so they read as two sides
   of one card rather than one photograph that changed halfway. */
.detail-hero .panels::after{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; z-index:3;
  background:linear-gradient(to bottom, transparent, var(--edge-2) 25%, var(--edge-2) 75%, transparent);
  pointer-events:none;
}
@media (max-width:820px){
  .detail-hero .panels::after{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Discussion — threads, sorting, paging and reactions.

   The previous version was a stack of near-identical cards: every one
   the same width, the same weight, the same 68px gold disc, so a
   one-word comment looked exactly as important as a long argument and
   the eye had nothing to hold on to. This version leans on a rail and a
   much quieter avatar, and lets the text be the loudest thing.
   ═══════════════════════════════════════════════════════════════════ */

.cmt-wrap{ margin-bottom:44px; }

.cmt-bar{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin:0 0 20px;
}
.cmt-hint{ margin:0; font-size:12.5px; color:var(--txt-3); min-height:1em; }
.cmt-hint.busy{ color:var(--c1); }
.cmt-empty{ padding:44px 0; text-align:center; }

/* ── The thread ─────────────────────────────────────────────────── */
.cmt-list{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }

.cmt{
  position:relative; display:flex; gap:14px; margin:0;
  padding:16px 18px; border-radius:var(--r-2);
  border:1px solid transparent;
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.cmt:hover{ background:var(--glass-2); border-color:var(--edge); }
/* Landing on a comment from a profile link should show you which one. */
.cmt:target{
  background:rgba(var(--c1-rgb),.07);
  border-color:rgba(var(--c1-rgb),.35);
  animation:cmtFlash 1.6s var(--ease);
}
@keyframes cmtFlash{ 0%{ box-shadow:0 0 0 0 rgba(var(--c1-rgb),.4) } 100%{ box-shadow:0 0 0 14px rgba(var(--c1-rgb),0) } }

/* The avatar was a 68px saturated gold disc on every row, which made the
   column of avatars the loudest thing on the page. Smaller, quieter,
   and it only takes the brand colour when there is no photo. */
.cmt-av{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; overflow:hidden;
  font-family:var(--display); font-weight:700; font-size:13px;
  color:var(--c1); background:rgba(var(--c1-rgb),.12);
  border:1px solid rgba(var(--c1-rgb),.24);
  text-decoration:none;
  transition:transform var(--fast) var(--spring), border-color var(--fast) var(--ease);
}
.cmt-av img{ width:100%; height:100%; object-fit:cover; display:block; }
.cmt-av:not(.no-link):hover{ transform:scale(1.06); border-color:var(--c1); }
.cmt-av.no-link{ cursor:default; color:var(--txt-3); background:var(--glass-2); border-color:var(--edge); }

.cmt-b{ flex:1; min-width:0; }
.cmt-head{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0 0 6px;
  font-size:12.5px; color:var(--txt-3);
}
.cmt-head .who{
  font-size:14px; font-weight:700; color:var(--txt); text-decoration:none;
}
a.who:hover{ color:var(--c1); }
.cmt-head .when{ font-variant-numeric:tabular-nums; }
/* A dot between name and date, rather than a literal middot in markup. */
.cmt-head .when::before{ content:"·"; margin-right:9px; color:var(--txt-3); }
.cmt-head .chip-n{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px;
  background:var(--glass-2); border:1px solid var(--edge); color:var(--txt-2);
}
.cmt-head .chip-n .i{ width:12px; height:12px; }

.cmt .tx{
  margin:0; font-size:15px; line-height:1.65; color:var(--txt);
  max-width:70ch; overflow-wrap:anywhere; white-space:pre-line;
}

/* ── Replies ────────────────────────────────────────────────────── */
.cmt-replies{
  list-style:none; margin:12px 0 0; padding:0 0 0 16px;
  border-left:2px solid var(--edge); display:grid; gap:2px;
}
.cmt.is-reply{ padding:11px 13px; }
.cmt.is-reply .cmt-av{ width:30px; height:30px; font-size:11px; }
.cmt.is-reply .tx{ font-size:14px; }

/* ── Reactions ──────────────────────────────────────────────────── */
.rx{ position:relative; display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; }

.rx-sum{ display:flex; align-items:center; gap:7px; }
.rx-sum:empty{ display:none; }
.rx-faces{ display:flex; align-items:center; }
/* Overlap the emoji slightly so a run of them reads as one cluster. */
.rx-face{
  width:22px; height:22px; border-radius:50%;
  display:grid; place-items:center; font-size:12px;
  background:var(--bg-2); border:1.5px solid var(--bg);
}
.rx-face + .rx-face{ margin-left:-7px; }
.rx-n{ font-size:12px; font-weight:600; color:var(--txt-2); font-variant-numeric:tabular-nums; }

.rx-btn{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  padding:5px 12px; border-radius:99px;
  font-family:var(--body); font-size:12px; font-weight:600;
  color:var(--txt-3); background:transparent; border:1px solid var(--edge);
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease),
             background var(--fast) var(--ease);
}
.rx-btn:hover{ color:var(--txt); border-color:var(--edge-2); background:var(--glass-2); }
.rx-btn .i{ width:13px; height:13px; }
/* Once you have reacted the button carries your choice. */
.rx-btn.is-mine{
  color:var(--c1); border-color:rgba(var(--c1-rgb),.4);
  background:rgba(var(--c1-rgb),.10);
}
.rx-btn .my-e{ font-size:13px; line-height:1; }

.rx-pick{
  position:absolute; bottom:calc(100% + 8px); left:0; z-index:20;
  display:flex; gap:2px; padding:6px;
  border-radius:100px;
  background:var(--bg-2); border:1px solid var(--edge-2);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6);
  animation:rxIn .18s var(--spring);
}
@keyframes rxIn{ from{ opacity:0; transform:translateY(6px) scale(.94) } to{ opacity:1; transform:none } }
.rx-opt{
  position:relative; cursor:pointer; border:0; background:transparent;
  width:38px; height:38px; border-radius:50%; font-size:19px; line-height:1;
  display:grid; place-items:center;
  transition:transform var(--fast) var(--spring), background var(--fast) var(--ease);
}
.rx-opt:hover{ transform:translateY(-4px) scale(1.22); background:var(--glass-2); }
.rx-opt.is-mine{ background:rgba(var(--c1-rgb),.16); }
/* The name appears above the emoji on hover, the way every reaction
   picker people already know behaves. */
.rx-opt .l{
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
  padding:3px 9px; border-radius:99px; white-space:nowrap;
  font-size:10.5px; font-weight:600; letter-spacing:.02em;
  color:var(--txt); background:var(--bg); border:1px solid var(--edge-2);
  opacity:0; pointer-events:none; transition:opacity var(--fast) var(--ease);
}
.rx-opt:hover .l{ opacity:1; }
@media (max-width:560px){
  .rx-pick{ left:50%; transform:translateX(-50%); }
  .rx-opt{ width:34px; height:34px; font-size:17px; }
  .rx-opt .l{ display:none; }
}

/* ── Pager ──────────────────────────────────────────────────────── */
.cmt-pager{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-top:22px; flex-wrap:wrap;
}
.cmt-page-btn{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:9px 16px; border-radius:100px;
  font-family:var(--body); font-size:13px; font-weight:600;
  color:var(--txt-2); background:var(--glass-2); border:1px solid var(--edge);
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease),
             transform var(--fast) var(--spring);
}
.cmt-page-btn:hover:not([disabled]){ color:var(--txt); border-color:var(--c1); transform:translateY(-1px); }
.cmt-page-btn[disabled]{ opacity:.4; cursor:not-allowed; }
.cmt-page-btn .i{ width:14px; height:14px; }
.cmt-page-now{ font-size:12.5px; color:var(--txt-3); font-variant-numeric:tabular-nums; }
.cmt-page-now b{ color:var(--txt); }

/* While a page is being fetched, dim what is there rather than emptying
   it — a list that vanishes and reappears is more jarring than one that
   fades. */
.cmt-fading{ opacity:.35; transition:opacity .15s linear; pointer-events:none; }

@media (max-width:560px){
  .cmt{ padding:13px 12px; gap:11px; }
  .cmt .tx{ font-size:14.5px; }
  .cmt-replies{ padding-left:11px; }
}
@media (prefers-reduced-motion:reduce){
  .cmt:target{ animation:none; }
  .rx-pick{ animation:none; }
  .rx-opt:hover{ transform:none; }
  .cmt-page-btn:hover:not([disabled]){ transform:none; }
}

/* The emoji itself. pointer-events:none so hovering the glyph still
   counts as hovering the button, otherwise the label tooltip flickers
   as the cursor crosses from the padding onto the character. */
.rx-opt .e{ display:block; line-height:1; pointer-events:none; }

/* ── Report ─────────────────────────────────────────────────────────
   Deliberately quiet: it sits at the end of the row, greys until
   hovered, and only turns red on hover. A flag button that shouts
   invites idle clicking, and every idle click is moderator work. */
.rx-flag{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer;
  margin-left:auto; padding:5px 10px; border-radius:99px;
  font-family:var(--body); font-size:11.5px; font-weight:600;
  color:var(--txt-3); background:transparent; border:1px solid transparent;
  opacity:0; transition:opacity var(--fast) var(--ease), color var(--fast) var(--ease),
             border-color var(--fast) var(--ease);
}
.cmt:hover .rx-flag, .rx-flag:focus-visible{ opacity:1; }
.rx-flag:hover{ color:var(--c4); border-color:rgba(255,90,110,.3); }
.rx-flag .i{ width:12px; height:12px; }
.rx-flag.is-done{ opacity:1; color:var(--ok); pointer-events:none; }
/* Touch devices have no hover, so the control must always be reachable. */
@media (hover:none){ .rx-flag{ opacity:.65; } }

/* The reason chooser, reusing the reaction popover's shape. */
.rp-pick{
  position:absolute; bottom:calc(100% + 8px); right:0; z-index:22;
  display:grid; gap:2px; padding:6px; min-width:184px;
  border-radius:14px;
  background:var(--bg-2); border:1px solid var(--edge-2);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.6);
  animation:rxIn .18s var(--spring);
}
.rp-pick b{
  padding:6px 10px 4px; font-size:10.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3);
}
.rp-opt{
  cursor:pointer; text-align:left; border:0; background:transparent;
  padding:8px 10px; border-radius:9px;
  font-family:var(--body); font-size:13px; font-weight:500; color:var(--txt-2);
  transition:background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.rp-opt:hover{ background:var(--glass-2); color:var(--txt); }
@media (prefers-reduced-motion:reduce){ .rp-pick{ animation:none; } }

/* ═══════════════════════════════════════════════════════════════════
   Multi-option polls (3–10).

   Two-option polls keep the VS hero; a versus badge between five things
   says nothing, so these become a ranked board instead. The bar is the
   result, the leader is marked, and every row is its own vote button.
   ═══════════════════════════════════════════════════════════════════ */
.mp{ margin:0 0 32px; }
.mp-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:mp; }

.mp-row{
  position:relative; display:flex; align-items:center; gap:16px;
  margin:0; padding:14px 18px; border-radius:var(--r-2);
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(16px);
  transition:border-color var(--mid) var(--ease), transform var(--mid) var(--spring);
  animation:cardIn .55s cubic-bezier(.16,1,.3,1) backwards;
}
.mp-row:nth-child(1){ animation-delay:0ms }   .mp-row:nth-child(2){ animation-delay:50ms }
.mp-row:nth-child(3){ animation-delay:100ms } .mp-row:nth-child(4){ animation-delay:150ms }
.mp-row:nth-child(5){ animation-delay:200ms } .mp-row:nth-child(6){ animation-delay:250ms }
.mp-row:hover{ border-color:var(--edge-2); transform:translateX(4px); }
/* The leader is the one fact the page exists to convey. */
.mp-row.is-lead{
  border-color:rgba(var(--c1-rgb),.42);
  box-shadow:0 0 40px -22px var(--c1), inset 0 1px 0 rgba(255,255,255,.06);
}
.mp-row.is-lead .mp-rank{ background:var(--grad-cta); color:var(--on-cta); border-color:transparent; }

.mp-rank{
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:12px;
  color:var(--txt-3); background:var(--glass-2); border:1px solid var(--edge);
  font-variant-numeric:tabular-nums;
}
.mp-face{
  flex-shrink:0; width:54px; height:54px; border-radius:50%; overflow:hidden;
  border:2px solid rgba(255,255,255,.12); background:var(--glass-2);
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.mp-face img{ width:100%; height:100%; object-fit:cover; display:block; }

.mp-body{ flex:1; min-width:0; display:grid; gap:7px; }
.mp-top{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.mp-name{
  font-family:var(--display); font-weight:700; font-size:15.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mp-pct{
  font-family:var(--display); font-weight:800; font-size:19px;
  font-variant-numeric:tabular-nums; color:var(--txt-2); flex-shrink:0;
}
.mp-row.is-lead .mp-pct{ color:var(--c1); }

.mp-track{
  display:block; height:9px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.06);
}
:root[data-theme="light"] .mp-track{ background:rgba(10,18,38,.07); }
.mp-track i{
  display:block; height:100%; width:var(--w); border-radius:99px;
  background:linear-gradient(90deg,var(--c5),var(--c3));
  transition:width .9s var(--spring);
}
.mp-row.is-lead .mp-track i{ background:var(--grad-cta); }
.mp-n{ font-size:11.5px; color:var(--txt-3); font-variant-numeric:tabular-nums; }

.mp-vote{ flex-shrink:0; padding:10px 18px; font-size:13px; }
.mp-vote .i{ width:15px; height:15px; }

@media (max-width:620px){
  .mp-row{ flex-wrap:wrap; gap:12px; padding:13px 14px; }
  .mp-face{ width:44px; height:44px; }
  .mp-body{ flex-basis:calc(100% - 130px); }
  .mp-vote{ flex-basis:100%; justify-content:center; }
  .mp-name{ font-size:14.5px; }
}
@media (prefers-reduced-motion:reduce){
  .mp-row{ animation:none; }
  .mp-track i{ transition:none; }
  .mp-row:hover{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   The moment after a vote.

   Voting used to end the session: the bars moved and nothing else
   happened. Everything below serves the three seconds after the click —
   showing the result land, marking which side was yours, and offering
   somewhere to go next.

   The bar fill deliberately does NOT use animation-fill-mode: backwards.
   An earlier pass did, and because the animation never ran on hidden
   elements the segments stayed pinned at 0px while the labels read 50%.
   `forwards` holds the end state, which is what is wanted here.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Staggered fill ───────────────────────────────────────────────────
   --d is set per segment by np.js so the two sides land one after the
   other rather than together; a simultaneous fill reads as a static
   image that faded in. The overshoot is mild (1.34 rather than the
   1.56 of --spring): the two segments share 100% of a flex row, so an
   aggressive overshoot makes them visibly fight for the same pixels.
   .vote-bar clips, so the brief over-fill settles instead of spilling. */
.vote-seg{
  animation:fillSeg 1.15s cubic-bezier(.34,1.34,.64,1) var(--d,0ms) forwards;
}

/* Handing the bar from animation to transition.

   A forwards-filled animation outranks a transition, so once the fill has
   run, changing --w after a vote would snap rather than glide. np.js adds
   .is-filled once the entry animation is done with, which drops the
   animation and lets the transition own the width from then on.

   That class is applied on a timer rather than on animationend, because
   animationend never fires if the animation never runs — which is exactly
   how the segments once ended up pinned at 0px while the labels read 50%.
   A timeout fires either way. */
.vote-seg.is-filled{
  animation:none;
  width:var(--w);
  transition:width .55s cubic-bezier(.34,1.34,.64,1);
}

/* Independent bars can overshoot properly — nothing is competing for the
   remaining space, so the full spring reads as intended. */
.mp-track i{ transition:width .9s var(--spring); }

@media (prefers-reduced-motion:reduce){
  .vote-seg{ animation-duration:.01ms; animation-delay:0ms; transition:none; }
  .mp-track i{ transition:none; }
  .vote-seg::after{ animation:none; }
}

/* ── The side you picked ──────────────────────────────────────────────
   Applied from poll_session.php, not from the HTML, because the page is
   cached publicly and cannot know who is reading it. That also means the
   mark survives a reload. */
.country-panel.is-yours .inner::after,
.mp-row.is-yours .mp-body::after{
  content:"Your pick";
  display:inline-block;
  margin-top:10px;
  padding:4px 11px;
  border-radius:99px;
  font-family:var(--body);
  font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  background:var(--grad-cta);
  color:var(--on-cta);
}
.country-panel.is-yours{
  /* An inset ring rather than a border: the panel is a fixed grid cell
     and a real border would shift the image inside it. */
  box-shadow:inset 0 0 0 2px rgba(var(--c1-rgb),.65);
}
.mp-row.is-yours{
  box-shadow:inset 3px 0 0 0 var(--c1);
}

/* A spent button should look spent, not broken. */
.vote-btn:disabled{ opacity:.5; cursor:default; }
.vote-btn.is-yours:disabled{
  opacity:1;
  background:var(--grad-cta);
  color:var(--on-cta);
  border-color:transparent;
  font-weight:700;
}

/* ── Post-vote panel ──────────────────────────────────────────────── */
.pv[hidden]{ display:none !important; }
.pv{
  margin:0 0 44px;
  padding:26px 28px;
  border-radius:var(--r-2);
  border:1px solid rgba(var(--c1-rgb),.28);
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(var(--c1-rgb),.10), transparent 60%),
    var(--glass);
  /* forwards, never `both`. A backwards fill pins the element at the
     from-state (opacity:0) whenever the animation does not run, which is
     exactly how the result bars once ended up invisible. The panel is
     display:none until revealed, so there is no from-state flash to
     guard against anyway. */
  animation:pvIn .5s var(--ease) forwards;
}
@keyframes pvIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
/* Restored on load rather than earned just now: present, but not
   celebrating. No entry animation, and the accent border steps back to
   the ordinary one so it does not read as a fresh notification. */
.pv.is-quiet{
  animation:none;
  border-color:var(--edge);
  background:var(--glass);
}
.pv.is-quiet .pv-tick{ background:var(--glass-2); color:var(--txt-2); }
@media (prefers-reduced-motion:reduce){ .pv{ animation:none; } }

.pv-head{ display:flex; align-items:flex-start; gap:15px; }
.pv-tick{
  flex:0 0 auto;
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%;
  background:var(--grad-cta); color:var(--on-cta);
}
.pv-tick .i{ width:19px; height:19px; }
.pv-title{
  font-family:var(--display);
  font-size:clamp(17px,1.9vw,21px); font-weight:800; letter-spacing:-.02em;
  color:var(--txt); margin:0 0 4px;
}
.pv-sub{ margin:0; font-size:14.5px; line-height:1.55; color:var(--txt-2); }

.pv-share{ margin-top:22px; }
.pv-share-l{
  margin:0 0 10px;
  font-family:var(--mono);
  font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-3);
}
.pv-btns{ display:flex; flex-wrap:wrap; gap:8px; }
.pv-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px;
  border-radius:99px;
  border:1px solid var(--edge-2);
  background:var(--glass-2);
  color:var(--txt);
  font-family:var(--body); font-size:13.5px; font-weight:600;
  cursor:pointer;
  /* np-pages.css underlines anchors inside main; these are controls. */
  text-decoration:none !important;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
  white-space:nowrap;
}
.pv-btn:hover{ border-color:var(--txt-3); background:var(--glass); }
.pv-btn .i{ width:15px; height:15px; }
.pv-btn.is-primary{
  background:var(--grad-cta); color:var(--on-cta);
  border-color:transparent; font-weight:700;
}
.pv-btn.is-primary:hover{ filter:brightness(1.07); }
.pv-btn[hidden]{ display:none !important; }

/* ── Next poll ────────────────────────────────────────────────────── */
.pv-next{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "k     k    k"
    "pair  t    go"
    "pair  n    go";
  align-items:center;
  gap:2px 16px;
  margin-top:22px;
  padding:16px 18px;
  border-radius:var(--r);
  border:1px solid var(--edge);
  background:var(--bg-2);
  text-decoration:none !important;
  transition:border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.pv-next:hover{ border-color:var(--edge-2); transform:translateY(-2px); }
.pv-next-k{
  grid-area:k;
  margin-bottom:10px;
  font-family:var(--mono);
  font-size:10.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c1);
}
.pv-next-pair{ grid-area:pair; display:flex; align-items:center; }
.pv-next-pair img{
  display:block;
  width:38px; height:38px; border-radius:50%;
  object-fit:cover; border:2px solid var(--bg-2); background:var(--bg);
}
.pv-next-pair img:last-child{ margin-left:-13px; }
.pv-next-t{
  grid-area:t;
  font-family:var(--display); font-weight:700; font-size:15px;
  color:var(--txt); line-height:1.3;
}
.pv-next-n{ grid-area:n; font-size:12.5px; color:var(--txt-3); margin-top:3px; }
.pv-next-go{
  grid-area:go;
  display:grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--glass-2); border:1px solid var(--edge);
  color:var(--txt-2);
  transition:transform var(--fast) var(--ease), color var(--fast) var(--ease);
}
.pv-next:hover .pv-next-go{ transform:translateX(3px); color:var(--c1); }
.pv-next-go .i{ width:15px; height:15px; }

@media (max-width:560px){
  .pv{ padding:20px 18px; }
  .pv-btns .pv-btn{ flex:1 1 auto; justify-content:center; }
  .pv-next{ gap:2px 12px; }
  .pv-next-go{ display:none; }
}