/* np-bundle.css — generated by build_css.py. Do not edit.
   Concatenation of the site's stylesheets in cascade order; edit the
   individual files and rebuild. Order comes from NP_STYLES in
   includes/assets.php. */

/* ===== np.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   NPolls — v2. Vivid, animated, maximal.
   Deep-space ground, an aurora that never stops moving, glass surfaces,
   glow instead of shadow, motion on nearly everything.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Ground is deep navy rather than neutral black — the blues in the
     palette need a blue-biased ground or they read as grey. */
  --bg:      #060A16;
  --bg-2:    #0B1224;
  --glass:   rgba(16,26,50,.55);
  --glass-2: rgba(255,255,255,.05);
  --edge:    rgba(255,255,255,.08);
  --edge-2:  rgba(255,255,255,.18);

  --txt:   #EEF2FA;
  --txt-2: #7C88A6;
  --txt-3: #6B7794;

  /* Scrim: the veil laid over a photo so type sitting on it stays
     legible. Three stops, opaque at the text end. */
  --scrim-1: rgba(6,10,22,.95);
  --scrim-2: rgba(6,10,22,.72);
  --scrim-3: rgba(6,10,22,.18);

  /* Gold against navy and deep blue. Gold is the single warm note and
     carries emphasis; the blues carry everything structural. */
  --c1: #F4C047;   /* gold        */
  --c2: #D9A32E;   /* antique gold */
  --c3: #5FA8FF;   /* azure       */
  --c4: #FF5A6E;   /* coral — errors only, never decoration */
  --c5: #2F5AE8;   /* deep blue   */
  --live: #F4C047;

  /* Channel forms of the three accents. Every translucent use derives
     from these, so retinting the site is an edit to the tokens alone
     rather than a hunt through thirty rgba() literals. */
  --c1-rgb: 244,192,71;
  --c3-rgb: 95,168,255;
  --c5-rgb: 47,90,232;
  --c5-lite: #7EA0FF;  /* the light end of the blue, for gradients */
  /* Success is semantic, not decorative — it stays green and is
     deliberately outside the gold/blue accent set. */
  --ok: #2FBF71;
  --ok-rgb: 47,191,113;

  --side-a: #F4C047;
  --side-b: #2F5AE8;

  --grad:   linear-gradient(135deg, var(--c1), var(--c5) 50%, var(--c3));
  --grad-2: linear-gradient(135deg, var(--c1), var(--c2));

  /* Filled controls use the gold plate on its own, never the full
     spectrum: text spanning gold-to-blue cannot be one colour and stay
     legible at both ends. White on this gold is 1.7:1 — unreadable — so
     the plate carries navy lettering, which is the gold convention
     anyway. --on-cta flips per theme because the light theme darkens
     the gold to a bronze that needs white back on top. */
  --grad-cta: linear-gradient(135deg, var(--c1), var(--c2));
  --on-cta:   #0B1224;

  --glow-a: 0 0 30px rgba(var(--c1-rgb),.40);
  --glow-c: 0 0 30px rgba(var(--c3-rgb),.35);
  --glow-r: 0 0 30px rgba(var(--c5-rgb),.35);
  --lift:   0 30px 60px -20px rgba(0,0,0,.6);

  --r: 16px; --r-2: 24px; --r-3: 32px;

  --ease:   cubic-bezier(.22,.61,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);
  --fast: .18s; --mid: .38s; --slow: .8s;

  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --body:    "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, monospace;

  --page: 1200px;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg:      #F6F8FC;
  --bg-2:    #E9EFF9;
  --glass:   rgba(255,255,255,.80);
  --glass-2: rgba(10,18,38,.035);
  --edge:    rgba(10,18,38,.10);
  --edge-2:  rgba(10,18,38,.20);
  --txt:   #0A1226;
  --txt-2: #4C5875;
  --txt-3: #66728F;
  --scrim-1: rgba(246,248,252,.95);
  --scrim-2: rgba(246,248,252,.76);
  --scrim-3: rgba(246,248,252,.24);
  /* Gold at full brightness fails contrast on a light ground, so the
     light theme uses a darker bronze in the same hue family. */
  --c1: #8A6309; --c2: #6E4F07; --c3: #1858C9; --c4: #C62839; --c5: #16368F;
  --live:#8A6309;
  --c1-rgb: 138,99,9;
  --c3-rgb: 24,88,201;
  --c5-rgb: 22,54,143;
  --c5-lite: #3E63C9;
  --on-cta: #FFFFFF;
  --ok: #157A44;
  --ok-rgb: 30,143,82;
  --side-a: #8A6309; --side-b: #16368F;
  --glow-a: 0 0 0 1px rgba(var(--c1-rgb),.22), 0 10px 30px -8px rgba(var(--c1-rgb),.30);
  --glow-c: 0 0 0 1px rgba(var(--c3-rgb),.22), 0 10px 30px -8px rgba(var(--c3-rgb),.28);
  --glow-r: 0 0 0 1px rgba(var(--c5-rgb),.22), 0 10px 30px -8px rgba(var(--c5-rgb),.28);
  color-scheme: light;
}

*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body {
  margin:0; background:var(--bg); color:var(--txt);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ── Background layers ──────────────────────────────────────────────
   Four fixed layers, from the reference: a masked grid, three drifting
   colour orbs, film grain, and slow-rising dots. Together they give the
   page depth without any of it being content. */
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
:root[data-theme="light"] .bg-grid{
  background-image:
    linear-gradient(rgba(10,18,38,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10,18,38,.04) 1px, transparent 1px);
}

.bg-orb{ position:fixed; border-radius:50%; filter:blur(100px); opacity:.25; pointer-events:none; z-index:0; will-change:transform; }
.bg-orb-1{ width:600px; height:600px; background:var(--c1); top:-200px; left:-200px; animation:orbFloat 20s ease-in-out infinite; }
.bg-orb-2{ width:500px; height:500px; background:var(--c5); bottom:-150px; right:-150px; animation:orbFloat 25s ease-in-out infinite reverse; }
.bg-orb-3{ width:400px; height:400px; background:var(--c3); top:50%; left:50%; opacity:.1; animation:orbFloat 30s ease-in-out infinite; }
:root[data-theme="light"] .bg-orb{ opacity:.14; }
@keyframes orbFloat{
  0%,100%{ transform:translate(0,0); }
  33%{ transform:translate(80px,-40px); }
  66%{ transform:translate(-40px,80px); }
}

.bg-noise{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.floating-dot{
  position:fixed; width:2px; height:2px; border-radius:50%;
  background:var(--txt); opacity:.2; pointer-events:none; z-index:1;
  animation:floatDot 25s linear infinite;
}
@keyframes floatDot{
  0%{ transform:translateY(100vh); opacity:0; }
  10%,90%{ opacity:.25; }
  100%{ transform:translateY(-100px); opacity:0; }
}

/* Everything above the background layers. */
.np-nav, main, .np-foot{ position:relative; z-index:10; }

/* Reading progress across the top of the viewport. */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0; z-index:200;
  background:linear-gradient(90deg,var(--c1),var(--c5),var(--c3));
  box-shadow:0 0 10px var(--c1); transition:width .1s linear;
}

/* Toast, bottom centre. */
.np-toast{
  position:fixed; bottom:30px; left:50%; z-index:200;
  transform:translateX(-50%) translateY(140px);
  background:color-mix(in srgb, var(--bg-2) 95%, transparent);
  border:1px solid var(--edge-2); backdrop-filter:blur(20px);
  padding:14px 24px; border-radius:100px; font-size:14px; font-weight:500;
  box-shadow:0 20px 40px rgba(0,0,0,.6);
  transition:transform .5s cubic-bezier(.16,1,.3,1);
  display:flex; align-items:center; gap:10px;
}
.np-toast.show{ transform:translateX(-50%) translateY(0); }

/* The live indicator, used in several places. */
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--live); position:relative; flex-shrink:0; }
.live-dot::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  background:var(--live); opacity:.4; animation:livePulse 1.5s ease-out infinite;
}
@keyframes livePulse{ 0%{ transform:scale(1); opacity:.6 } 100%{ transform:scale(2.5); opacity:0 } }

/* ── Type ───────────────────────────────────────────────────────── */
h1,h2,h3,h4{ font-family:var(--display); font-weight:800; letter-spacing:-.03em; line-height:1.03; margin:0; text-wrap:balance; }
h1{ font-size:clamp(29px,4.4vw,52px); }
h2{ font-size:clamp(21px,2.6vw,30px); }
h3{ font-size:clamp(17px,1.9vw,21px); letter-spacing:-.02em; }
p{ margin:0 0 1.05em; }

/* Gradient text that keeps moving. Reserved for the largest headline on
   a page; anywhere else it is noise. */
.grad-text{
  background:linear-gradient(100deg,var(--c3),var(--c1) 30%,var(--c4) 60%,var(--c5) 85%,var(--c3));
  background-size:260% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sweep 9s linear infinite;
}
@keyframes sweep{ to{ background-position:260% center; } }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-2); padding:7px 15px; border-radius:99px;
  background:var(--glass); border:1px solid var(--edge); backdrop-filter:blur(10px);
}
.eyebrow::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--c3);
  box-shadow:0 0 12px var(--c3); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.65)} }

.dek{ font-size:clamp(15px,1.5vw,17px); color:var(--txt-2); max-width:58ch; margin:0; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ── Layout ─────────────────────────────────────────────────────── */
.wrap{ max-width:var(--page); margin:0 auto; padding:0 24px; position:relative; }
.wrap-narrow{ max-width:820px; margin:0 auto; padding:0 24px; }
main{ display:block; min-height:60vh; }
img,svg,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
/* The hidden attribute must actually hide.
 *
 * `[hidden]` is only `display:none` in the user-agent stylesheet, so ANY
 * author rule that sets display beats it. .pf-cover-tools and
 * .pf-repos-bar both set display:flex, which is why the owner-only
 * "Reposition" and "Change cover" controls rendered for logged-out
 * visitors on member profiles: the markup said hidden, the CSS said
 * flex, and the CSS won.
 *
 * The endpoints behind those controls were never exposed — they require
 * a session and a CSRF token and answer 401/403 without one — but the
 * page had no business showing them.
 *
 * !important because the attribute selector and a class selector have
 * the same specificity, so source order would otherwise decide it, and
 * every later stylesheet would need to remember this rule exists.
 */
[hidden] { display: none !important; }

::selection{ background:var(--c1); color:var(--on-cta); }
:focus-visible{ outline:2px solid var(--c3); outline-offset:3px; border-radius:6px; }
*{ scrollbar-width:thin; scrollbar-color:var(--edge-2) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--edge-2); border-radius:99px; }

/* ── Glass ──────────────────────────────────────────────────────── */
.glass{
  position:relative; background:var(--glass); border:1px solid var(--edge);
  border-radius:var(--r-2);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  transition:transform var(--mid) var(--spring), box-shadow var(--mid) var(--ease), border-color var(--mid) var(--ease);
}
/* A gradient rim that lights up on hover, masked so it outlines the card
   rather than filling it. */
.glass::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:var(--grad); opacity:0; transition:opacity var(--mid) var(--ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.glass:hover::before{ opacity:.9; }
.glass:hover{ transform:translateY(-6px); box-shadow:var(--glow-a); border-color:transparent; }

/* ── Buttons ────────────────────────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-weight:600; font-size:15px; padding:13px 26px;
  border-radius:99px; border:1px solid var(--edge-2); background:var(--glass);
  color:var(--txt); text-decoration:none; cursor:pointer; overflow:hidden;
  backdrop-filter:blur(12px);
  transition:transform var(--fast) var(--spring), box-shadow var(--mid) var(--ease), border-color var(--fast) var(--ease);
}
.btn:hover{ transform:translateY(-3px); box-shadow:var(--glow-a); }
.btn:active{ transform:translateY(-1px) scale(.97); }
/* A highlight sweeps across on hover. */
.btn::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
  transition:transform .7s var(--ease);
}
.btn:hover::after{ transform:translateX(120%); }
.btn-accent{ background:var(--grad-cta); border-color:transparent; color:var(--on-cta); box-shadow:var(--glow-a); }
.btn-accent:hover{ box-shadow:0 0 0 1px rgba(124,58,237,.6), 0 14px 44px -8px rgba(124,58,237,.7); }
.btn-lg{ padding:16px 34px; font-size:16.5px; }
.btn-block{ width:100%; }

/* ── Header ─────────────────────────────────────────────────────── */
.np-skip{ position:absolute; left:-9999px; }
.np-skip:focus{ left:0; top:0; z-index:200; background:var(--c1); color:var(--on-cta); padding:10px 16px; }

.np-nav{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter:blur(20px) saturate(170%); -webkit-backdrop-filter:blur(20px) saturate(170%);
  border-bottom:1px solid var(--edge);
}
.np-nav-in{ max-width:var(--page); margin:0 auto; padding:0 24px; height:74px; display:flex; align-items:center; gap:28px; }

.np-logo{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.np-word{
  font-family:var(--display); font-weight:800; font-size:23px; letter-spacing:-.035em;
  background:var(--grad); background-size:200% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:sweep 7s linear infinite;
}
/* The mark is an equaliser: three bars, always moving. */
.np-mark{ display:inline-flex; align-items:flex-end; gap:3px; height:22px; }
.np-mark i{ width:4px; border-radius:99px; display:block; background:var(--grad); animation:eq 1.5s ease-in-out infinite; }
.np-mark i:nth-child(1){ height:9px;  animation-delay:0s; }
.np-mark i:nth-child(2){ height:20px; animation-delay:.2s; }
.np-mark i:nth-child(3){ height:14px; animation-delay:.4s; }
@keyframes eq{ 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(.45)} }

.np-links{ display:flex; gap:6px; margin-right:auto; }
.np-links a{
  position:relative; padding:9px 15px; border-radius:99px; font-size:14.5px; font-weight:500;
  color:var(--txt-2); text-decoration:none; white-space:nowrap;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.np-links a:hover{ color:var(--txt); background:var(--glass); }
.np-links a.on{ color:var(--txt); background:var(--glass-2); box-shadow:inset 0 0 0 1px var(--edge); }

.np-auth{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.np-hi{ font-size:13.5px; color:var(--txt-2); display:inline-flex; align-items:center; gap:7px; }
.np-hi::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); box-shadow:0 0 10px var(--ok); }
.np-auth .btn{ padding:9px 18px; font-size:14px; }

.np-theme-toggle{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--glass); border:1px solid var(--edge); color:var(--txt-2); flex-shrink:0;
  transition:transform var(--mid) var(--spring), color var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}
.np-theme-toggle:hover{ transform:rotate(-25deg) scale(1.1); color:var(--txt); box-shadow:var(--glow-c); }
.np-theme-toggle svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
.np-theme-toggle .np-sun{ display:none; }
:root[data-theme="light"] .np-theme-toggle .np-sun{ display:block; }
:root[data-theme="light"] .np-theme-toggle .np-moon{ display:none; }

.np-burger{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--edge);
  background:var(--glass); cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.np-burger span{ width:16px; height:2px; border-radius:2px; background:var(--txt); display:block;
  transition:transform var(--mid) var(--spring), opacity var(--fast) linear; }
.np-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.np-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.np-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.np-drawer{
  position:fixed; inset:74px 0 auto 0; z-index:99; padding:20px 24px 28px;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(24px);
  border-bottom:1px solid var(--edge); animation:drawerIn var(--mid) var(--ease);
}
@keyframes drawerIn{ from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:none} }
.np-drawer nav{ display:grid; gap:4px; }
.np-drawer nav a{ padding:14px 16px; border-radius:14px; font-size:17px; font-weight:600; color:var(--txt); text-decoration:none; }
.np-drawer nav a:hover{ background:var(--glass); }
.np-drawer-auth{ display:flex; gap:10px; margin-top:18px; }
.np-drawer-auth .btn{ flex:1; }
.np-drawer-auth .np-hi{ display:none; }

@media (max-width:940px){
  .np-links,.np-auth{ display:none; }
  .np-burger{ display:flex; }
  .np-nav-in{ justify-content:space-between; gap:14px; }
}

/* ── Footer ─────────────────────────────────────────────────────── */
.np-foot{ margin-top:110px; border-top:1px solid var(--edge); position:relative; }
.np-foot-in{ max-width:var(--page); margin:0 auto; padding:64px 24px 44px;
  display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:44px; }
.np-foot-brand p{ color:var(--txt-3); font-size:14.5px; max-width:32ch; margin:16px 0 0; }
.np-foot-col h3{ font-family:var(--body); font-size:11px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-3); margin:0 0 16px; }
.np-foot-col a{ display:block; padding:7px 0; font-size:15px; color:var(--txt-2); text-decoration:none;
  transition:color var(--fast) var(--ease), transform var(--fast) var(--ease); }
.np-foot-col a:hover{ color:var(--txt); transform:translateX(5px); }
.np-foot-sub p{ color:var(--txt-3); font-size:14.5px; margin:0 0 14px; }
.np-sub{ display:flex; gap:9px; }
.np-sub input{ flex:1; min-width:0; }
.np-foot-base{ max-width:var(--page); margin:0 auto; padding:22px 24px 34px; border-top:1px solid var(--edge);
  display:flex; justify-content:space-between; align-items:center; gap:16px; color:var(--txt-3); font-size:13.5px; }
.np-top{ background:var(--glass); border:1px solid var(--edge); color:var(--txt-2); cursor:pointer;
  padding:9px 18px; border-radius:99px; font-size:13.5px; font-weight:600; }
.np-top:hover{ color:var(--txt); box-shadow:var(--glow-c); }
@media (max-width:880px){ .np-foot-in{ grid-template-columns:1fr 1fr; } .np-foot-brand,.np-foot-sub{ grid-column:1/-1; } }
@media (max-width:540px){ .np-foot-in{ grid-template-columns:1fr; } .np-sub{ flex-direction:column; } }

/* ── Forms ──────────────────────────────────────────────────────── */
input[type=text],input[type=email],input[type=password],input[type=search],textarea,select{
  width:100%; padding:13px 17px; background:var(--glass); color:var(--txt);
  border:1px solid var(--edge); border-radius:14px; font-size:15px; font-family:var(--body);
  backdrop-filter:blur(10px);
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}
input:focus,textarea:focus,select:focus{ outline:none; border-color:transparent; box-shadow:var(--glow-a); background:var(--glass-2); }
::placeholder{ color:var(--txt-3); }
label{ display:block; font-size:13px; font-weight:600; color:var(--txt-2); margin-bottom:7px; }

/* ── Motion primitives ──────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px) scale(.985); }
.reveal.in{ opacity:1; transform:none;
  transition:opacity var(--slow) var(--ease), transform var(--slow) var(--spring); }
@keyframes floatIn{ from{opacity:0; transform:translateY(30px)} to{opacity:1; transform:none} }
.float-in{ animation:floatIn .7s var(--spring) both; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .aurora i{ animation:none; }
  .reveal{ opacity:1; transform:none; }
  .glass:hover,.btn:hover{ transform:none; }
}


/* ── Icons ──────────────────────────────────────────────────────────
   One inline SVG sprite injected once per page. currentColor means an
   icon always matches the text it sits beside, in either theme. */
.i{ width:1em; height:1em; display:inline-block; vertical-align:-.125em;
    fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.i-lg{ width:1.25em; height:1.25em; }
#np-sprite{ display:none; }

/* ── Filter bar ─────────────────────────────────────────────────── */
.filters{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  padding:16px 18px; margin:0 0 30px; border-radius:99px;
}
.filters form{ display:flex; align-items:center; gap:10px; flex:1; min-width:220px; }
.filters .search{ position:relative; flex:1; display:flex; align-items:center; }
.filters .search .i{ position:absolute; left:16px; color:var(--txt-3); pointer-events:none; }
.filters .search input{ padding-left:44px; border-radius:99px; }
.chips{ display:flex; gap:7px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px; border-radius:99px;
  font-size:13.5px; font-weight:600; text-decoration:none; white-space:nowrap;
  color:var(--txt-2); background:var(--glass); border:1px solid var(--edge);
  transition:color var(--fast) var(--ease), box-shadow var(--mid) var(--ease), transform var(--fast) var(--ease);
}
.chip:hover{ color:var(--txt); transform:translateY(-2px); }
.chip.on{ color:var(--on-cta); background:var(--grad-cta); border-color:transparent; box-shadow:var(--glow-a); }
@media (max-width:700px){ .filters{ border-radius:var(--r-2); } }

/* ── Section separation ─────────────────────────────────────────────
   Each band gets its own ground so polls, discussion and related do not
   read as one undifferentiated column. */
.band{ position:relative; padding:56px 0; margin:0; }
.band + .band{ margin-top:0; }

/* A soft tinted plate behind the whole band, bleeding past the wrapper. */
.band-tint::before{
  content:""; position:absolute; inset:0 -50vw; z-index:-1;
  background:linear-gradient(180deg, transparent, var(--glass) 18%, var(--glass) 82%, transparent);
}
/* A hairline that fades out at both ends. */
.band-rule::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--edge-2) 22%, var(--edge-2) 78%, transparent);
}
/* A wide colour wash, tinted per section. */
.band-glow::after{
  content:""; position:absolute; left:50%; top:0; width:min(760px,90vw); height:220px;
  transform:translateX(-50%); z-index:-1; pointer-events:none; opacity:.35;
  background:radial-gradient(ellipse at center, var(--c1), transparent 70%); filter:blur(50px);
}
.band-glow.warm::after{ background:radial-gradient(ellipse at center, var(--c4), transparent 70%); }
.band-glow.cool::after{ background:radial-gradient(ellipse at center, var(--c3), transparent 70%); }

/* Section heading with a leading icon. */
.band-head{ display:flex; align-items:center; gap:13px; margin:0 0 26px; }
.band-head .ico{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--grad-cta); color:var(--on-cta); font-size:17px; box-shadow:var(--glow-a); flex-shrink:0;
}
.band-head h2{ font-size:clamp(18px,2.1vw,24px); margin:0; }
.band-head .count{ margin-left:auto; font-size:13px; color:var(--txt-3); font-variant-numeric:tabular-nums; }

/* ── Retire the legacy chrome ───────────────────────────────────────
   Every legacy page still carries its original navbar, footer, theme
   toggle and auth links in the markup. np_nav()/np_footer() render the
   real ones; these are the leftovers.

   Dropping this rule during the rewrite is what put a bare bulleted
   navigation and a stray "Toggle Theme" button at the top of every
   legacy page. Removing the markup from twenty templates would risk
   far more than hiding it costs.

   Note the np- prefixed classes are separate tokens and are NOT matched
   here: .theme-toggle does not match .np-theme-toggle. */
.navbar, .nav-links, .nav-link,
.header-stack, header.header, header.topnav,
.site-footer, footer.footer, .site-foot,
.footer-wrap, .footer-inner, .footer-bottom, .footer-brand,
.footer-links, .footer-social, .footer-legal,
.theme-toggle, .hamburger, .auth-status, .welcome-user,
.btn-login, .btn-account, .btn-logout,
.promo-bar, .promo-marquee,
body > .logo {
  display: none !important;
}

/* ===== np-components.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   NPolls — components. Loads after np.css.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Section hero ───────────────────────────────────────────────── */
.section-head{ padding:56px 0 34px; text-align:center; }
.section-head h1{ margin:22px 0 20px; }
.section-head .dek{ margin:0 auto; }

/* ── Poll cards ─────────────────────────────────────────────────────
   Each card is a glass panel that lifts and lights up. The bar fill is
   painted by a gradient that sweeps, so a result reads as live rather
   than as a static measurement. */
.poll-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:22px; padding-bottom:20px; }

.poll-card{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
}

/* The cover: both contenders, split down the middle, with a VS badge on
   the seam. A versus poll should look like a matchup before it is read. */
.cover{
  position:relative; aspect-ratio:16/9; display:grid; grid-template-columns:1fr 1fr;
  background:var(--glass-2); overflow:hidden;
}
.cover figure{ margin:0; overflow:hidden; position:relative; }
.cover figure img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .85s var(--ease), filter var(--mid) var(--ease);
}
.cover figure:first-child img{ filter:saturate(1.05); }
.poll-card:hover .cover figure:first-child img{ transform:scale(1.08) translateX(-2%); }
.poll-card:hover .cover figure:last-child img{ transform:scale(1.08) translateX(2%); }
/* Each half is tinted toward its own side, so the colour coding starts
   in the image rather than only in the bar. */
.cover figure:first-child::after,
.cover figure:last-child::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(6,7,15,.92));
  mix-blend-mode:normal;
}
.cover figure:first-child::before,
.cover figure:last-child::before{
  content:""; position:absolute; inset:0; z-index:1; opacity:.34; mix-blend-mode:soft-light;
}
.cover figure:first-child::before{ background:var(--side-a); }
.cover figure:last-child::before{ background:var(--side-b); }
:root[data-theme="light"] .cover figure::after{ background:linear-gradient(180deg,transparent 40%,rgba(244,245,255,.94)); }

.cover .vs-badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; z-index:3;
  display:grid; place-items:center; font-family:var(--display); font-weight:800;
  font-size:12.5px; letter-spacing:.08em; color:var(--on-cta);
  background:var(--grad-cta); box-shadow:var(--glow-a), 0 0 0 5px color-mix(in srgb,var(--bg) 70%,transparent);
  animation:vsPulse 3.2s ease-in-out infinite;
}
@keyframes vsPulse{ 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.09)} }

.poll-card .body{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:16px; flex:1; }
.poll-card h2{
  font-size:clamp(17px,1.8vw,20px); line-height:1.2; margin:0;
  position:relative; z-index:2;
}
.poll-card h2 a{ text-decoration:none; }
.poll-card h2 a::after{ content:""; position:absolute; inset:0; z-index:3; }
.poll-card .meta{ font-size:13px; color:var(--txt-3); display:flex; gap:14px; align-items:center; }
.poll-card .meta .live{ display:inline-flex; align-items:center; gap:6px; color:var(--c3); font-weight:600; }
.poll-card .meta .live::before{
  content:""; width:6px; height:6px; border-radius:50%; background:var(--c3);
  box-shadow:0 0 10px var(--c3); animation:pulse 2s ease-in-out infinite;
}

/* A soft coloured wash in the corner, tinted toward whichever side leads. */
.poll-card::after{
  content:""; position:absolute; width:220px; height:220px; right:-90px; top:-90px;
  border-radius:50%; filter:blur(46px); opacity:.32; pointer-events:none;
  background:radial-gradient(circle, var(--side-a), transparent 70%);
  transition:opacity var(--mid) var(--ease);
}
.poll-card.lead-b::after{ background:radial-gradient(circle, var(--side-b), transparent 70%); }
.poll-card:hover::after{ opacity:.55; }

/* ── The result bar ─────────────────────────────────────────────── */
.result{ display:grid; gap:12px; position:relative; z-index:2; }
.result .bar{
  display:flex; height:9px; border-radius:99px; overflow:hidden;
  background:var(--glass-2); box-shadow:inset 0 1px 3px rgba(0,0,0,.35);
}
.result .bar i{ display:block; height:100%; position:relative; overflow:hidden;
  transition:width .9s var(--spring); }
.result .bar .a{ background:linear-gradient(90deg,var(--c2),var(--side-a)); }
.result .bar .b{ background:linear-gradient(90deg,var(--side-b),var(--c5)); }
/* A highlight travels along each fill on a loop. */
.result .bar i::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  animation:shine 3.4s ease-in-out infinite;
}
.result .bar .b::after{ animation-delay:1.7s; }
@keyframes shine{ 0%{transform:translateX(-100%)} 55%,100%{transform:translateX(220%)} }

.result .lg{ display:flex; justify-content:space-between; gap:14px; align-items:baseline; font-size:13px; }
.result .lg .s{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.result .lg .n{ color:var(--txt-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result .lg .p{ font-family:var(--display); font-weight:800; font-size:17px; font-variant-numeric:tabular-nums; }
.result .lg .a .p{ color:var(--side-a); }
.result .lg .b .p{ color:var(--side-b); }

/* ── Poll page ──────────────────────────────────────────────────── */
.poll-hero{ padding:48px 0 32px; text-align:center; }
.poll-hero h1{ margin:22px 0 20px; }
.poll-hero .dek{ margin:0 auto; }

/* The headline figures. Enormous, gradient-filled, counted up on load. */
.verdict{
  display:grid; grid-template-columns:1fr auto 1fr; gap:22px; align-items:center;
  padding:34px 28px; margin-bottom:22px;
}
.verdict .v{ min-width:0; text-align:center; }
.verdict .name{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--txt-2); margin:0 0 10px;
}
.verdict .pct{
  display:block; font-family:var(--display); font-weight:800;
  font-size:clamp(38px,7vw,68px); line-height:.9; letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;
}
.verdict .a .pct{ background:linear-gradient(150deg,var(--c3),var(--c2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.verdict .b .pct{ background:linear-gradient(150deg,var(--c4),var(--c5)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.verdict .n{ font-size:13.5px; color:var(--txt-3); margin-top:10px; font-variant-numeric:tabular-nums; }
.verdict .vs{
  font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-3);
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--glass); border:1px solid var(--edge);
}

.split-bar{
  display:flex; height:16px; border-radius:99px; overflow:hidden; margin:0 0 44px;
  background:var(--glass-2); box-shadow:inset 0 1px 4px rgba(0,0,0,.4);
}
.split-bar i{ display:block; height:100%; position:relative; overflow:hidden; transition:width .9s var(--spring); }
.split-bar .a{ background:linear-gradient(90deg,var(--c2),var(--side-a)); }
.split-bar .b{ background:linear-gradient(90deg,var(--side-b),var(--c5)); }
.split-bar i::after{
  content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:shine 3.4s ease-in-out infinite;
}
.split-bar .b::after{ animation-delay:1.7s; }

/* ── Ballot ─────────────────────────────────────────────────────── */
.ballot{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:0 0 18px; }
.opt{ overflow:hidden; padding:0 0 24px; display:flex; flex-direction:column; }
.opt figure{ margin:0; aspect-ratio:16/10; overflow:hidden; position:relative; }
.opt figure img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .9s var(--ease); will-change:transform;
}
.opt:hover figure img{ transform:scale(1.07); }
.opt figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(6,7,15,.85));
}
:root[data-theme="light"] .opt figure::after{ background:linear-gradient(180deg,transparent 45%,rgba(244,245,255,.9)); }
.opt h2{ font-size:20px; margin:0; padding:20px 24px 18px; position:relative; z-index:2; }
.opt .btn{ margin:auto 24px 0; }
.opt.side-a:hover{ box-shadow:var(--glow-c); }
.opt.side-b:hover{ box-shadow:var(--glow-r); }

.vote-status{ text-align:center; font-size:14.5px; min-height:1.5em; margin:6px 0 0; color:var(--txt-2); font-weight:500; }
.vote-status[data-state="error"]{ color:var(--c4); }
.vote-status[data-state="ok"]{ color:var(--ok); }

@media (max-width:760px){
  .verdict{ padding:32px 20px; gap:14px; }
  .verdict .vs{ width:44px; height:44px; font-size:12px; }
  .ballot{ grid-template-columns:1fr; }
}

/* ── Stat strip ─────────────────────────────────────────────────── */
.facts{
  list-style:none; margin:0 0 54px; padding:28px 30px;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:26px;
}
.facts .k{ display:block; font-size:10.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--txt-3); font-weight:700; margin-bottom:9px; }
.facts .v{ display:block; font-family:var(--display); font-weight:800; font-size:22px;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; }

/* ── Blocks ─────────────────────────────────────────────────────── */
.block{ padding:12px 0 0; margin-bottom:44px; }
.block > h2{
  font-size:15px; font-family:var(--body); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--txt-3); margin:0 0 22px;
  display:flex; align-items:center; gap:14px;
}
.block > h2::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--edge),transparent); }

/* ── Comments ───────────────────────────────────────────────────── */
.threads,.replies{ list-style:none; margin:0; padding:0; }
.threads{ display:grid; gap:14px; }
.cmt{ padding:20px 22px; }
.cmt-head{ display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; font-size:13px; margin-bottom:8px; }
.cmt-head .who{ font-weight:700; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cmt-head time,.cmt-head .likes{ color:var(--txt-3); }
.cmt p{ margin:0; color:var(--txt-2); font-size:16px; overflow-wrap:anywhere; }
.replies{ margin:16px 0 0; padding-left:20px; border-left:2px solid var(--edge); display:grid; gap:12px; }
.replies .cmt{ padding:12px 0; background:none; border:none; backdrop-filter:none; }
.replies .cmt::before{ display:none; }
.replies .cmt:hover{ transform:none; box-shadow:none; }

/* ── Related ────────────────────────────────────────────────────── */
.related{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.related a{
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:17px 22px; text-decoration:none; font-weight:600; font-size:16.5px;
  border-radius:var(--r); background:var(--glass); border:1px solid var(--edge);
  transition:transform var(--fast) var(--ease), box-shadow var(--mid) var(--ease), background var(--fast) var(--ease);
}
.related a:hover{ transform:translateX(6px); box-shadow:var(--glow-c); background:var(--glass-2); }
.related .n{ font-size:13px; color:var(--txt-3); font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ── Article ────────────────────────────────────────────────────── */
.article-head{ padding:64px 0 0; max-width:820px; margin:0 auto; text-align:center; }
.article-head h1{ margin:20px 0 20px; font-size:clamp(27px,4vw,44px); }
.byline{ display:flex; flex-wrap:wrap; gap:10px 20px; justify-content:center; align-items:center;
  font-size:13.5px; color:var(--txt-3); margin:26px 0 0; }
.article-cover{ margin:44px 0; border-radius:var(--r-3); overflow:hidden; position:relative; }
.article-cover img{ width:100%; }

.prose{ max-width:70ch; margin:0 auto; font-size:17.5px; line-height:1.75; color:var(--txt-2); }
.prose > p:first-of-type{ font-size:19px; color:var(--txt); }
.prose h2{ font-size:clamp(26px,3.6vw,38px); margin:1.9em 0 .5em; color:var(--txt); scroll-margin-top:96px; }
.prose h3{ font-size:clamp(20px,2.6vw,26px); margin:1.6em 0 .4em; color:var(--txt); scroll-margin-top:96px; }
.prose a{ color:var(--c3); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.prose a:hover{ color:var(--c1); }
.prose ul,.prose ol{ padding-left:1.3em; margin:0 0 1.1em; }
.prose li{ margin-bottom:.5em; }
.prose li::marker{ color:var(--c3); }
.prose img{ margin:2em 0; border-radius:var(--r-2); }
.prose blockquote{
  margin:2em 0; padding:20px 26px; border-radius:var(--r);
  background:var(--glass); border-left:3px solid var(--c1);
  font-size:1.08em; color:var(--txt);
}
.prose hr{ border:0; height:1px; margin:2.6em 0; background:linear-gradient(90deg,transparent,var(--edge-2),transparent); }
.prose table{ width:100%; border-collapse:collapse; font-size:15.5px; margin:2em 0; display:block; overflow-x:auto; }
.prose th,.prose td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--edge); }
.prose th{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--txt-3); font-weight:700; }
.prose pre{ background:var(--glass); border:1px solid var(--edge); border-radius:var(--r);
  padding:18px 20px; overflow-x:auto; font-size:14px; margin:1.8em 0; font-family:ui-monospace,monospace; }
.prose code{ font-family:ui-monospace,monospace; font-size:.87em; background:var(--glass); padding:2px 7px; border-radius:6px; }
.prose pre code{ background:none; padding:0; }

/* ── Story list ─────────────────────────────────────────────────── */
.story-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:22px; }
.story{ overflow:hidden; display:flex; flex-direction:column; }
.story figure{ margin:0; aspect-ratio:16/9; overflow:hidden; }
.story figure img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.story:hover figure img{ transform:scale(1.07); }
.story .body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.story h2{ font-size:21px; line-height:1.18; margin:0; }
.story h2 a{ text-decoration:none; }
.story h2 a::after{ content:""; position:absolute; inset:0; }
.story p{ color:var(--txt-2); font-size:14.5px; margin:0; }
.story .m{ font-size:12.5px; color:var(--txt-3); margin-top:auto; }

/* ── Pagination ─────────────────────────────────────────────────── */
.pager{ display:flex; gap:14px; justify-content:center; align-items:center; padding:44px 0; }
.pager .cur{ color:var(--txt-3); font-size:14px; padding:0 10px; }

@media (max-width:620px){
  .prose{ font-size:17.5px; }
  .prose > p:first-of-type{ font-size:19px; }
  .section-head,.poll-hero{ padding-top:48px; }
}

/* ── Category rail ──────────────────────────────────────────────── */
.cat-rail{
  display:flex; gap:9px; flex-wrap:wrap; margin:0 0 22px;
}
.cat-rail .chip .n{
  font-size:11.5px; opacity:.7; font-variant-numeric:tabular-nums;
  padding-left:7px; margin-left:1px; border-left:1px solid currentColor;
}
@media (max-width:700px){
  .cat-rail{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
  .cat-rail::-webkit-scrollbar{ display:none; }
}

/* A category tag sitting on the story image. */
.story figure{ position:relative; }
.story figure .tag{
  position:absolute; left:12px; bottom:12px; z-index:2;
  font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:6px 11px; border-radius:99px; color:#fff;
  background:color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.22);
}
:root[data-theme="light"] .story figure .tag{
  color:var(--txt); background:color-mix(in srgb,#fff 72%,transparent); border-color:var(--edge);
}
.story figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(6,7,15,.55));
}
:root[data-theme="light"] .story figure::after{ background:linear-gradient(180deg,transparent 60%,rgba(244,245,255,.5)); }
.story .m{ display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.story .m span{ display:inline-flex; align-items:center; gap:6px; }
.poll-card .meta span{ display:inline-flex; align-items:center; gap:6px; }

/* The search form inside the filter bar. */
.filters form{ display:flex; align-items:center; gap:10px; flex:1; min-width:220px; }

/* ===== np-poll.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   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; }
}

/* ===== np-article.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   NPolls — article internals.

   Stripping each article's embedded <style> removed its colours, which
   was the point — they hardcoded a dark card and would not follow the
   theme. But those blocks were also carrying the LAYOUT: .card, .grid,
   .note, .chips and the FAQ <details> all lost their structure and the
   content collapsed into flat text.

   All 62 articles come from the same generator, so the vocabulary is
   shared and one stylesheet covers them. Counted across a six-article
   sample: .card 72, .grid 18, .note 15, .bullets 14, <details> 19.
   ═══════════════════════════════════════════════════════════════════ */

/* Article-authored containers must not fight the page shell. */
.prose .wrap,
.prose .blog-article,
.prose article,
.prose section { max-width: none; padding: 0; margin: 0; width: auto; }
.prose section + section { margin-top: 2.2em; }

/* ── Headings ───────────────────────────────────────────────────────
   The display face is deliberately quirky and works at hero size; at
   subhead size inside running text it reads as a novelty. Article
   headings use the body face with weight instead. */
.prose h2,
.prose h3,
.prose h4,
.prose .sec-title {
  font-family: var(--body);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.25;
  color: var(--txt);
}
.prose h2, .prose .sec-title {
  font-size: clamp(21px, 2.5vw, 27px);
  margin: 2em 0 .7em;
  padding-bottom: .45em;
  border-bottom: 1px solid var(--edge);
  scroll-margin-top: 96px;
}
.prose h3 { font-size: clamp(18px, 2vw, 21px); margin: 1.7em 0 .5em; scroll-margin-top: 96px; }
.prose h4 { font-size: 16.5px; margin: 1.4em 0 .4em; color: var(--txt-2); }

/* ── Intro / hero block ─────────────────────────────────────────── */
.prose .hero,
.prose .intro {
  background: var(--glass); border: 1px solid var(--edge);
  border-radius: var(--r-2); padding: 22px 26px; margin: 0 0 26px;
  backdrop-filter: blur(16px);
}
.prose .hero h1, .prose .intro h1 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 8px; border: 0; padding: 0; }
.prose .dek { font-size: 16px; color: var(--txt-2); margin: 0; }

/* ── Cards, the workhorse ───────────────────────────────────────── */
.prose .card {
  position: relative;
  background: var(--glass); border: 1px solid var(--edge);
  border-radius: var(--r-2); padding: 20px 24px; margin: 0 0 18px;
  backdrop-filter: blur(16px);
  transition: border-color var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}
.prose .card:hover { border-color: var(--edge-2); }
.prose .card > :first-child { margin-top: 0; }
.prose .card > :last-child { margin-bottom: 0; }
.prose .card h2, .prose .card h3, .prose .card .sec-title {
  border: 0; padding: 0; margin-top: 0;
}

/* ── Grids ──────────────────────────────────────────────────────── */
.prose .grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px; margin: 0 0 20px; align-items: start;
}
.prose .grid > .card { margin: 0; height: 100%; }
@media (max-width: 620px) { .prose .grid { grid-template-columns: 1fr; } }

/* ── Notes and callouts ─────────────────────────────────────────────
   These carried a dark background in the original and are the one place
   the accent earns a solid fill. */
.prose .note,
.prose .callout {
  position: relative;
  background: var(--glass-2); border: 1px solid var(--edge);
  border-left: 3px solid var(--c3);
  border-radius: var(--r); padding: 16px 20px; margin: 0 0 20px;
  font-size: .97em;
}
.prose .note > :first-child, .prose .callout > :first-child { margin-top: 0; }
.prose .note > :last-child,  .prose .callout > :last-child  { margin-bottom: 0; }
.prose .note strong:first-child,
.prose .callout strong:first-child { color: var(--c3); }

/* ── Chips, pills, badges ───────────────────────────────────────── */
.prose .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
/* A badge is sometimes a whole sentence in these articles, so it has to
   be able to wrap rather than run past the measure. */
.prose p.badge{ display:block; max-width:100%; }
.prose .chip,
.prose .pill,
.prose .badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 600; padding: 6px 13px; border-radius: 99px;
  background: var(--glass-2); border: 1px solid var(--edge); color: var(--txt-2);
  white-space: nowrap;
}
.prose .badge { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* ── Lists ──────────────────────────────────────────────────────── */
.prose .bullets { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 10px; }
.prose .bullets li { position: relative; padding-left: 26px; margin: 0; }
.prose .bullets li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--grad); box-shadow: 0 0 9px var(--c3);
}

/* ── Key / value rows ───────────────────────────────────────────── */
.prose .row {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--edge);
}
.prose .row:last-child { border-bottom: 0; }
.prose .k { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-3); font-weight: 700; min-width: 130px; }
.prose .v { color: var(--txt); font-weight: 600; }

/* ── Contents list ──────────────────────────────────────────────── */
.prose .on-this-page {
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r-2);
  padding: 18px 22px; margin: 0 0 26px;
}
.prose .on-this-page ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.prose .on-this-page a { color: var(--txt-2); text-decoration: none; font-size: 15px; }
.prose .on-this-page a:hover { color: var(--c3); }

/* ── FAQ accordions ─────────────────────────────────────────────────
   19 across the sample, and with the original CSS gone they rendered as
   bare disclosure triangles on unstyled text. */
.prose details {
  background: var(--glass); border: 1px solid var(--edge);
  border-radius: var(--r); margin: 0 0 10px; overflow: hidden;
  transition: border-color var(--fast) var(--ease);
}
.prose details[open] { border-color: var(--edge-2); }
.prose details > summary {
  cursor: pointer; list-style: none; padding: 15px 20px 15px 46px;
  font-weight: 600; font-size: 16px; color: var(--txt); position: relative;
  transition: background var(--fast) var(--ease);
}
.prose details > summary::-webkit-details-marker { display: none; }
.prose details > summary:hover { background: var(--glass-2); }
/* Custom marker: a chevron that rotates open. */
.prose details > summary::before {
  content: ""; position: absolute; left: 20px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--c3); border-bottom: 2px solid var(--c3);
  transform: rotate(-45deg); transition: transform var(--mid) var(--ease);
}
.prose details[open] > summary::before { transform: rotate(45deg); margin-top: -7px; }
.prose details > *:not(summary) { padding: 0 20px; }
.prose details > *:not(summary):last-child { padding-bottom: 18px; }

/* ── Tables ─────────────────────────────────────────────────────── */
.prose .table,
.prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 22px;
  font-size: 15px; display: block; overflow-x: auto;
  border: 1px solid var(--edge); border-radius: var(--r);
}
.prose th, .prose td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--edge); }
.prose thead th {
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--txt-3); font-weight: 700; background: var(--glass-2);
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover { background: var(--glass); }

/* Articles ship inline <script> for their own widgets; nothing should
   render if one fails to run. */
.prose script { display: none; }

@media (max-width: 620px) {
  .prose .card, .prose .hero, .prose .intro { padding: 16px 18px; }
  .prose .k { min-width: 0; }
}


/* ═══════════════════════════════════════════════════════════════════
   Embedded poll — [poll:slug] inside an article body.

   Two things fought the first version of this and both are handled by
   specificity here rather than by hoping about load order:

     1. np-legacy.css sets `.vote-btn { width: 100% }` and loads AFTER
        this file, so the compact Vote button stretched to 730px and
        crushed everything beside it. `.poll-embed .pe-vote` is two
        classes and wins regardless of order.
     2. The embed sits inside `.prose`, which indents lists and spaces
        list items. Both are reset here — this is a widget, not prose.
   ═══════════════════════════════════════════════════════════════════ */
.poll-embed{
  position:relative; overflow:hidden;
  margin:36px 0; padding:26px 28px 22px; border-radius:26px;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(var(--c1-rgb),.13), transparent 58%),
    radial-gradient(ellipse at 88% 100%, rgba(var(--c5-rgb),.13), transparent 58%),
    var(--glass);
  border:1px solid var(--edge);
  backdrop-filter:blur(20px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 24px 60px -34px rgba(0,0,0,.8);
}
/* Faint grid, matching the site's ground. */
.poll-embed::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.45;
  background-image:
    linear-gradient(var(--edge) 1px, transparent 1px),
    linear-gradient(90deg, var(--edge) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%, #000, transparent 75%);
          mask-image:radial-gradient(ellipse at 50% 0%, #000, transparent 75%);
}
.poll-embed > *{ position:relative; z-index:1; }

.poll-embed .pe-kicker{
  display:flex; align-items:center; gap:8px; margin:0 0 12px;
  font-size:10px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--txt-2); max-width:none;
}
.poll-embed .pe-q{
  margin:0 0 22px; font-family:var(--display); font-weight:800;
  font-size:clamp(17px,2vw,21px); line-height:1.28; letter-spacing:-.02em;
  border:0; padding:0;
}
.poll-embed .pe-q a{ color:var(--txt); text-decoration:none; }
.poll-embed .pe-q a:hover{ color:var(--c1); }

/* Reset the prose list treatment. */
.poll-embed .pe-list{
  list-style:none; margin:0; padding:0; display:grid; gap:10px; max-width:none;
}
.poll-embed .pe-list > li{ margin:0; padding:0; list-style:none; }
.poll-embed .pe-list > li::marker{ content:none; }

.poll-embed .pe-row{
  display:flex; align-items:center; gap:14px;
  padding:12px 14px; border-radius:16px;
  background:var(--glass-2); border:1px solid transparent;
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.poll-embed .pe-row:hover{ border-color:var(--edge-2); }
.poll-embed .pe-row.is-lead{
  background:rgba(var(--c1-rgb),.08);
  border-color:rgba(var(--c1-rgb),.30);
}

.poll-embed .pe-face{
  flex:0 0 auto; width:48px; height:48px; border-radius:50%; overflow:hidden;
  border:2px solid rgba(255,255,255,.14); background:var(--glass-2);
  box-shadow:0 8px 20px rgba(0,0,0,.45);
}
.poll-embed .pe-face img{
  width:100%; height:100%; object-fit:cover; display:block;
  margin:0; border-radius:0; max-width:none;
}

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

.poll-embed .pe-track{
  display:block; height:8px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.07);
}
:root[data-theme="light"] .poll-embed .pe-track{ background:rgba(10,18,38,.08); }
/* No entrance animation on result bars.
 *
 * These used `animation: <name> .8s ... backwards` with a keyframe of
 * `from { width: 0 }`. When that animation does not run — and in the
 * embedded poll it reliably did not — `backwards` holds the FROM state
 * permanently, so every bar rendered at 0px while the label beside it
 * said 50%. Measured: 0px animated, 300px with the animation removed.
 *
 * A bar that silently reads zero is a worse failure than no animation,
 * and the transition below still animates the bar when a vote lands,
 * which is the movement that actually means something. */
.poll-embed .pe-track i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--c5),var(--c3));
  transition:width .8s var(--spring);
}
.poll-embed .pe-row.is-lead .pe-track i{ background:var(--grad-cta); }

/* The fix for the stretched button: two classes beat np-legacy's one. */
.poll-embed .pe-vote{
  flex:0 0 auto; width:auto; min-width:0;
  padding:9px 20px; font-size:12.5px; border-radius:100px;
}

.poll-embed .pe-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin:18px 0 0; padding-top:15px;
  border-top:1px solid var(--edge);
  font-size:12.5px; color:var(--txt-3); max-width:none;
}
.poll-embed .pe-foot a{ color:var(--c3); text-decoration:none; font-weight:600; }
.poll-embed .pe-foot a:hover{ text-decoration:underline; }
.poll-embed .vote-status{ margin:12px 0 0; }

@media (max-width:600px){
  .poll-embed{ padding:20px 16px 18px; border-radius:20px; }
  .poll-embed .pe-row{ flex-wrap:wrap; gap:11px; }
  .poll-embed .pe-face{ width:40px; height:40px; }
  .poll-embed .pe-b{ flex-basis:calc(100% - 130px); }
  .poll-embed .pe-vote{ flex-basis:100%; }
}
@media (prefers-reduced-motion:reduce){
  /* No entrance animation on result bars.
 *
 * These used `animation: <name> .8s ... backwards` with a keyframe of
 * `from { width: 0 }`. When that animation does not run — and in the
 * embedded poll it reliably did not — `backwards` holds the FROM state
 * permanently, so every bar rendered at 0px while the label beside it
 * said 50%. Measured: 0px animated, 300px with the animation removed.
 *
 * A bar that silently reads zero is a worse failure than no animation,
 * and the transition below still animates the bar when a vote lands,
 * which is the movement that actually means something. */
.poll-embed .pe-track i{ transition:none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Editorial prose.

   Everything above this point styles the vocabulary the 62 legacy
   articles use — .card, .grid, .note, .callout. None of it touches plain
   semantic HTML, so an article written as ordinary <p>, <h2>, <ul> got
   almost no treatment at all and rendered as body text on a dark page.
   This is the treatment for that: measure, rhythm, a lede, a drop cap,
   real section marks, pull quotes and list markers.

   Scoped to `.prose >` where it could collide, so the legacy articles —
   whose paragraphs live inside .card and .wrap — are untouched.
   ═══════════════════════════════════════════════════════════════════ */

.article-body{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
}

/* ── Measure and rhythm ─────────────────────────────────────────── */
.prose{
  font-size:clamp(16.5px,1.15vw,18px);
  line-height:1.72;
  color:var(--txt-2);
  /* Slightly tighter than the browser default so long paragraphs do not
     drift; 68ch is about 12 words a line at this size. */
  max-width:68ch;
  margin-inline:auto;
  --flow:1.35em;
}
.prose > * + *{ margin-top:var(--flow); }
.prose > p{ margin:0; }
.prose strong{ color:var(--txt); font-weight:650; }
.prose em{ color:var(--txt); font-style:italic; }

/* The opening paragraph carries the piece: larger, lighter, brighter. */
.prose > p:first-of-type{
  font-size:1.16em;
  line-height:1.62;
  color:var(--txt);
  font-weight:400;
}
/* Drop cap, on clean semantic articles only — a legacy article's first
   paragraph sits inside .card and never matches `.prose > p`. */
.prose > p:first-of-type::first-letter{
  float:left;
  font-family:var(--display);
  font-weight:800;
  font-size:3.1em;
  line-height:.84;
  margin:.06em .12em 0 0;
  background:var(--grad-cta);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}


/* ── Links ──────────────────────────────────────────────────────── */
.prose > p a, .prose > ul a, .prose > ol a, .prose blockquote a{
  color:var(--txt);
  text-decoration:none;
  background-image:linear-gradient(var(--c1),var(--c1));
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 100%;
  padding-bottom:1px;
  transition:background-size var(--fast) var(--ease), color var(--fast) var(--ease);
}
.prose > p a:hover, .prose > ul a:hover, .prose > ol a:hover{
  color:var(--c1);
  background-size:100% 2px;
}

/* ── Lists ──────────────────────────────────────────────────────── */
.prose > ul, .prose > ol{
  margin-top:var(--flow);
  padding:0; list-style:none;
  display:grid; gap:.7em;
}
.prose > ul > li, .prose > ol > li{
  position:relative;
  padding-left:1.8em;
  margin:0;
}
.prose > ul > li::before{
  content:"";
  position:absolute; left:.28em; top:.66em;
  width:7px; height:7px; border-radius:2px;
  background:var(--grad-cta);
  transform:rotate(45deg);
}
.prose > ol{ counter-reset:li; }
.prose > ol > li{ counter-increment:li; }
.prose > ol > li::before{
  content:counter(li);
  position:absolute; left:0; top:.12em;
  font-family:var(--mono); font-size:12px; font-weight:600;
  color:var(--c1);
}
.prose > ul > li > strong:first-child,
.prose > ol > li > strong:first-child{ color:var(--txt); }

/* ── Quotes ─────────────────────────────────────────────────────────
   A blockquote is a change of voice, so it gets a different measure and
   its own weight rather than an indent. */
.prose > blockquote{
  position:relative;
  margin:2em 0;
  padding:0 0 0 1.6em;
  border-left:3px solid transparent;
  border-image:var(--grad-cta) 1;
  font-family:var(--display);
  font-weight:600;
  font-size:1.18em;
  line-height:1.5;
  letter-spacing:-.015em;
  color:var(--txt);
}
.prose > blockquote p{ margin:0; }
.prose > blockquote cite{
  display:block; margin-top:.7em;
  font-family:var(--body); font-size:.72em; font-weight:500;
  font-style:normal; color:var(--txt-3);
}

/* ── Rules, figures, tables ─────────────────────────────────────── */
.prose > hr{
  border:0; height:1px; margin:2.6em 0;
  background:linear-gradient(90deg, transparent, var(--edge-2) 30%, var(--edge-2) 70%, transparent);
}
.prose > figure{ margin:2em 0; }
.prose > figure img, .prose > p > img{
  width:100%; height:auto; display:block;
  border-radius:var(--r-2); border:1px solid var(--edge);
}
.prose > figure figcaption{
  margin-top:.7em; font-size:13px; color:var(--txt-3); text-align:center;
}
.prose > table{
  width:100%; border-collapse:collapse; font-size:.92em;
  display:block; overflow-x:auto;
}
.prose > table th{
  text-align:left; padding:10px 14px; white-space:nowrap;
  font-size:11px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--txt-3); border-bottom:1px solid var(--edge-2);
}
.prose > table td{ padding:11px 14px; border-bottom:1px solid var(--edge); }

.prose code{
  font-family:var(--mono); font-size:.86em;
  padding:.15em .45em; border-radius:6px;
  background:var(--glass-2); border:1px solid var(--edge); color:var(--c1);
}
.prose > pre{
  padding:18px 20px; border-radius:var(--r-2); overflow-x:auto;
  background:var(--bg-2); border:1px solid var(--edge);
  font-family:var(--mono); font-size:13.5px; line-height:1.6;
}
.prose > pre code{ background:none; border:0; padding:0; color:var(--txt-2); }

/* The closing italic note that ends a piece. */
.prose > p:last-child em:only-child{
  display:block; padding-top:1.2em; border-top:1px solid var(--edge);
  font-size:.9em; color:var(--txt-3); font-style:italic;
}

/* An embedded poll should break the measure — it is a different object
   from the prose around it. */
.prose .poll-embed{
  width:min(100%, 780px);
  margin-inline:calc(50% - min(50%, 390px));
}

/* ── Contents rail ──────────────────────────────────────────────────
   Built by np.js from the h2s. Only appears when there is room for it
   and the article actually has sections. */
.toc{
  position:sticky; top:96px;
  align-self:start;
  max-height:calc(100vh - 130px); overflow-y:auto;
  padding-right:8px;
  scrollbar-width:thin;
}
.toc-h{
  margin:0 0 12px; font-size:10.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--txt-3);
}
.toc ol{ list-style:none; margin:0; padding:0; display:grid; gap:2px; counter-reset:toc; }
.toc li{ margin:0; counter-increment:toc; }
.toc a{
  display:flex; gap:10px; align-items:baseline;
  padding:7px 10px; border-radius:9px;
  font-size:13px; line-height:1.4; color:var(--txt-3); text-decoration:none;
  border-left:2px solid transparent;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease),
             border-color var(--fast) var(--ease);
}
.toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--mono); font-size:10px; color:var(--txt-3); flex:0 0 auto;
}
.toc a:hover{ color:var(--txt); background:var(--glass-2); }
.toc a.is-on{
  color:var(--txt); border-left-color:var(--c1); background:var(--glass-2);
}
.toc a.is-on::before{ color:var(--c1); }

/* The two-column layout applies ONLY when a contents rail was actually
   built. Declaring `grid-template-columns: 220px 1fr` unconditionally
   was a real bug: on the 62 legacy articles the rail stays hidden, the
   grid still defines two tracks, and the prose dropped into the 220px
   one — measured at 220px wide with 56 elements overflowing it.
   np.js adds .has-toc only after it finds two or more sections. */
@media (min-width:1180px){
  .article-body.has-toc{
    grid-template-columns:220px minmax(0,1fr);
    gap:56px;
  }
  /* The prose keeps its own measure inside the wider column rather than
     stretching to fill it. */
  .article-body.has-toc .prose{ margin-inline:0; }
}
@media (max-width:1179px){
  .toc{ display:none; }
}

@media (max-width:620px){
  .prose{ font-size:16.5px; line-height:1.68; }
  .prose > p:first-of-type::first-letter{ font-size:2.7em; }
  .prose > h2{ margin-top:2em; }
  .prose .poll-embed{ width:100%; margin-inline:0; }
}

/* ═══════════════════════════════════════════════════════════════════
   Article blocks.

   Typography alone does not fix a wall of text. A reader scrolling past
   six identical paragraphs has nothing to catch on, so they leave. These
   are the things that go BETWEEN paragraphs: numbers pulled out of the
   prose, a quote at a different size, a two-sided comparison, a boxed
   takeaway.

   The vocabulary is deliberately small and plain-HTML, because it has to
   be typeable into the Body field of the admin form:

     <div class="stats">  <div><b>33 km</b><span>label</span></div> … </div>
     <blockquote class="pull">…</blockquote>
     <div class="vs"> <div class="vs-side"><h4>A</h4><ul>…</ul></div> … </div>
     <div class="key"><h4>Title</h4><p>…</p></div>
     <p class="lead-in"><strong>Lead.</strong> Rest of the sentence…</p>
   ═══════════════════════════════════════════════════════════════════ */

/* ── Stat strip ──────────────────────────────────────────────────────
   Numbers buried mid-paragraph are invisible. Pulled out, they are the
   thing a scanning reader stops on. */
.prose .stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  margin:2.2em 0;
  border-radius:var(--r-2);
  overflow:hidden;
  background:var(--edge);
  border:1px solid var(--edge);
}
.prose .stats > div{
  padding:20px 22px;
  background:var(--bg-2);
  display:grid; gap:7px; align-content:start;
}
.prose .stats b{
  font-family:var(--display); font-weight:800;
  font-size:clamp(24px,3vw,32px); line-height:1;
  letter-spacing:-.03em;
  background:var(--grad-cta);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.prose .stats span{
  font-size:12.5px; line-height:1.45; color:var(--txt-3);
}

/* ── Pull quote ─────────────────────────────────────────────────────
   A change of pace, not a citation. Breaks the measure so the eye
   registers it as a different kind of object. */
.prose .pull{
  position:relative;
  margin:2.4em 0;
  padding:0 0 0 2.2em;
  border:0;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(19px,2.1vw,24px);
  line-height:1.36;
  letter-spacing:-.025em;
  color:var(--txt);
  text-wrap:balance;
}
.prose .pull::before{
  content:"\201C";
  position:absolute; left:-.06em; top:-.22em;
  font-family:var(--display); font-weight:800; font-size:2.6em; line-height:1;
  background:var(--grad-cta);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.prose .pull p{ margin:0; }
.prose .pull cite{
  display:block; margin-top:.7em;
  font-family:var(--body); font-size:.6em; font-weight:600;
  font-style:normal; letter-spacing:.02em; color:var(--txt-3);
}

/* ── Two-sided comparison ───────────────────────────────────────────
   For a piece whose whole subject is two sides, a table of differences
   does more than three paragraphs describing them. */
.prose .vs{
  display:grid; grid-template-columns:1fr 1fr; gap:14px;
  margin:2.2em 0;
}
.prose .vs-side{
  padding:20px 22px; border-radius:var(--r-2);
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(14px);
}
.prose .vs-side h4{
  margin:0 0 14px; padding:0 0 12px;
  border-bottom:1px solid var(--edge);
  font-family:var(--display); font-weight:800; font-size:15px;
  letter-spacing:.02em; color:var(--txt);
  display:flex; align-items:center; gap:9px;
}
.prose .vs-side h4::before{
  content:""; width:9px; height:9px; border-radius:3px;
  background:var(--c1); transform:rotate(45deg); flex:0 0 auto;
}
.prose .vs-side:last-child h4::before{ background:var(--c5); }
.prose .vs-side ul{
  margin:0; padding:0; list-style:none; display:grid; gap:9px;
}
.prose .vs-side li{
  position:relative; margin:0; padding-left:1.3em;
  font-size:14px; line-height:1.55; color:var(--txt-2);
}
.prose .vs-side li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:5px; height:5px; border-radius:50%; background:var(--txt-3);
}
@media (max-width:620px){
  .prose .vs{ grid-template-columns:1fr; }
}

/* ── Key takeaway ───────────────────────────────────────────────────
   One boxed conclusion per section at most. Any more and it stops
   meaning "this is the important bit". */
.prose .key{
  position:relative; overflow:hidden;
  margin:2.2em 0; padding:20px 24px 20px 26px;
  border-radius:var(--r-2);
  background:rgba(var(--c1-rgb),.06);
  border:1px solid rgba(var(--c1-rgb),.24);
}
.prose .key::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad-cta);
}
.prose .key h4{
  margin:0 0 8px; font-family:var(--display); font-weight:800;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--c1);
}
.prose .key p{ margin:0; font-size:15px; line-height:1.6; color:var(--txt); }
.prose .key p + p{ margin-top:.7em; }

/* ── Lead-in ────────────────────────────────────────────────────────
   Bolding the first few words gives a scanning reader an entry point to
   every paragraph without adding another heading. */
.prose .lead-in > strong:first-child{
  color:var(--c1); font-weight:700;
}

/* ── Aside note ─────────────────────────────────────────────────── */
.prose .side{
  margin:2em 0; padding:16px 20px;
  border-left:2px solid var(--edge-2); border-radius:0 var(--r) var(--r) 0;
  background:var(--glass-2);
  font-size:14.5px; line-height:1.6; color:var(--txt-2);
}
.prose .side strong{ color:var(--txt); }

/* Blocks are objects, not prose: they keep their own top margin rather
   than inheriting the paragraph flow. */
.prose > .stats, .prose > .pull, .prose > .vs,
.prose > .key, .prose > .side{ margin-inline:0; }

/* ═══════════════════════════════════════════════════════════════════
   Legacy articles, brought up to the editorial standard.

   62 of the 64 published articles use the older vocabulary — .intro,
   .card, .grid, .table/.row/.k/.v, .note, .chips — and between them they
   carry every one of the site's 77,432 article views. The editorial
   rules written earlier only reach plain semantic HTML, so the pages
   that actually earn the traffic were the plainest on the site.

   This closes that gap without touching a single article's markup. The
   rules below override the earlier, thinner definitions of the same
   classes; they are appended after them deliberately.
   ═══════════════════════════════════════════════════════════════════ */

/* ── The intro is the lede ───────────────────────────────────────────
   It is the first thing a reader sees and it was styled as a generic
   glass box. Now it reads as an opening: larger, brighter, with the
   accent rule the new articles get. */
.prose .intro{
  position:relative;
  background:rgba(var(--c1-rgb),.05);
  border:1px solid rgba(var(--c1-rgb),.20);
  border-radius:var(--r-2);
  padding:24px 28px 24px 30px;
  margin:0 0 30px;
  overflow:hidden;
}
.prose .intro::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--grad-cta);
}
.prose .intro > p{
  font-size:1.1em; line-height:1.62; color:var(--txt); margin:0;
}
.prose .intro > p + p{ margin-top:.8em; }
.prose .intro strong{ color:var(--txt); font-weight:650; }

/* ── Chips ───────────────────────────────────────────────────────── */
.prose .chips{ gap:7px; margin-top:16px; }
.prose .chip{
  font-size:11.5px; font-weight:600; letter-spacing:.01em;
  padding:5px 12px; border-radius:99px;
  background:var(--glass-2); border:1px solid var(--edge-2); color:var(--txt-2);
}

/* ── Cards become sections, not boxes ───────────────────────────────
   A page of ten bordered boxes reads as a form. Dropping the border and
   keeping only a top rule turns them back into sections of one article,
   which is what they are. */
.prose .card{
  background:none;
  border:0;
  border-top:1px solid var(--edge);
  border-radius:0;
  padding:26px 0 0;
  margin:0 0 30px;
  backdrop-filter:none;
  counter-increment:sec;
}
.prose .card:hover{ border-color:var(--edge); }
/* An <aside class="card"> is the article's own word for "this is beside
   the argument, not part of it", so that is the only card kept as a box.
   Everything else is a sequential section and is numbered. */
.prose aside.card{
  background:var(--glass); border:1px solid var(--edge);
  border-radius:var(--r-2); padding:22px 24px; margin:1.6em 0;
  counter-increment:none;
}
.prose aside.card > h2{ font-size:16.5px; margin-bottom:.6em; }
.prose aside.card > h2::before,
.prose aside.card > h2::after{ display:none; }

/* ── Section headings, whatever wraps them ───────────────────────────
   These articles were written by hand over two years and each one wraps
   its sections differently: some in .card, some in bare <section>, the
   newest in nothing at all. Chasing wrappers meant the treatment kept
   missing articles — the Palestinian-deaths explainer, sixth by traffic,
   was still rendering its headings in the body font.
   
   So the rule targets the heading itself. The counter lives on the h2,
   not the wrapper, so numbering works at any nesting depth. An <aside>
   is the one exception: it is beside the argument, so it is not a
   numbered step in it. */
.prose{ counter-reset:sec; }

/* A heading may be an <h2>, or any element carrying .sec-title — both
   conventions exist across these articles, and one article uses both at
   once. `.prose .sec-title` is (0,2,0) and silently outranked
   `.prose h2` (0,1,1), which is why a single article kept the body face
   while every other one changed. Listing both here settles it by source
   order; the cascade picks one value for counter-increment, so nothing
   double-counts. */
.prose h2,
.prose .sec-title{
  position:relative;
  counter-increment:sec;
  font-family:var(--display); font-weight:800; letter-spacing:-.025em;
  font-size:clamp(20px,2.3vw,26px); line-height:1.22;
  color:var(--txt); margin:2.2em 0 .7em; padding:0; border:0;
  scroll-margin-top:96px; text-wrap:balance;
}
.prose .card > h2:first-child,
.prose section > h2:first-child,
.prose > h2:first-child{ margin-top:0; }

.prose h2::before,
.prose .sec-title::before{
  content:counter(sec,decimal-leading-zero);
  display:block; margin-bottom:.5em;
  font-family:var(--mono); font-size:11px; font-weight:600;
  letter-spacing:.22em; color:var(--c1);
}
.prose h2::after,
.prose .sec-title::after{
  content:""; display:block; width:52px; height:2px; margin-top:.55em;
  border-radius:2px; background:var(--grad-cta);
}

/* Asides sit outside the numbered sequence. */
.prose aside h2,
.prose aside .sec-title{
  counter-increment:none;
  font-size:16.5px; margin:0 0 .6em;
}
.prose aside h2::before, .prose aside h2::after,
.prose aside .sec-title::before, .prose aside .sec-title::after{ display:none; }

.prose h3{
  font-family:var(--display); font-weight:700;
  font-size:clamp(16.5px,1.7vw,19px); line-height:1.3;
  margin:1.7em 0 .5em; color:var(--txt); border:0; padding:0;
  scroll-margin-top:96px;
}

/* ── Body copy inside cards ─────────────────────────────────────── */
.prose .card p,
.prose .intro p,
.prose .note p{ font-size:1em; line-height:1.7; color:var(--txt-2); max-width:68ch; }
.prose .card p + p{ margin-top:1.1em; }
.prose .card strong{ color:var(--txt); font-weight:650; }

/* Lists get the diamond markers the new articles use. */
.prose .card ul{ margin:1.1em 0; padding:0; list-style:none; display:grid; gap:.65em; }
.prose .card ul > li{ position:relative; padding-left:1.7em; margin:0; line-height:1.6; color:var(--txt-2); }
.prose .card ul > li::before{
  content:""; position:absolute; left:.26em; top:.62em;
  width:6px; height:6px; border-radius:2px;
  background:var(--grad-cta); transform:rotate(45deg);
}
.prose .card ol{ margin:1.1em 0; padding-left:1.4em; display:grid; gap:.65em; }
.prose .card ol > li{ line-height:1.6; color:var(--txt-2); padding-left:.3em; }
.prose .card ol > li::marker{ color:var(--c1); font-family:var(--mono); font-size:.85em; }

/* ── The key/value table is data — treat it as data ──────────────── */
.prose .table{
  margin:1.2em 0; border-radius:var(--r);
  border:1px solid var(--edge); overflow:hidden;
}
.prose .table .row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding:12px 16px; margin:0; border:0;
  border-bottom:1px solid var(--edge);
  background:var(--glass-2);
}
.prose .table .row:last-child{ border-bottom:0; }
.prose .table .row:nth-child(odd){ background:transparent; }
.prose .table .k{
  flex:0 0 auto; font-size:13px; font-weight:600; color:var(--txt-2);
  min-width:0;
}
.prose .table .v{
  flex:0 0 auto; text-align:right;
  font-family:var(--display); font-weight:700; font-size:14.5px; color:var(--txt);
  font-variant-numeric:tabular-nums;
}

/* ── Notes and callouts ─────────────────────────────────────────── */
.prose .note,
.prose .callout{
  margin:1.4em 0; padding:14px 18px;
  border-left:2px solid var(--edge-2); border-radius:0 var(--r) var(--r) 0;
  background:var(--glass-2); border-top:0; border-right:0; border-bottom:0;
  font-size:.94em; line-height:1.6; color:var(--txt-2);
}
.prose .note strong:first-child,
.prose .callout strong:first-child{ color:var(--c1); }

/* ── Grid ───────────────────────────────────────────────────────────
   These were two columns inside a 736px measure, which gave 360px of
   body text per column — far too narrow to read comfortably. The
   article's sections are sequential anyway, so they stack. */
.prose .grid{
  display:grid; grid-template-columns:1fr; gap:0; margin:0;
}

/* ── Details / FAQ ──────────────────────────────────────────────── */
.prose details{
  margin:.6em 0; padding:0; border-radius:var(--r);
  background:var(--glass-2); border:1px solid var(--edge);
  overflow:hidden;
}
.prose details > summary{
  cursor:pointer; padding:13px 16px; list-style:none;
  font-weight:650; font-size:.97em; color:var(--txt);
  display:flex; align-items:center; gap:10px;
}
.prose details > summary::-webkit-details-marker{ display:none; }
.prose details > summary::before{
  content:"+"; flex:0 0 auto; width:18px; height:18px; border-radius:5px;
  display:grid; place-items:center; font-size:13px; font-weight:700;
  background:rgba(var(--c1-rgb),.14); color:var(--c1);
}
.prose details[open] > summary::before{ content:"\2212"; }
.prose details[open] > summary{ border-bottom:1px solid var(--edge); }
.prose details > *:not(summary){ padding:0 16px; }
.prose details > *:not(summary):first-of-type{ padding-top:14px; }
.prose details > *:not(summary):last-child{ padding-bottom:14px; }

@media (max-width:620px){
  .prose .intro{ padding:18px 18px 18px 20px; }
  .prose .card{ padding-top:22px; margin-bottom:24px; }
  .prose .grid > .card{ padding:18px 18px; }
  .prose .table .row{ flex-wrap:wrap; gap:4px; }
  .prose .table .v{ text-align:left; }
}

/* ===== np-pages.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   NPolls — the twelve legacy pages.

   about faq contact privacy terms mygifts forum
   login register profile my_account verify

   Their inline CSS was stripped along with everything else, so their
   markup survives but had no layout. Rather than rewriting twelve
   templates, this styles the vocabulary they already use: .shell .card
   .field .tabs .badge .toast .col, and the 38 form inputs across them.

   Article-internal classes are scoped under .prose in np-article.css,
   so the .card here and the .card there cannot collide.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page shell ─────────────────────────────────────────────────────
   None of these pages wrapped their content, so it ran the full width
   of the viewport once the old CSS went. */
body > main,
body > .container,
body > .shell,
body > section,
body > .page,
body > form {
  max-width: var(--page);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.container, .page, .shell { max-width: var(--page); margin: 0 auto; padding: 40px 24px 20px; }

/* Long-form legal and info pages read best on a narrower measure. */
.legal, .page-narrow { max-width: 800px; }

h1 + p, .page-header p, .hero p { color: var(--txt-2); }
.page-header, .hero-block { padding: 46px 0 26px; }
.page-header h1, .hero-block h1 { margin: 0 0 14px; }

/* Headings on these pages behave like article headings, not heroes. */
main h2, .container h2, .shell h2 {
  font-family: var(--body); font-weight: 700; letter-spacing: -.015em;
  font-size: clamp(20px, 2.3vw, 25px); margin: 2em 0 .6em;
  padding-bottom: .4em; border-bottom: 1px solid var(--edge);
}
main h3, .container h3, .shell h3 {
  font-family: var(--body); font-weight: 700;
  font-size: 17.5px; margin: 1.6em 0 .45em;
}
main p, .container p, .shell p { color: var(--txt-2); max-width: 72ch; }
main ul, main ol, .container ul, .container ol { color: var(--txt-2); padding-left: 1.3em; max-width: 72ch; }
main li, .container li { margin-bottom: .45em; }
main li::marker { color: var(--c3); }
/* Underline links in running prose only. The earlier blanket rule also
   caught .pill, .go, .related and the back link, which is why every
   control on the poll pages appeared underlined. */
main p a, main li a, .container p a, .container li a,
.legal-card a, .about-card a, .faq-answer a {
  color: var(--c3); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
/* Anything that is a control must never be underlined. */
.pill, .btn, .chip, .go, .vote-btn, .related a, .np-links a,
.np-foot-col a, .tab, .sbtn, .ghost, .np-logo { text-decoration: none !important; }

/* ── Panels ─────────────────────────────────────────────────────── */
.card, .panel, .box {
  position: relative;
  background: var(--glass); border: 1px solid var(--edge);
  border-radius: var(--r-2); padding: 26px 28px; margin: 0 0 20px;
  backdrop-filter: blur(18px) saturate(150%);
}
.card > :first-child { margin-top: 0; }
.card > :last-child  { margin-bottom: 0; }
.card h2, .card h3 { border: 0; padding: 0; margin-top: 0; }

/* ── Auth pages ─────────────────────────────────────────────────────
   login and register are the conversion path — only 196 people reached
   the register page in two years — so they get a real centred card
   rather than a form floating on the page. */
.shell {
  min-height: 68vh; display: grid; place-items: center;
  padding: 48px 24px 72px;
}
.shell .card {
  width: 100%; max-width: 440px; padding: 34px 32px; margin: 0;
  text-align: center; box-shadow: var(--glow-a);
}
.shell .card h2 { font-family: var(--display); font-size: 26px; margin: 0 0 8px; }
.shell .card p { margin: 0 auto 22px; font-size: 15px; }
.shell .card form { text-align: left; display: grid; gap: 14px; }
.shell .card .icon {
  width: 58px; height: 58px; margin: 0 auto 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 24px; color:var(--on-cta);
  background:var(--grad-cta); box-shadow: var(--glow-a);
}
.shell .card .btn { width: 100%; margin-top: 4px; }

/* ── Forms ──────────────────────────────────────────────────────── */
.field { display: grid; gap: 7px; margin-bottom: 14px; }
.field label, .label { font-size: 13px; font-weight: 600; color: var(--txt-2); }
.input, input.input { width: 100%; }
form .btn { margin-top: 6px; }
.hint, .sub-msg, .tiny, .sm, .muted {
  font-size: 13px; color: var(--txt-3);
}
.sub-msg { margin-top: 14px; }

/* ── Tabs (my_account) ──────────────────────────────────────────── */
.tabs {
  display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 24px;
  padding: 7px; border-radius: 99px;
  background: var(--glass); border: 1px solid var(--edge);
}
.tab {
  padding: 9px 17px; border-radius: 99px; font-size: 14px; font-weight: 600;
  color: var(--txt-2); text-decoration: none !important; white-space: nowrap;
  transition: color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.tab:hover { color: var(--txt); background: var(--glass-2); }
.tab.active { color:var(--on-cta); background:var(--grad-cta); box-shadow: var(--glow-a); }
@media (max-width: 700px) {
  .tabs { border-radius: var(--r); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
}

/* ── Key / value ────────────────────────────────────────────────── */
.row, .kv {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--edge);
}
.row:last-child, .kv:last-child { border-bottom: 0; }
.value { color: var(--txt); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 99px;
  background: var(--glass-2); border: 1px solid var(--edge); color: var(--txt-2);
}
.badge.ok, .badge.success { color: var(--ok); border-color: rgba(var(--ok-rgb),.35); }
.badge.warn { color: var(--c5); border-color: rgba(245,158,11,.35); }
.badge.err, .badge.danger { color: var(--c4); border-color: rgba(244,63,94,.35); }

/* ── Toasts ─────────────────────────────────────────────────────── */
.toast {
  padding: 14px 20px; border-radius: var(--r); margin: 0 0 20px;
  background: var(--glass-2); border: 1px solid var(--edge);
  border-left: 3px solid var(--c3); font-size: 14.5px;
}
.toast.error   { border-left-color: var(--c4); }
.toast.success { border-left-color: var(--ok); }
.toast:empty   { display: none; }

/* ── Columns and card grids ─────────────────────────────────────── */
.cols, .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.col { min-width: 0; }

/* Monthly gifts */
.cat-card {
  position: relative; overflow: hidden;
  background: var(--glass); border: 1px solid var(--edge);
  border-radius: var(--r-2); padding: 22px 24px;
  transition: transform var(--mid) var(--spring), box-shadow var(--mid) var(--ease);
}
.cat-card:hover { transform: translateY(-4px); box-shadow: var(--glow-a); }
.cat-card.locked { opacity: .55; }
.cat-card.locked::after {
  content: "Locked"; position: absolute; top: 14px; right: 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px;
  background: var(--glass-2); border: 1px solid var(--edge); color: var(--txt-3);
}

/* ── Tables on these pages ──────────────────────────────────────── */
main table, .container table {
  width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 22px;
  display: block; overflow-x: auto;
}
main th, main td, .container th, .container td {
  padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--edge);
}
main thead th, .container thead th {
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--txt-3); font-weight: 700;
}

/* ── Empty states ───────────────────────────────────────────────── */
.empty, .no-results {
  text-align: center; padding: 60px 20px; color: var(--txt-3);
}

@media (max-width: 620px) {
  .container, .page, .shell { padding-left: 18px; padding-right: 18px; }
  .card, .panel { padding: 20px 20px; }
  .shell .card { padding: 26px 22px; }
}

/* ===== np-auth.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   NPolls — login and register.

   Both pages used to be one narrow 440px column with two stacked
   headings, so they scrolled instead of sitting on screen. They are now
   a single card split in two: a branded rail that says what an account
   is for, and the form beside it in a two-up grid.

   The card tilts to the pointer and the rail contents lift out of it on
   their own Z planes, so the depth is real perspective rather than a
   drop shadow pretending to be one.
   ═══════════════════════════════════════════════════════════════════ */

.auth-wrap{
  min-height:calc(100vh - 210px);
  display:grid; place-items:center;
  padding:44px 24px 72px;
  perspective:1600px;
}

.auth-card{
  position:relative; width:100%; max-width:1040px;
  display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  border-radius:30px; overflow:hidden; isolation:isolate;
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(26px) saturate(150%);
  box-shadow:var(--lift), inset 0 1px 0 rgba(255,255,255,.07);
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .45s cubic-bezier(.16,1,.3,1);
  animation:authIn .8s cubic-bezier(.16,1,.3,1) backwards;
}
@keyframes authIn{
  from{ opacity:0; transform:translateY(26px) rotateX(7deg) scale(.97) }
  to  { opacity:1; transform:none }
}
:root[data-theme="light"] .auth-card{
  box-shadow:0 40px 90px -40px rgba(10,18,38,.35), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ── Left rail ──────────────────────────────────────────────────── */
.auth-aside{
  position:relative; overflow:hidden;
  padding:40px 38px;
  display:flex; flex-direction:column; gap:22px;
  background:linear-gradient(160deg, rgba(var(--c1-rgb),.14), rgba(var(--c5-rgb),.07) 45%, rgba(var(--c3-rgb),.12));
  border-right:1px solid var(--edge);
}
:root[data-theme="light"] .auth-aside{
  background:linear-gradient(160deg, rgba(var(--c1-rgb),.10), rgba(var(--c5-rgb),.05) 45%, rgba(var(--c3-rgb),.10));
}
/* A slow drifting light behind the rail. */
.auth-aside .aura{
  position:absolute; width:460px; height:460px; left:-140px; top:-130px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--c1), transparent 62%);
  opacity:.30; filter:blur(72px);
  animation:auraDrift 14s ease-in-out infinite;
}
@keyframes auraDrift{
  0%,100%{ transform:translate(0,0) scale(1) }
  33%    { transform:translate(70px,60px) scale(1.14) }
  66%    { transform:translate(24px,-46px) scale(.94) }
}
/* Faint graph paper, so the rail is not a flat wash. */
.auth-aside .mesh{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--edge) 1px, transparent 1px),
    linear-gradient(90deg, var(--edge) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse at 30% 20%, #000, transparent 78%);
          mask-image:radial-gradient(ellipse at 30% 20%, #000, transparent 78%);
}
.auth-aside > *:not(.aura):not(.mesh){ position:relative; z-index:1; }

.auth-brand{ display:flex; align-items:center; gap:11px; transform:translateZ(38px); }
.auth-brand .mark{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center;
  background:var(--grad-cta); box-shadow:var(--glow-a);
}
.auth-brand .mark .i{ width:19px; height:19px; color:var(--on-cta); }
.auth-brand .wm{ font-family:var(--display); font-weight:800; font-size:19px; letter-spacing:-.02em; }

.auth-hl{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(25px,2.6vw,34px); line-height:1.08; margin:6px 0 0;
  transform:translateZ(52px);
}
.auth-hl .accent{
  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;
}
.auth-dek{
  color:var(--txt-2); font-size:14px; line-height:1.6; margin:0; max-width:34ch;
  transform:translateZ(30px);
}

.auth-perks{
  list-style:none; margin:auto 0 0; padding:0;
  display:grid; gap:14px; transform:translateZ(24px);
}
.auth-perks li{ display:flex; gap:12px; align-items:flex-start; margin:0; }
.auth-perks .pi{
  flex-shrink:0; width:34px; height:34px; border-radius:11px;
  display:grid; place-items:center;
  background:var(--glass-2); border:1px solid var(--edge); color:var(--c3);
  transition:transform var(--mid) var(--spring), color var(--mid) var(--ease);
}
.auth-perks li:hover .pi{ transform:translateY(-2px) rotate(-6deg); color:var(--c1); }
.auth-perks .pi .i{ width:17px; height:17px; }
.auth-perks span{ font-size:12.5px; color:var(--txt-2); line-height:1.5; }
.auth-perks span strong{ display:block; font-size:13.5px; font-weight:700; color:var(--txt); margin-bottom:1px; }

.auth-trust{
  display:flex; align-items:center; gap:8px; margin:0;
  font-size:11.5px; color:var(--txt-3); line-height:1.45;
  padding-top:16px; border-top:1px solid var(--edge);
}
.auth-trust .i{ width:15px; height:15px; flex-shrink:0; color:var(--c3); }

/* ── Right rail: the form ───────────────────────────────────────── */
.auth-form{ padding:40px 42px; display:flex; flex-direction:column; gap:22px; }
.af-head{ display:flex; align-items:center; gap:14px; }
.af-icon{
  width:46px; height:46px; border-radius:15px; flex-shrink:0;
  display:grid; place-items:center; position:relative;
  background:var(--glass-2); border:1px solid var(--edge-2); color:var(--txt);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.af-icon .i{ width:21px; height:21px; }
/* A ring that breathes, so the header has a pulse of its own. */
.af-icon::after{
  content:""; position:absolute; inset:-4px; border-radius:19px;
  border:1px solid var(--c1); opacity:0;
  animation:afPulse 3.2s ease-out infinite;
}
@keyframes afPulse{
  0%  { opacity:.5; transform:scale(.9) }
  70% { opacity:0;  transform:scale(1.12) }
  100%{ opacity:0;  transform:scale(1.12) }
}
.af-head h1{ font-family:var(--display); font-weight:800; font-size:clamp(20px,2.1vw,26px); margin:0; letter-spacing:-.02em; }
.af-head p{ margin:2px 0 0; font-size:13px; color:var(--txt-2); }

.auth-form .form{ display:flex; flex-direction:column; gap:18px; }
/* Two up, so four fields take two rows instead of four. */
.af-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.af-grid.one{ grid-template-columns:1fr; }
.af-cell{ display:grid; gap:7px; min-width:0; }
.auth-form .label{ font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--txt-2); }

.auth-form .field{
  position:relative; display:flex; align-items:center;
  border-radius:14px; background:var(--glass-2);
  border:1px solid var(--edge);
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast) var(--ease);
}
.auth-form .field > .i{
  position:absolute; left:14px; width:17px; height:17px; color:var(--txt-3);
  pointer-events:none; transition:color var(--fast) var(--ease);
}
.auth-form .field .input{
  width:100%; background:transparent; border:0; outline:0;
  padding:13px 14px 13px 42px; font-family:var(--body); font-size:14.5px; color:var(--txt);
}
.auth-form .field .input::placeholder{ color:var(--txt-3); }
.auth-form .field:focus-within{
  border-color:transparent; background:var(--glass);
  box-shadow:0 0 0 1.5px var(--c1), 0 0 26px -8px var(--c1);
}
.auth-form .field:focus-within > .i{ color:var(--c1); }

/* Show/hide. A password field people cannot read back is a support
   ticket waiting to happen. */
.peek{
  background:none; border:0; cursor:pointer; padding:0 13px 0 8px;
  color:var(--txt-3); display:grid; place-items:center;
  transition:color var(--fast) var(--ease);
}
.peek:hover{ color:var(--txt); }
.peek .i{ width:17px; height:17px; }

/* Strength meter */
.pw-meter{ display:flex; align-items:center; gap:10px; }
.pw-meter .bars{ display:flex; gap:4px; flex:1; }
.pw-meter .bars i{
  flex:1; height:3px; border-radius:99px; background:var(--glass-2);
  transition:background .35s var(--ease);
}
.pw-meter .lbl{ font-size:11px; font-weight:600; color:var(--txt-3); min-width:52px; text-align:right; }
.pw-meter[data-level="1"] .bars i:nth-child(-n+1){ background:var(--c1); }
.pw-meter[data-level="2"] .bars i:nth-child(-n+2){ background:var(--c5); }
.pw-meter[data-level="3"] .bars i:nth-child(-n+3){ background:var(--c5); }
.pw-meter[data-level="4"] .bars i{ background:var(--c3); }

.match-note{ font-size:11.5px; margin:0; color:var(--txt-3); min-height:1em; }
.match-note.ok{ color:var(--c3); }
.match-note.no{ color:var(--c1); }

.af-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; padding:0; border:0; margin:0;
}
.remember{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--txt-2); cursor:pointer; }
.remember input{ width:16px; height:16px; accent-color:var(--c1); cursor:pointer; }
.auth-form .link{ font-size:13px; color:var(--c3); text-decoration:none; }
.auth-form .link:hover{ text-decoration:underline; }

/* ── Submit ─────────────────────────────────────────────────────── */
.btn-xl{
  position:relative; overflow:hidden; width:100%;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:15px 26px; border-radius:100px; border:0; cursor:pointer;
  font-family:var(--body); font-size:15px; font-weight:700; color:var(--on-cta);
  background:var(--grad-cta); background-size:200% auto;
  box-shadow:var(--glow-a);
  transition:transform var(--fast) var(--spring), box-shadow var(--mid) var(--ease), background-position .6s var(--ease);
}
.btn-xl:hover{ transform:translateY(-2px); background-position:right center; box-shadow:0 16px 44px -14px var(--c1); }
.btn-xl:active{ transform:translateY(0); }
.btn-xl .i{ width:18px; height:18px; }
.btn-xl::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.5) 50%,transparent 80%);
  transform:translateX(-100%);
}
.btn-xl:hover::after{ animation:pillSheen 1.1s var(--ease); }

.auth-form .foot{ text-align:center; font-size:13.5px; color:var(--txt-2); }
.auth-form .foot a{ color:var(--c3); font-weight:600; text-decoration:none; }
.auth-form .foot a:hover{ text-decoration:underline; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:900px){
  .auth-card{ grid-template-columns:1fr; max-width:560px; }
  /* On one column the rail becomes a short banner: the perks would
     otherwise push the form off screen, which is the problem this
     layout exists to solve. */
  .auth-aside{ border-right:0; border-bottom:1px solid var(--edge); padding:30px 30px 28px; gap:16px; }
  .auth-perks, .auth-trust{ display:none; }
  .auth-form{ padding:30px; }
  .af-grid{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .auth-wrap{ padding:24px 16px 56px; }
  .auth-card{ border-radius:24px; }
  .auth-aside, .auth-form{ padding:24px 22px; }
}

@media (prefers-reduced-motion:reduce){
  .auth-card, .auth-aside .aura, .af-icon::after, .auth-hl .accent{ animation:none; }
  .auth-card{ transform:none !important; }
  .btn-xl:hover{ transform:none; }
  .btn-xl:hover::after{ animation:none; }
}

/* ===== np-account.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   NPolls — the account page.

   my_account.php wraps itself in .container-page.account-wrap, and
   neither class existed in any stylesheet, so the page had no measure
   and no padding: everything ran flush to the left edge of the viewport.
   The KPI tiles, timeline and comment cards were unstyled too, which is
   why they read as stacked bare text.

   The page also referenced --spacing-*, --accent1, --muted and --border
   from the old stylesheet in inline style attributes. Those are aliased
   at the bottom rather than edited out of 1,000 lines of PHP.
   ═══════════════════════════════════════════════════════════════════ */

.container-page, .account-wrap{
  max-width:var(--page); margin:0 auto; padding:34px 24px 72px;
}
/* Both classes sit on the same element, so the padding must not double. */
.container-page.account-wrap{ padding:34px 24px 72px; }

/* The submit spinner was a FontAwesome glyph, so it showed nothing while
   the form was in flight. Drawn in CSS instead. */
.np-spin{
  display:inline-block; width:14px; height:14px; vertical-align:-2px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:npSpin .7s linear infinite;
}
@keyframes npSpin{ to{ transform:rotate(360deg) } }
@media (prefers-reduced-motion:reduce){ .np-spin{ animation-duration:2s } }

/* ── Header ─────────────────────────────────────────────────────── */
.acct-header{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
  padding:28px 30px; margin:0 0 20px; border-radius:var(--r-3);
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(22px) saturate(150%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.acct-header::before{
  content:""; position:absolute; width:380px; height:380px; right:-120px; top:-190px;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--c1), transparent 65%);
  opacity:.16; filter:blur(64px);
}
.acct-header > *{ position:relative; z-index:1; }

.profile{ display:flex; align-items:center; gap:18px; min-width:0; }

/* The avatar sat at the page origin with its ring bleeding off-screen. */
.avatar{
  position:relative; flex-shrink:0;
  width:72px; height:72px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--display); font-weight:800; font-size:27px;
  color:var(--on-cta); background:var(--grad-cta);
  box-shadow:var(--glow-a), inset 0 2px 4px rgba(255,255,255,.28);
}
.avatar .progress-ring{
  position:absolute; inset:0; width:72px; height:72px;
  transform:rotate(-90deg); pointer-events:none;
}
.avatar .progress-ring circle{
  fill:none; stroke:var(--c3); stroke-width:2; opacity:.6;
  r:34px; cx:36px; cy:36px;
  stroke-dasharray:214; stroke-dashoffset:64; stroke-linecap:round;
}
.header-meta{ min-width:0; }
.header-meta h1{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(21px,2.4vw,30px); margin:0; line-height:1.1;
}
.header-meta small{ display:block; margin-top:5px; font-size:12.5px; color:var(--txt-2); }

.header-actions{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; }

/* ── Buttons ────────────────────────────────────────────────────── */
.container-page .btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:100px; cursor:pointer;
  font-family:var(--body); font-size:13.5px; font-weight:600;
  color:var(--txt); background:var(--glass-2);
  border:1px solid var(--edge); text-decoration:none; white-space:nowrap;
  transition:border-color var(--fast) var(--ease), transform var(--fast) var(--spring),
             background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.container-page .btn:hover{ border-color:var(--edge-2); transform:translateY(-2px); background:var(--glass); }
.container-page .btn .i{ width:16px; height:16px; }
.container-page .btn.primary{
  background:var(--grad-cta); color:var(--on-cta); border-color:transparent;
  box-shadow:var(--glow-a);
}
.container-page .btn.primary:hover{ box-shadow:0 14px 36px -12px var(--c1); }
.container-page .btn.danger{ color:var(--c4); border-color:rgba(255,90,110,.28); }
.container-page .btn.danger:hover{ background:rgba(255,90,110,.10); border-color:var(--c4); }
.container-page .btn.ghost{ background:transparent; }
.container-page .btn.sm{ padding:7px 13px; font-size:12.5px; }
.container-page .btn.sm .i{ width:14px; height:14px; }

/* ── KPI tiles ──────────────────────────────────────────────────── */
.kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:14px; margin:0 0 22px;
}
.kpi{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px;
  padding:20px 22px; border-radius:var(--r-2);
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color var(--mid) var(--ease), transform var(--mid) var(--spring);
}
.kpi:hover{ border-color:var(--edge-2); transform:translateY(-3px); }
.kpi > div{ min-width:0; flex:1; }
.kpi-icon{
  flex-shrink:0; width:42px; height:42px; border-radius:14px;
  display:grid; place-items:center;
  background:var(--glass-2); border:1px solid var(--edge); color:var(--c1);
}
.kpi-icon .i{ width:19px; height:19px; }
.kpi-num{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(22px,2.4vw,30px); line-height:1; font-variant-numeric:tabular-nums;
}
.kpi-label{
  font-size:10.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-2); margin-top:6px;
}
.kpi-trend{
  flex-shrink:0; align-self:flex-start;
  font-size:11px; font-weight:700; padding:4px 9px; border-radius:99px;
  font-variant-numeric:tabular-nums;
}
.kpi-trend.up  { color:var(--ok); background:rgba(var(--ok-rgb),.12); border:1px solid rgba(var(--ok-rgb),.24); }
.kpi-trend.down{ color:var(--c4); background:rgba(255,90,110,.10); border:1px solid rgba(255,90,110,.22); }

/* ── Filter toolbar ─────────────────────────────────────────────────
   The three selects were full-viewport-width blocks stacked down the
   page. They belong on one row with the search. */
.toolbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 14px; margin:0 0 20px; border-radius:100px;
  background:var(--glass); border:1px solid var(--edge); backdrop-filter:blur(16px);
}
.toolbar .filters{
  display:flex; gap:9px; flex-wrap:wrap; align-items:center;
  padding:0; border:0; background:none; backdrop-filter:none; margin:0;
}
.toolbar select,
.toolbar input[type="search"]{
  appearance:none; -webkit-appearance:none;
  font-family:var(--body); font-size:13px; font-weight:500; color:var(--txt);
  background:var(--glass-2); border:1px solid var(--edge);
  border-radius:100px; padding:9px 34px 9px 15px; cursor:pointer;
  transition:border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  /* The arrow is drawn inline so the control needs no extra markup. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C88A6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:14px;
}
.toolbar input[type="search"]{
  background-image:none; padding:9px 16px; cursor:text; min-width:190px; width:auto;
}
.toolbar select:focus, .toolbar input[type="search"]:focus{
  outline:0; border-color:transparent; box-shadow:0 0 0 1.5px var(--c1);
}
.toolbar select option{ background:var(--bg-2); color:var(--txt); }

/* ── Section panel ──────────────────────────────────────────────── */
.container-page .grid{
  display:grid; grid-template-columns:1fr; gap:20px;
}
.container-page .section{
  border-radius:var(--r-2); overflow:hidden;
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.container-page .section > h2{
  display:flex; align-items:center; gap:11px;
  margin:0; padding:18px 24px;
  font-family:var(--display); font-weight:700; font-size:16.5px; letter-spacing:-.01em;
  border-bottom:1px solid var(--edge);
}
.container-page .section > h2 .i{ width:18px; height:18px; color:var(--c1); }
.container-page .section > .body{ padding:20px 24px 24px; }

/* ── Timeline ───────────────────────────────────────────────────── */
.timeline{ display:grid; gap:10px; }
.time-item{
  position:relative; padding:15px 18px 15px 34px; border-radius:var(--r);
  background:var(--glass-2); border:1px solid var(--edge);
  transition:border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.time-item:hover{ border-color:var(--edge-2); transform:translateX(3px); }
/* The rail and its node, so a list of votes reads as a sequence. */
.time-item::before{
  content:""; position:absolute; left:15px; top:20px;
  width:7px; height:7px; border-radius:50%;
  background:var(--c1); box-shadow:0 0 0 3px rgba(var(--c1-rgb),.16);
}
.time-item::after{
  content:""; position:absolute; left:18px; top:30px; bottom:-11px; width:1px;
  background:var(--edge);
}
.time-item:last-child::after{ display:none; }
.item-row{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
.poll-link{
  font-weight:600; font-size:14.5px; color:var(--txt); text-decoration:none;
  transition:color var(--fast) var(--ease);
}
.poll-link:hover{ color:var(--c3); }
.container-page .meta{ font-size:12px; color:var(--txt-3); font-variant-numeric:tabular-nums; }

/* ── Badges ─────────────────────────────────────────────────────── */
.badges{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.container-page .badge{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:4px 10px; border-radius:99px;
  background:var(--glass-2); border:1px solid var(--edge); color:var(--txt-2);
}
.container-page .badge .i{ width:12px; height:12px; }
.badge.option-badge{ color:var(--c1); border-color:rgba(var(--c1-rgb),.30); background:rgba(var(--c1-rgb),.10); }
.badge.tech  { color:var(--c3); border-color:rgba(var(--c3-rgb),.30); background:rgba(var(--c3-rgb),.10); }
.badge.anime { color:var(--c5-lite); border-color:rgba(var(--c5-rgb),.34); background:rgba(var(--c5-rgb),.14); }
.badge.gaming{ color:var(--ok); border-color:rgba(var(--ok-rgb),.28); background:rgba(var(--ok-rgb),.10); }
.badge-dot::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--c3);
}

/* ── Comment cards ──────────────────────────────────────────────── */
.comments-stack{ display:grid; gap:12px; }
.comment-card{
  padding:17px 19px; border-radius:var(--r-2);
  background:var(--glass-2); border:1px solid var(--edge);
  transition:border-color var(--fast) var(--ease);
}
.comment-card:hover{ border-color:var(--edge-2); }
.comment-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:11px;
}
.comment-body{
  font-size:14px; line-height:1.6; color:var(--txt-2);
  padding:12px 15px; border-radius:var(--r);
  background:var(--glass-2); border-left:2px solid var(--c1);
}
/* Long comments are clamped until the Show more button unclamps them. */
.comment-body[data-clip]{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.comment-body[data-clip].open{ display:block; -webkit-line-clamp:none; }
.comment-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }

/* ── Empty state ────────────────────────────────────────────────── */
.container-page .empty{
  text-align:center; padding:56px 20px; color:var(--txt-2);
  display:grid; gap:16px; justify-items:center;
}
.container-page .empty p{ margin:0; }

/* ── Settings form ──────────────────────────────────────────────── */
.notif-form{ display:grid; gap:12px; max-width:56rem; }
.notif-form label{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  font-size:14px; color:var(--txt-2); cursor:pointer;
  padding:12px 15px; border-radius:var(--r);
  background:var(--glass-2); border:1px solid var(--edge);
  transition:border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.notif-form label:hover{ border-color:var(--edge-2); color:var(--txt); }
.notif-form input[type="checkbox"]{ width:17px; height:17px; accent-color:var(--c1); cursor:pointer; flex-shrink:0; }
.notif-form input[type="number"]{
  font-family:var(--body); font-size:14px; color:var(--txt);
  background:var(--glass); border:1px solid var(--edge);
  border-radius:9px; padding:5px 8px;
}
.notif-form h3{ font-family:var(--display); font-size:15.5px; margin:0; }

/* ── Pagination ─────────────────────────────────────────────────── */
.container-page .pagination{
  display:flex; gap:6px; justify-content:center; align-items:center;
  flex-wrap:wrap; margin-top:24px;
}
.container-page .pagination a,
.container-page .pagination span{
  min-width:36px; height:36px; padding:0 11px; border-radius:11px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:600; text-decoration:none;
  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);
}
.container-page .pagination a:hover{ color:var(--txt); border-color:var(--edge-2); }
.container-page .pagination .active{
  color:var(--on-cta); background:var(--grad-cta); border-color:transparent;
}
.container-page .pagination .i{ width:15px; height:15px; }

/* ── Back to top ────────────────────────────────────────────────── */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  color:var(--on-cta); background:var(--grad-cta); border:0;
  box-shadow:var(--glow-a);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity var(--mid) var(--ease), transform var(--mid) var(--spring), visibility var(--mid);
}
.to-top.show{ opacity:1; visibility:visible; transform:none; }
.to-top .i{ width:19px; height:19px; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:760px){
  .container-page{ padding:22px 16px 60px; }
  .acct-header{ padding:22px 20px; }
  .header-actions{ width:100%; }
  .toolbar{ border-radius:var(--r-2); }
  .toolbar input[type="search"]{ min-width:0; flex:1; }
  .container-page .section > h2{ padding:15px 18px; font-size:15px; }
  .container-page .section > .body{ padding:16px 18px 20px; }
}
@media (prefers-reduced-motion:reduce){
  .kpi:hover, .time-item:hover, .container-page .btn:hover{ transform:none; }
}

/* ── Legacy variable aliases ────────────────────────────────────────
   my_account.php carries ~8 inline style attributes referencing tokens
   from the stylesheet that was removed. An undefined custom property
   resolves to nothing, so `background:var(--accent1)` silently painted
   no background at all. Aliasing costs six lines; rewriting the inline
   styles means editing a thousand lines of PHP. */
:root{
  --accent1: var(--c1);
  --accent2: var(--c3);
  --muted:   var(--txt-2);
  --border:  var(--edge);
  --spacing-xs: 8px;
  --spacing-sm: 14px;
  --spacing-md: 22px;
  --spacing-lg: 32px;
}

/* Once a member uploads a photo, the dashboard avatar shows it instead
   of the initial. */
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:50%; }

/* ===== np-profile.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   NPolls — public member profiles (/u/{handle}) and the profile editor.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cover ──────────────────────────────────────────────────────── */
.pf-head{
  position:relative; margin:22px 0 26px;
  border-radius:var(--r-3); overflow:hidden;
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.pf-cover{ position:relative; aspect-ratio:4/1; min-height:150px; overflow:hidden; background:var(--bg-2); }
.pf-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
/* No cover uploaded: the palette itself becomes the banner rather than
   leaving a grey slab. */
.pf-cover-fallback{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 18% 20%, rgba(var(--c1-rgb),.42), transparent 58%),
    radial-gradient(ellipse at 78% 70%, rgba(var(--c5-rgb),.42), transparent 60%),
    linear-gradient(120deg, var(--bg-2), var(--bg));
}
.pf-cover-fallback::after{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(var(--edge) 1px, transparent 1px),
    linear-gradient(90deg, var(--edge) 1px, transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(ellipse at 40% 30%, #000, transparent 80%);
          mask-image:radial-gradient(ellipse at 40% 30%, #000, transparent 80%);
}
.pf-cover-scrim{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, var(--scrim-1) 0%, var(--scrim-3) 62%, transparent 100%);
}

/* ── Identity bar ───────────────────────────────────────────────── */
.pf-bar{
  position:relative; z-index:2;
  display:flex; align-items:flex-end; gap:20px; flex-wrap:wrap;
  padding:0 30px 22px;
  /* Pull the row up so the avatar straddles the cover edge. */
  margin-top:-56px;
}
.pf-avatar{
  flex-shrink:0; width:128px; height:128px; border-radius:50%;
  overflow:hidden; display:grid; place-items:center;
  background:var(--grad-cta); color:var(--on-cta);
  border:4px solid var(--bg);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.pf-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-initial{ font-family:var(--display); font-weight:800; font-size:46px; }

.pf-who{ flex:1; min-width:220px; padding-bottom:4px; }
.pf-who h1{
  font-family:var(--display); font-weight:800; letter-spacing:-.03em;
  font-size:clamp(22px,2.6vw,32px); margin:0; line-height:1.1;
}
.pf-handle{
  margin:3px 0 0; font-family:var(--mono); font-size:13px; color:var(--c1);
}
.pf-bio{ margin:11px 0 0; font-size:14.5px; line-height:1.6; color:var(--txt-2); max-width:60ch; }
.pf-joined{
  display:flex; align-items:center; gap:7px;
  margin:11px 0 0; font-size:12.5px; color:var(--txt-3);
}
.pf-joined .i{ width:14px; height:14px; }

.pf-follow{ width:auto; min-width:158px; }
/* Following is a state you can leave, so it stops shouting once set. */
.pf-follow.is-following{
  background:var(--glass-2); color:var(--txt);
  border:1px solid var(--edge-2); box-shadow:none;
}
.pf-follow.is-following:hover{
  color:var(--c4); border-color:var(--c4); background:rgba(255,90,110,.08);
}
.pf-follow[disabled]{ opacity:.6; cursor:progress; }
.pf-self .btn-xl{ text-decoration:none; }

/* ── Stats ──────────────────────────────────────────────────────── */
.pf-stats{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--edge); background:var(--glass-2);
}
.pf-stat{
  flex:1 1 130px; padding:16px 20px; text-align:center;
  border-right:1px solid var(--edge);
}
.pf-stat:last-child{ border-right:0; }
.pf-stat b{
  display:block; font-family:var(--display); font-weight:800;
  font-size:22px; line-height:1; font-variant-numeric:tabular-nums;
}
.pf-stat span{
  display:block; margin-top:6px; font-size:10.5px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--txt-2);
}
.pf-stat-off b .i{ width:17px; height:17px; color:var(--txt-3); }

.pf-interests{
  display:flex; gap:7px; flex-wrap:wrap;
  padding:14px 30px 18px; border-top:1px solid var(--edge);
}
.pf-interests .topic{ cursor:default; }

/* ── Body layout ────────────────────────────────────────────────── */
.pf-grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:20px; align-items:start; }
.pf-main{ display:grid; gap:20px; min-width:0; }
.pf-side{ display:grid; gap:20px; position:sticky; top:88px; }

.pf-panel{
  padding:22px 24px 24px; border-radius:var(--r-2);
  background:var(--glass); border:1px solid var(--edge);
  backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.pf-empty{ padding:26px 0; text-align:center; }

/* A hidden section explains itself rather than just being absent —
   otherwise an empty profile and a private one look identical. */
.pf-locked{
  display:flex; align-items:flex-start; gap:11px;
  margin:0; padding:18px 20px; border-radius:var(--r);
  background:var(--glass-2); border:1px dashed var(--edge-2);
  font-size:13.5px; line-height:1.55; color:var(--txt-2);
}
.pf-locked .i{ width:17px; height:17px; flex-shrink:0; color:var(--c1); margin-top:1px; }

/* ── Comment feed ───────────────────────────────────────────────── */
.pf-feed{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.pf-item{ display:flex; gap:13px; margin:0; }
.pf-kind{
  flex-shrink:0; width:34px; height:34px; border-radius:11px;
  display:grid; place-items:center;
  background:var(--glass-2); border:1px solid var(--edge);
}
.pf-kind .i{ width:16px; height:16px; }
.pf-kind.poll .i{ color:var(--c1); }
.pf-kind.blog .i{ color:var(--c3); }
.pf-item-b{ flex:1; min-width:0; }
.pf-on{ margin:0; font-size:12.5px; color:var(--txt-3); display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.pf-on a{ color:var(--txt); font-weight:600; text-decoration:none; }
.pf-on a:hover{ color:var(--c3); }
.pf-on .badge{
  font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 8px; border-radius:99px;
  background:var(--glass-2); border:1px solid var(--edge); color:var(--txt-2);
}
.pf-text{
  margin:7px 0 0; padding:11px 14px; border-radius:var(--r);
  background:var(--glass-2); border-left:2px solid var(--c1);
  font-size:14px; line-height:1.6; color:var(--txt-2);
  overflow-wrap:anywhere;
}
.pf-when{ margin:6px 0 0; font-size:11.5px; color:var(--txt-3); }

/* ── Votes ──────────────────────────────────────────────────────── */
.pf-votes{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pf-votes li{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin:0; padding:12px 15px; border-radius:var(--r);
  background:var(--glass-2); border:1px solid var(--edge);
  transition:border-color var(--fast) var(--ease);
}
.pf-votes li:hover{ border-color:var(--edge-2); }
.pf-votes a{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; text-decoration:none; }
.pf-votes .t{ flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-votes .pick{
  flex-shrink:0; font-size:11px; font-weight:700; padding:4px 11px; border-radius:99px;
}
.pf-votes .pick.a{ color:var(--c1); background:rgba(var(--c1-rgb),.12); border:1px solid rgba(var(--c1-rgb),.28); }
.pf-votes .pick.b{ color:var(--c5-lite); background:rgba(var(--c5-rgb),.14); border:1px solid rgba(var(--c5-rgb),.32); }
.pf-votes .w{ flex-shrink:0; font-size:11.5px; color:var(--txt-3); font-variant-numeric:tabular-nums; }

/* ── People ─────────────────────────────────────────────────────── */
.pf-people-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.pf-people-list li{ margin:0; }
.pf-people-list a{
  display:flex; align-items:center; gap:11px; padding:8px 10px;
  border-radius:var(--r); text-decoration:none;
  transition:background var(--fast) var(--ease);
}
.pf-people-list a:hover{ background:var(--glass-2); }
.pf-people-list .av{
  flex-shrink:0; width:34px; height:34px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:var(--grad-cta); color:var(--on-cta);
  font-family:var(--display); font-weight:800; font-size:13px;
}
.pf-people-list .av img{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-people-list .nm{
  font-size:13.5px; font-weight:600; color:var(--txt);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════════════
   The editor, on profile.php
   ═══════════════════════════════════════════════════════════════════ */
.pe-media{ display:grid; gap:0; }
.pe-cover{
  position:relative; aspect-ratio:4/1; min-height:120px;
  border-radius:var(--r-2); overflow:hidden;
  background:var(--bg-2); border:1px solid var(--edge);
}
.pe-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.pe-cover:empty::after,
.pe-cover::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 25%, rgba(var(--c1-rgb),.32), transparent 60%),
    radial-gradient(ellipse at 80% 70%, rgba(var(--c5-rgb),.32), transparent 60%);
  z-index:0;
}
.pe-cover img{ position:relative; z-index:1; }
.pe-media-btns{
  position:absolute; right:12px; bottom:12px; z-index:2;
  display:flex; gap:7px; flex-wrap:wrap;
}

.pe-avatar-row{ display:flex; align-items:flex-end; gap:16px; margin-top:-40px; padding-left:20px; flex-wrap:wrap; }
.pe-avatar{
  position:relative; z-index:2; flex-shrink:0;
  width:96px; height:96px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center;
  background:var(--grad-cta); color:var(--on-cta);
  font-family:var(--display); font-weight:800; font-size:34px;
  border:4px solid var(--bg-2);
}
.pe-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.pe-avatar-btns{ display:flex; flex-direction:column; gap:8px; padding-bottom:6px; }
.pe-avatar-btns .hint{ margin:0; }

/* The file input is hidden inside its label, so the label has to look
   and behave like the button it replaces. */
.pe-media label.btn{ cursor:pointer; }

.pe-status{ margin:14px 0 0; font-size:13px; min-height:1.2em; }
.pe-status.ok { color:var(--ok); }
.pe-status.bad{ color:var(--c4); }

.container textarea, .card textarea{
  width:100%; font-family:var(--body); font-size:14.5px; line-height:1.55;
  color:var(--txt); background:var(--glass-2);
  border:1px solid var(--edge); border-radius:var(--r);
  padding:12px 14px; resize:vertical;
}
.container textarea:focus, .card textarea:focus{
  outline:0; border-color:transparent; box-shadow:0 0 0 1.5px var(--c1);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:900px){
  .pf-grid{ grid-template-columns:1fr; }
  .pf-side{ position:static; grid-template-columns:1fr 1fr; }
}
@media (max-width:620px){
  .pf-bar{ padding:0 20px 20px; margin-top:-44px; }
  .pf-avatar{ width:96px; height:96px; }
  .pf-initial{ font-size:36px; }
  .pf-actions{ width:100%; }
  .pf-follow{ width:100%; }
  .pf-interests{ padding:12px 20px 16px; }
  .pf-side{ grid-template-columns:1fr; }
  .pf-panel{ padding:18px 18px 20px; }
  .pf-stat{ flex-basis:50%; }
}

/* ═══════════════════════════════════════════════════════════════════
   Profile, part two: owner tools, tabs, heatmap, fingerprint.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Cover: the stored image is now uncropped, so the 4:1 band is a
   window onto it and object-position chooses which band shows. ─────── */
.pf-cover img{ object-position:50% 50%; transition:object-position .18s linear; }
.pf-cover.is-reposing{ cursor:grab; }
.pf-cover.is-reposing:active{ cursor:grabbing; }
.pf-cover.is-reposing img{ transition:none; }
/* While repositioning, dim the scrim so the whole picture is visible. */
.pf-cover.is-reposing .pf-cover-scrim{ opacity:.25; }
.pf-cover-scrim{ transition:opacity var(--mid) var(--ease); }

.pf-cover-tools{
  position:absolute; right:14px; top:14px; z-index:3;
  display:flex; gap:7px; flex-wrap:wrap;
}
.pf-chip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:8px 14px; border-radius:100px; font-size:12.5px; font-weight:600;
  color:var(--txt); background:rgba(6,10,22,.62); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);
  transition:background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pf-chip:hover{ background:rgba(6,10,22,.82); border-color:var(--edge-2); }
.pf-chip .i{ width:14px; height:14px; }
.pf-chip.primary{ background:var(--grad-cta); color:var(--on-cta); border-color:transparent; }

.pf-repos-bar{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; padding:12px 18px;
  background:rgba(6,10,22,.86); backdrop-filter:blur(16px);
  border-top:1px solid var(--edge-2);
  font-size:13px; color:var(--txt-2);
}

.pf-avatar{ position:relative; }
.pf-avatar-edit{
  position:absolute; inset:auto 0 0 0; height:34%; cursor:pointer;
  display:grid; place-items:center;
  background:linear-gradient(to top, rgba(6,10,22,.82), rgba(6,10,22,.2));
  color:#fff; opacity:0;
  transition:opacity var(--fast) var(--ease);
}
.pf-avatar:hover .pf-avatar-edit{ opacity:1; }
.pf-avatar-edit .i{ width:18px; height:18px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── Actions row ────────────────────────────────────────────────── */
.pf-actions{ display:flex; align-items:center; gap:10px; }
.pf-share{
  flex-shrink:0; width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  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);
}
.pf-share:hover{ color:var(--c1); border-color:var(--c1); transform:translateY(-2px); }
.pf-share .i{ width:19px; height:19px; }

/* ── Tabs ───────────────────────────────────────────────────────── */
.pf-tabs{
  display:flex; gap:6px; flex-wrap:wrap; margin:0 0 20px;
  padding:6px; border-radius:100px;
  background:var(--glass-2); border:1px solid var(--edge);
}
.pf-tabs.sm{ margin-bottom:14px; }
.pf-tab{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px; border-radius:100px; cursor:pointer;
  font-family:var(--body); font-size:13.5px; font-weight:600;
  color:var(--txt-2); background:transparent; border:0; white-space:nowrap;
  transition:color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.pf-tabs.sm .pf-tab{ font-size:12.5px; padding:8px 12px; }
.pf-tab:hover{ color:var(--txt); background:var(--glass); }
.pf-tab.is-on{ color:var(--on-cta); background:var(--grad-cta); box-shadow:var(--glow-a); }
.pf-tab .i{ width:15px; height:15px; }
.pf-tab .i.lock{ width:12px; height:12px; opacity:.7; }
.pf-tab .n{
  font-size:11px; font-weight:700; padding:2px 7px; border-radius:99px;
  background:rgba(255,255,255,.10); font-variant-numeric:tabular-nums;
}
.pf-tab.is-on .n{ background:rgba(6,10,22,.18); }

/* ── Load more ──────────────────────────────────────────────────── */
.pf-more{
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:100%; margin-top:14px; padding:12px 20px; cursor:pointer;
  border-radius:100px; font-family:var(--body); font-size:13.5px; font-weight:600;
  color:var(--txt-2); background:var(--glass-2); border:1px dashed var(--edge-2);
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pf-more:hover{ color:var(--txt); border-color:var(--c1); border-style:solid; }
.pf-more[disabled]{ opacity:.6; cursor:progress; }
.pf-more .n{ font-size:11.5px; color:var(--txt-3); }

/* ── Activity heatmap ───────────────────────────────────────────── */
.heat-scroll{ overflow-x:auto; padding-bottom:6px; }
.heat-scroll::-webkit-scrollbar{ height:6px; }
.heat-scroll::-webkit-scrollbar-thumb{ background:var(--edge-2); border-radius:99px; }
.heat{ display:flex; gap:3px; min-width:max-content; }
.heat-col{ display:grid; grid-template-rows:repeat(7,1fr); gap:3px; }
.heat-d{
  width:11px; height:11px; border-radius:3px;
  background:var(--glass-2); border:1px solid transparent;
}
/* Gold ramp: activity reads as the brand colour warming up. */
.heat-d[data-lvl="1"]{ background:rgba(var(--c1-rgb),.26); }
.heat-d[data-lvl="2"]{ background:rgba(var(--c1-rgb),.48); }
.heat-d[data-lvl="3"]{ background:rgba(var(--c1-rgb),.72); }
.heat-d[data-lvl="4"]{ background:var(--c1); }
.heat-d.is-future{ opacity:0; }
.heat-key{
  display:flex; align-items:center; gap:5px; justify-content:flex-end;
  margin-top:12px; font-size:11px; color:var(--txt-3);
}
.heat-key .heat-d{ width:10px; height:10px; }

/* ── Voting fingerprint ─────────────────────────────────────────── */
.fp{
  margin:0 0 20px; padding:18px 20px; border-radius:var(--r-2);
  background:var(--glass-2); border:1px solid var(--edge);
}
.fp-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:16px;
}
.fp-head .k{
  margin:0; font-size:10.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--txt-3);
}
.fp-head .t{ margin:5px 0 0; font-family:var(--display); font-weight:700; font-size:16px; }
.fp-score{ text-align:right; }
.fp-score b{
  display:block; font-family:var(--display); font-weight:800; font-size:26px;
  line-height:1; color:var(--c1); font-variant-numeric:tabular-nums;
}
.fp-score span{ display:block; margin-top:4px; font-size:11px; color:var(--txt-3); }

.fp-bars{ display:grid; gap:9px; }
.fp-row{ display:flex; align-items:center; gap:12px; }
.fp-cat{
  flex:0 0 96px; font-size:12.5px; font-weight:600; color:var(--txt-2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fp-track{
  flex:1; height:8px; border-radius:99px; overflow:hidden;
  background:rgba(255,255,255,.06);
}
:root[data-theme="light"] .fp-track{ background:rgba(10,18,38,.07); }
.fp-track i{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--c1),var(--c5));
}
.fp-n{
  flex:0 0 auto; font-size:12px; color:var(--txt-3);
  font-variant-numeric:tabular-nums; min-width:22px; text-align:right;
}
.fp-foot{ margin:14px 0 0; font-size:11px; color:var(--txt-3); }

/* ── Empty people state ─────────────────────────────────────────── */
.pf-none{
  display:flex; align-items:center; gap:10px; margin:0;
  padding:18px 16px; border-radius:var(--r);
  background:var(--glass-2); border:1px dashed var(--edge);
  font-size:13px; color:var(--txt-3);
}
.pf-none .i{ width:17px; height:17px; flex-shrink:0; opacity:.7; }

@media (prefers-reduced-motion:reduce){
  .pf-cover img{ transition:none; }
  .pf-share:hover{ transform:none; }
}
@media (max-width:620px){
  .pf-cover-tools{ right:10px; top:10px; }
  .pf-chip{ padding:7px 11px; font-size:11.5px; }
  .heat-d{ width:9px; height:9px; }
  .fp-cat{ flex-basis:72px; }
}

/* The people rail is a denser panel than the main column ones: its rows
   are single-line, so the generous padding used elsewhere would leave it
   looking half empty. */
.pf-people{ padding:16px 16px 18px; }
.pf-people .pf-tabs{ background:transparent; border:0; padding:0 0 4px; }
.pf-people .pf-people-list{ max-height:340px; overflow-y:auto; scrollbar-width:thin; }
.pf-people .pf-people-list::-webkit-scrollbar{ width:5px; }
.pf-people .pf-people-list::-webkit-scrollbar-thumb{ background:var(--edge-2); border-radius:99px; }

/* ===== np-static.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   np-static.css — About, FAQ, Privacy and Terms.

   These four were the last pages still wearing the pre-rebuild markup:
   .about-card, .faq-item, .legal-wrap. Those classes only ever existed
   in np-legacy.css, which is the thin sheet that stops old markup from
   looking broken — it was never meant to make anything look designed.
   The result was four pages of unstyled running text hanging off the
   left edge of a site that had been rebuilt around them.

   Everything below is a new vocabulary rather than a patch on the old
   classes, because the pages are being rewritten anyway and the legacy
   names carry assumptions (fixed widths, float clears) not worth
   inheriting. The `pg-` prefix is shared page furniture; `doc-` is the
   legal-document layout used by Privacy and Terms.

   Every colour resolves through the tokens in np.css, so the light
   theme comes for free at :root[data-theme="light"] and there is no
   second palette to keep in step.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shell ────────────────────────────────────────────────────────── */
.pg-wrap{
  max-width:var(--page);
  margin:0 auto;
  padding:0 22px 110px;
}
.pg-wrap.is-narrow{ max-width:900px; }

/* ── Hero ─────────────────────────────────────────────────────────────
   A band rather than a box: no border, no card. The only decoration is
   a soft bloom behind the heading, in the same accents the rest of the
   site uses. pointer-events are off so it can never intercept a click
   on the text above it. */
.pg-hero{
  position:relative;
  padding:74px 0 34px;
  isolation:isolate;
}
.pg-hero::before{
  content:"";
  position:absolute; inset:-40px 0 auto 0; height:340px;
  z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 100% at 18% 0%, rgba(var(--c1-rgb),.13), transparent 70%),
    radial-gradient(46% 100% at 82% 12%, rgba(var(--c5-rgb),.16), transparent 72%);
}

.pg-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono);
  font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--c1);
  margin:0 0 16px;
}
.pg-eyebrow::before{
  content:""; width:22px; height:2px; border-radius:2px;
  background:var(--grad-cta);
}

.pg-hero h1{
  font-family:var(--display);
  font-weight:800; letter-spacing:-.03em;
  /* Deliberately restrained. An earlier pass shipped a display size
     that filled half the viewport and read as shouting. */
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.12;
  margin:0 0 18px;
  color:var(--txt);
  text-wrap:balance;
  max-width:18ch;
}

.pg-lede{
  font-size:clamp(15.5px,1.3vw,18px);
  line-height:1.62;
  color:var(--txt-2);
  max-width:62ch;
  margin:0;
}
.pg-lede strong{ color:var(--txt); font-weight:600; }

/* ── Figures strip ────────────────────────────────────────────────────
   Read live from the database rather than typed into the markup, so the
   page cannot quietly go on claiming numbers that stopped being true. */
.pg-figures{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;
  margin:44px 0 0;
  background:var(--edge);
  border:1px solid var(--edge);
  border-radius:var(--r);
  overflow:hidden;
}
.pg-figure{
  background:var(--bg-2);
  padding:20px 22px;
}
.pg-figure b{
  display:block;
  font-family:var(--display);
  font-size:clamp(22px,2.4vw,29px);
  font-weight:800; letter-spacing:-.02em;
  color:var(--txt);
  font-variant-numeric:tabular-nums;
  line-height:1.1;
}
.pg-figure span{
  display:block; margin-top:6px;
  font-size:11.5px; font-weight:600;
  letter-spacing:.11em; text-transform:uppercase;
  color:var(--txt-3);
}

/* ── Section ──────────────────────────────────────────────────────── */
.pg-sec{ margin:66px 0 0; }
.pg-sec > h2{
  font-family:var(--display);
  font-weight:800; letter-spacing:-.025em;
  font-size:clamp(20px,2.2vw,27px);
  line-height:1.22;
  color:var(--txt);
  margin:0 0 10px;
  scroll-margin-top:96px;
  text-wrap:balance;
}
.pg-sec > .pg-sec-note{
  color:var(--txt-2);
  font-size:15.5px; line-height:1.65;
  max-width:64ch;
  margin:0 0 26px;
}
.pg-sec > .pg-sec-note:last-child{ margin-bottom:0; }

.pg-prose p{
  color:var(--txt-2);
  font-size:15.5px; line-height:1.72;
  max-width:66ch;
  margin:0 0 1.05em;
}
.pg-prose p:last-child{ margin-bottom:0; }
.pg-prose strong{ color:var(--txt); font-weight:600; }
.pg-prose a{ color:var(--c3); text-decoration:none; border-bottom:1px solid rgba(var(--c3-rgb),.35); }
.pg-prose a:hover{ border-bottom-color:var(--c3); }

/* ── Card grid ───────────────────────────────────────────────────── */
.pg-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:16px;
}
.pg-card{
  position:relative;
  background:var(--glass);
  border:1px solid var(--edge);
  border-radius:var(--r);
  padding:24px 24px 26px;
  transition:border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.pg-card:hover{ border-color:var(--edge-2); transform:translateY(-2px); }
.pg-card-mark{
  display:grid; place-items:center;
  width:36px; height:36px; margin:0 0 15px;
  border-radius:10px;
  background:rgba(var(--c1-rgb),.12);
  border:1px solid rgba(var(--c1-rgb),.22);
  color:var(--c1);
  font-size:15px;
}
.pg-card h3{
  font-family:var(--display);
  font-weight:700; font-size:16.5px; letter-spacing:-.01em;
  color:var(--txt);
  margin:0 0 8px;
}
.pg-card p{
  color:var(--txt-2);
  font-size:14.5px; line-height:1.62;
  margin:0;
}

/* ── Numbered steps ───────────────────────────────────────────────────
   A real sequence — you cannot discuss a poll before you open one — so
   the numbering carries information rather than decorating the list. */
.pg-steps{
  list-style:none;
  margin:0; padding:0;
  counter-reset:step;
  display:grid; gap:2px;
}
.pg-step{
  counter-increment:step;
  position:relative;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:20px;
  align-items:start;
  padding:22px 0;
  border-top:1px solid var(--edge);
}
.pg-step:last-child{ border-bottom:1px solid var(--edge); }
.pg-step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--mono);
  font-size:13px; font-weight:600; letter-spacing:.08em;
  color:var(--c1);
  padding-top:3px;
}
.pg-step h3{
  font-family:var(--display);
  font-weight:700; font-size:17px; letter-spacing:-.01em;
  color:var(--txt);
  margin:0 0 7px;
}
.pg-step p{
  color:var(--txt-2);
  font-size:15px; line-height:1.65;
  max-width:62ch;
  margin:0;
}
.pg-step p a{ color:var(--c3); text-decoration:none; border-bottom:1px solid rgba(var(--c3-rgb),.35); }
.pg-step p a:hover{ border-bottom-color:var(--c3); }

/* ── Team ─────────────────────────────────────────────────────────── */
.pg-team{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:16px;
}
.pg-person{
  background:var(--glass);
  border:1px solid var(--edge);
  border-radius:var(--r);
  padding:24px 20px;
  text-align:center;
}
.pg-person img{
  display:block;            /* images are inline by default, and an
                               inline box ignores width and height */
  width:66px; height:66px;
  margin:0 auto 14px;
  border-radius:50%;
  object-fit:cover;
  border:1px solid var(--edge-2);
  background:var(--bg-2);
}
.pg-person h3{
  font-family:var(--display);
  font-weight:700; font-size:15.5px;
  color:var(--txt);
  margin:0 0 4px;
}
.pg-person span{
  display:block;
  font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--txt-3);
}

/* ── Call-to-action panel ─────────────────────────────────────────── */
.pg-cta{
  margin:72px 0 0;
  padding:38px 34px;
  border-radius:var(--r-2);
  border:1px solid var(--edge);
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(var(--c5-rgb),.20), transparent 62%),
    var(--glass);
  display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:22px;
}
.pg-cta h2{
  font-family:var(--display);
  font-weight:800; letter-spacing:-.02em;
  font-size:clamp(19px,2vw,24px);
  color:var(--txt);
  margin:0 0 7px;
}
.pg-cta p{
  color:var(--txt-2);
  font-size:14.5px; line-height:1.6;
  margin:0; max-width:52ch;
}
.pg-cta-actions{ display:flex; flex-wrap:wrap; gap:10px; }

/* ── Buttons ──────────────────────────────────────────────────────────
   text-decoration is forced off: np-pages.css underlines anchors inside
   main, and a button that arrives underlined reads as a bug. */
.pg-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px;
  border-radius:99px;
  font-family:var(--body);
  font-size:14px; font-weight:650;
  text-decoration:none !important;
  border:1px solid var(--edge-2);
  color:var(--txt);
  background:var(--glass-2);
  transition:border-color var(--fast) var(--ease), background var(--fast) var(--ease);
  white-space:nowrap;
}
.pg-btn:hover{ border-color:var(--txt-3); background:var(--glass); }
.pg-btn.is-primary{
  background:var(--grad-cta);
  color:var(--on-cta);
  border-color:transparent;
  font-weight:700;
}
.pg-btn.is-primary:hover{ filter:brightness(1.07); }

/* ══ FAQ ════════════════════════════════════════════════════════════ */

.pg-faq-tools{
  display:flex; flex-wrap:wrap; gap:10px;
  margin:34px 0 8px;
}
.pg-faq-search{ flex:1 1 260px; position:relative; }
.pg-faq-search input{
  width:100%;
  padding:12px 16px;
  border-radius:99px;
  border:1px solid var(--edge);
  background:var(--bg-2);
  color:var(--txt);
  font-family:var(--body); font-size:14.5px;
  outline:none;
  transition:border-color var(--fast) var(--ease);
}
.pg-faq-search input::placeholder{ color:var(--txt-3); }
.pg-faq-search input:focus{ border-color:rgba(var(--c1-rgb),.55); }

.pg-faq-group{ margin:44px 0 0; }
.pg-faq-group > h2{
  font-family:var(--display);
  font-weight:800; letter-spacing:-.02em;
  font-size:clamp(17px,1.8vw,21px);
  color:var(--txt);
  margin:0 0 14px;
  scroll-margin-top:96px;
}

.pg-qa{
  border:1px solid var(--edge);
  border-radius:var(--r);
  background:var(--glass);
  overflow:hidden;
  margin:0 0 9px;
  transition:border-color var(--fast) var(--ease);
}
.pg-qa[open]{ border-color:var(--edge-2); }
.pg-qa > summary{
  display:flex; align-items:center; gap:13px;
  padding:16px 19px;
  cursor:pointer;
  list-style:none;
  font-family:var(--body);
  font-size:15.2px; font-weight:600;
  color:var(--txt);
  min-width:0;   /* long questions wrap instead of shoving the toggle out */
}
.pg-qa > summary::-webkit-details-marker{ display:none; }
.pg-qa > summary::after{
  content:"";
  flex:0 0 auto;
  margin-left:auto;
  width:9px; height:9px;
  border-right:2px solid var(--txt-3);
  border-bottom:2px solid var(--txt-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.pg-qa[open] > summary::after{
  transform:rotate(-135deg) translateY(2px);
  border-color:var(--c1);
}
.pg-qa > summary:hover{ color:var(--c1); }
.pg-qa-body{
  padding:16px 19px 18px;
  border-top:1px solid var(--edge);
}
.pg-qa-body p{
  color:var(--txt-2);
  font-size:14.8px; line-height:1.68;
  max-width:68ch;
  margin:0 0 .9em;
}
.pg-qa-body p:last-child{ margin-bottom:0; }
.pg-qa-body strong{ color:var(--txt); font-weight:600; }
.pg-qa-body a{ color:var(--c3); text-decoration:none; border-bottom:1px solid rgba(var(--c3-rgb),.35); }
.pg-qa-body a:hover{ border-bottom-color:var(--c3); }
.pg-qa-body ul{
  margin:.85em 0; padding:0; list-style:none;
  display:grid; gap:.5em;
}
.pg-qa-body ul > li{
  position:relative; padding-left:1.6em;
  color:var(--txt-2); font-size:14.8px; line-height:1.6;
}
.pg-qa-body ul > li::before{
  content:""; position:absolute; left:.25em; top:.62em;
  width:5px; height:5px; border-radius:1px;
  background:var(--grad-cta);
  transform:rotate(45deg);
}

/* Hidden by the search filter. [hidden] is only display:none in the UA
   sheet, and .pg-qa sets a background — any author rule outranks it, so
   without this the "hidden" cards stay on screen. */
.pg-qa[hidden],
.pg-faq-group[hidden],
.pg-faq-empty[hidden]{ display:none !important; }

.pg-faq-empty{
  padding:34px 4px;
  color:var(--txt-2);
  font-size:15px;
}

/* ══ Legal documents ════════════════════════════════════════════════ */

.doc{
  display:grid;
  grid-template-columns:236px minmax(0,1fr);
  gap:52px;
  align-items:start;
  margin:40px 0 0;
}

/* The table of contents rides along the page. Legal text is scanned for
   one clause, not read end to end, so getting back to the index without
   scrolling is the whole point of having one. */
.doc-toc{
  position:sticky; top:96px;
  align-self:start;
  max-height:calc(100vh - 130px);
  overflow-y:auto;
  padding-right:8px;
}
.doc-toc h2{
  font-family:var(--mono);
  font-size:11px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--txt-3);
  margin:0 0 14px;
}
.doc-toc ol{
  list-style:none; margin:0; padding:0;
  counter-reset:toc;
  display:grid; gap:1px;
}
.doc-toc li{ counter-increment:toc; }
.doc-toc a{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:4px;
  padding:7px 10px 7px 12px;
  font-size:13.6px; line-height:1.42;
  color:var(--txt-2);
  text-decoration:none !important;
  border-left:2px solid transparent;
  border-radius:0 6px 6px 0;
  transition:color var(--fast) var(--ease), border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}
.doc-toc a::before{
  content:counter(toc,decimal-leading-zero);
  font-family:var(--mono); font-size:11px;
  color:var(--txt-3);
}
.doc-toc a:hover{ color:var(--txt); background:var(--glass-2); }
.doc-toc a.is-current{
  color:var(--txt);
  border-left-color:var(--c1);
  background:var(--glass-2);
}
.doc-toc a.is-current::before{ color:var(--c1); }

.doc-body{ min-width:0; counter-reset:clause; }

.doc-summary{
  border:1px solid rgba(var(--c1-rgb),.20);
  background:rgba(var(--c1-rgb),.05);
  border-radius:var(--r);
  padding:22px 24px;
  margin:0 0 42px;
}
.doc-summary h2{
  font-family:var(--display);
  font-size:15px; font-weight:700;
  color:var(--txt);
  margin:0 0 10px;
}
.doc-summary p{
  color:var(--txt-2);
  font-size:14.6px; line-height:1.65;
  margin:0;
}
.doc-summary ul{
  margin:0; padding:0; list-style:none;
  display:grid; gap:.55em;
}
.doc-summary li{
  position:relative; padding-left:1.6em;
  color:var(--txt-2);
  font-size:14.6px; line-height:1.65;
}
.doc-summary li::before{
  content:""; position:absolute; left:.25em; top:.6em;
  width:5px; height:5px; border-radius:1px;
  background:var(--grad-cta); transform:rotate(45deg);
}
.doc-summary strong{ color:var(--txt); font-weight:600; }

.doc-sec{
  counter-increment:clause;
  padding:0 0 34px;
  margin:0 0 34px;
  border-bottom:1px solid var(--edge);
}
.doc-sec:last-of-type{ border-bottom:0; margin-bottom:0; }
.doc-sec > h2{
  font-family:var(--display);
  font-weight:800; letter-spacing:-.02em;
  font-size:clamp(18px,1.9vw,23px);
  line-height:1.25;
  color:var(--txt);
  margin:0 0 14px;
  scroll-margin-top:96px;
  text-wrap:balance;
}
.doc-sec > h2::before{
  content:counter(clause,decimal-leading-zero);
  display:block; margin-bottom:.55em;
  font-family:var(--mono);
  font-size:11px; font-weight:600; letter-spacing:.2em;
  color:var(--c1);
}
.doc-sec h3{
  font-family:var(--display);
  font-weight:700; font-size:15.5px;
  color:var(--txt);
  margin:1.7em 0 .5em;
}
.doc-sec p{
  color:var(--txt-2);
  font-size:15px; line-height:1.72;
  max-width:70ch;
  margin:0 0 1em;
}
.doc-sec p:last-child{ margin-bottom:0; }
.doc-sec strong{ color:var(--txt); font-weight:600; }
.doc-sec a{ color:var(--c3); text-decoration:none; border-bottom:1px solid rgba(var(--c3-rgb),.35); }
.doc-sec a:hover{ border-bottom-color:var(--c3); }
.doc-sec ul{
  margin:1em 0; padding:0; list-style:none;
  display:grid; gap:.6em;
}
.doc-sec ul > li{
  position:relative; padding-left:1.7em;
  color:var(--txt-2); font-size:15px; line-height:1.65;
}
.doc-sec ul > li::before{
  content:""; position:absolute; left:.28em; top:.66em;
  width:5px; height:5px; border-radius:1px;
  background:var(--grad-cta); transform:rotate(45deg);
}

/* A data table, for "what we collect and why". Scrolls inside its own
   box so a narrow screen never makes the page scroll sideways. */
.doc-table{
  margin:1.2em 0;
  border:1px solid var(--edge);
  border-radius:var(--r);
  overflow-x:auto;
}
.doc-table table{
  width:100%;
  border-collapse:collapse;
  min-width:460px;
}
.doc-table th,
.doc-table td{
  text-align:left;
  padding:12px 16px;
  border-bottom:1px solid var(--edge);
  font-size:14px; line-height:1.55;
  vertical-align:top;
}
.doc-table thead th{
  font-family:var(--mono);
  font-size:10.5px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-3);
  background:var(--glass-2);
  white-space:nowrap;
}
.doc-table td{ color:var(--txt-2); }
.doc-table td:first-child{ color:var(--txt); font-weight:600; }
.doc-table tr:last-child td{ border-bottom:0; }

.doc-meta{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:22px 0 0;
}
.doc-tag{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px;
  border-radius:99px;
  border:1px solid var(--edge);
  background:var(--glass-2);
  font-size:12px; font-weight:600;
  color:var(--txt-2);
}
.doc-tag b{ color:var(--txt); font-weight:650; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width:940px){
  /* minmax(0,1fr), not 1fr: a bare 1fr track floors at the content's
     max-content width, and the contents grid inside it pushed the column
     to 614px on a 375px screen. min-width:0 on the rail is the same fix
     one level down. */
  .doc{ grid-template-columns:minmax(0,1fr); gap:0; }
  .doc-toc{ min-width:0; }
  /* Un-stick it: a sticky rail stacked above the content would cover
     the text it is meant to index. */
  .doc-toc{
    position:static; max-height:none; overflow:visible;
    margin:0 0 36px;
    padding:18px 20px;
    border:1px solid var(--edge);
    border-radius:var(--r);
    background:var(--glass-2);
  }
  .doc-toc ol{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
}
@media (max-width:620px){
  .pg-wrap{ padding:0 16px 80px; }
  .pg-hero{ padding:52px 0 26px; }
  .pg-hero h1{ max-width:none; }
  .pg-sec{ margin-top:50px; }
  .pg-step{ grid-template-columns:38px 1fr; gap:14px; }
  .pg-cta{ padding:28px 22px; }
  .pg-cta-actions{ width:100%; }
  .pg-btn{ flex:1 1 auto; justify-content:center; }
  .pg-figures{ grid-template-columns:repeat(2,1fr); }
}

@media (prefers-reduced-motion:reduce){
  .pg-card, .pg-card:hover{ transform:none; }
}

/* ===== np-legacy.css ===== */
/* ═══════════════════════════════════════════════════════════════════
   NPolls — the remaining legacy page classes.

   Found by audit_styles.py, which compares the classes each page
   actually renders against every selector the stylesheets define. The
   staging host uses a self-signed certificate that the browser tooling
   refuses, so pages cannot be inspected visually; this catches the same
   bug class — markup with no rule behind it.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Functional, not cosmetic ───────────────────────────────────────
   .hidden-hp is a honeypot: an input kept off-screen so spam bots fill
   it and real users never see it. Its CSS went with everything else, so
   it became a visible empty box above "Your Name" — and any human who
   typed in it would have been scored as a bot. */
.hidden-hp,
.hp-field,
input[name="website"][tabindex="-1"] {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* FontAwesome is no longer loaded — the site uses its own SVG sprite —
   so every <i class="fas fa-…"> is an empty inline element leaving a
   stray gap. */
i.fas, i.far, i.fab, i.fa { display: none !important; }

/* Decorative leftovers with nothing to show. */
.filler, .decorative-element, .bottom-left { display: none !important; }

/* The old floating "back to top" and subscribe form, both replaced by
   the shared footer. */
.to-top, .footer-form, .btn-subscribe, .fab { display: none !important; }

/* ── Shared containers ──────────────────────────────────────────── */
.about-container, .faq-container, .card-container,
.legal-wrap, .main-content, .coming-hero {
  max-width: 900px; margin: 0 auto; padding: 40px 24px;
}
.legal-wrap { max-width: 820px; }

/* ── Panels used across these pages ─────────────────────────────── */
.about-card, .legal-card, .faq-item, .card-body, .card-header {
  background: var(--glass); border: 1px solid var(--edge);
  border-radius: var(--r-2); backdrop-filter: blur(16px);
}
.about-card, .legal-card { padding: 24px 26px; margin: 0 0 18px; }
.card-header { padding: 18px 24px; border-radius: var(--r-2) var(--r-2) 0 0; border-bottom: 0; }
.card-body   { padding: 22px 24px; border-radius: 0 0 var(--r-2) var(--r-2); }
.card-header + .card-body { border-top: 0; margin-top: -1px; }

/* ── Heroes ─────────────────────────────────────────────────────── */
.legal-hero, .coming-hero { text-align: center; padding: 56px 24px 30px; }
.legal-hero h1, .coming-hero h1 { margin: 0 0 14px; }
.legal-hero p, .coming-hero p { color: var(--txt-2); max-width: 60ch; margin: 0 auto; }

/* ── Contents list on the legal pages ───────────────────────────── */
.legal-toc {
  background: var(--glass); border: 1px solid var(--edge);
  border-radius: var(--r-2); padding: 20px 24px; margin: 0 0 26px;
}
.legal-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.legal-toc a { color: var(--txt-2); text-decoration: none; font-size: 15px; }
.legal-toc a:hover { color: var(--c3); }
.legal-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 0; }

/* ── FAQ accordions ─────────────────────────────────────────────── */
.faq-item { margin: 0 0 10px; overflow: hidden; }
.faq-question {
  cursor: pointer; padding: 16px 20px 16px 46px; position: relative;
  font-weight: 600; font-size: 16px; color: var(--txt);
  transition: background var(--fast) var(--ease);
}
.faq-question:hover { background: var(--glass-2); }
.faq-question::before {
  content: ""; position: absolute; left: 20px; top: 50%; margin-top: -5px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--c3); border-bottom: 2px solid var(--c3);
  transform: rotate(-45deg); transition: transform var(--mid) var(--ease);
}
.faq-item.active .faq-question::before,
.faq-item.open .faq-question::before { transform: rotate(45deg); margin-top: -7px; }
.faq-answer { padding: 0 20px 18px; color: var(--txt-2); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ── Team grid (about) ──────────────────────────────────────────── */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px; margin: 22px 0;
}
.team-member {
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r-2);
  padding: 24px 18px; text-align: center;
  transition: transform var(--mid) var(--spring), box-shadow var(--mid) var(--ease);
}
.team-member:hover { transform: translateY(-4px); box-shadow: var(--glow-a); }
.member-avatar {
  width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center; font-size: 24px; font-weight: 800; color:var(--on-cta);
  background:var(--grad-cta); box-shadow: var(--glow-a); overflow: hidden;
}
.member-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Forms on contact / auth ────────────────────────────────────── */
.form-group, .form { display: grid; gap: 8px; margin-bottom: 16px; }
.form { gap: 14px; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.remember { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--txt-2); }
.remember input { width: auto; }
.foot { margin-top: 20px; font-size: 14px; color: var(--txt-3); text-align: center; }
.foot .link, a.link { color: var(--c3); text-decoration: none; font-weight: 600; }
.foot .link:hover, a.link:hover { text-decoration: underline; }

/* The "or" divider between password and social sign-in. */
.or {
  display: flex; align-items: center; gap: 14px; margin: 20px 0;
  color: var(--txt-3); font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
}
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--edge); }
.line { height: 1px; background: var(--edge); margin: 20px 0; border: 0; }
.social { display: grid; gap: 10px; }
.sbtn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 18px; border-radius: 99px; font-weight: 600; font-size: 14.5px;
  background: var(--glass); border: 1px solid var(--edge); color: var(--txt);
  text-decoration: none; cursor: pointer;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.sbtn:hover { transform: translateY(-2px); border-color: var(--edge-2); }
.txt { color: var(--txt-2); font-size: 14.5px; }

/* ── Notices (mygifts) ──────────────────────────────────────────── */
.payment-issue-banner, .payment-notice {
  background: var(--glass-2); border: 1px solid var(--edge);
  border-left: 3px solid var(--c5); border-radius: var(--r);
  padding: 15px 20px; margin: 0 0 20px; font-size: 14.5px;
}
.payment-issue-banner-content { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ── Category grid (forum placeholder) ──────────────────────────── */
.category-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; margin: 26px 0;
}
.cta-row, .brand-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 24px 0; }
.btn-pill, .btn-grad-blue, .btn-grad-pink {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: 99px; font-weight: 600; font-size: 15px;
  text-decoration: none; border: 1px solid var(--edge-2); background: var(--glass); color: var(--txt);
  transition: transform var(--fast) var(--spring), box-shadow var(--mid) var(--ease);
}
.btn-grad-blue { background:var(--grad-cta); border-color: transparent; color:var(--on-cta); box-shadow: var(--glow-a); }
.btn-grad-pink { background:var(--grad-cta); border-color:transparent; color:var(--on-cta); box-shadow: var(--glow-r); }
.btn-pill:hover, .btn-grad-blue:hover, .btn-grad-pink:hover { transform: translateY(-3px); }

/* The filter bar's own form, and the poll vote button. */
.search-form { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; }
.vote-btn { width: 100%; }

@media (max-width: 620px) {
  .about-container, .faq-container, .card-container, .legal-wrap,
  .main-content, .coming-hero { padding: 30px 18px; }
  .about-card, .legal-card { padding: 18px 20px; }
}

/* ── More legacy chrome ─────────────────────────────────────────────
   Variants the first pass missed: mygifts and forum.php each carry a
   differently-named header. */
.nav, .nav-inner, .site-header, .menu-toggle, .logo-icon,
.brand, .top-right, .toast-container:empty {
  display: none !important;
}

/* ── Stat tiles (mygifts) ───────────────────────────────────────── */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px; margin: 0 0 24px;
}
.stat-card {
  background: var(--glass); border: 1px solid var(--edge); border-radius: var(--r-2);
  padding: 20px 22px; backdrop-filter: blur(16px);
  transition: transform var(--mid) var(--spring), box-shadow var(--mid) var(--ease);
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--glow-a); }
.stat-card .value,
.stat-card strong {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 26px; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-card .label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); font-weight: 700; }

/* Wide tables need their own scroller so the page never scrolls sideways. */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 22px; }

.social-links { display: flex; gap: 10px; flex-wrap: wrap; }
.social-links a {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass); border: 1px solid var(--edge); color: var(--txt-2);
  text-decoration: none !important;
  transition: transform var(--fast) var(--spring), box-shadow var(--mid) var(--ease);
}
.social-links a:hover { transform: translateY(-3px); box-shadow: var(--glow-c); color: var(--txt); }

/* ── Button variants ────────────────────────────────────────────── */
.ghost {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 99px; font-weight: 600; font-size: 14.5px;
  background: transparent; border: 1px solid var(--edge-2); color: var(--txt);
  text-decoration: none !important; cursor: pointer;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.ghost:hover { transform: translateY(-2px); border-color: var(--c3); }

.soon-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  padding: 7px 15px; border-radius: 99px; color:var(--on-cta);
  background:var(--grad-cta); box-shadow: var(--glow-a);
}