/* ============================================================================
   CauseCard — the CEN cause-card art system.
   ONE standalone module (causecard.css + causecard.js). Drop both onto any page,
   call CauseCard.render(el, cardData). Nothing here touches /vote/ — the vote page
   can adopt this later by including the two files, with zero edits required now.

   Design language: builds on the /vote/ kernel-jar aesthetic (warm corn-gold kernels,
   dark panel, glow) fused with the /members/ DAO-toolkit cool palette (deep navy panels,
   lane-colored accents). Each card is:
     • a lane-colored frame + glow (art/env/edu/hum/overhead colors from cen-board.json)
     • a DETERMINISTIC generative field seeded from the card ADDRESS (same address =>
       same art forever) — rings, seeded kernels, and a flowing guilloché curve
     • the card's real name in real typography, lane emoji, optional live-stat accent
   NO raster/AI images. Pure SVG/CSS, generated in the browser. An artSlot (image URL)
   can OVERLAY the generated art later so founder-made pieces replace the generative design
   per card without any code change.
   ============================================================================ */

.cc-card{
  position:relative; display:block; width:100%;
  border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,#0b1120,#0e1626);
  border:1px solid var(--cc-line,#1b2740);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  text-decoration:none; color:inherit;
  /* lane color is injected as --cc-lane by the JS */
}
.cc-card.cc-link{ cursor:pointer; transition:transform .12s ease, box-shadow .12s ease; }
.cc-card.cc-link:hover{ transform:translateY(-2px); box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 26px var(--cc-glow,rgba(96,165,250,.35)); }

/* lane-colored top rail + soft inner glow */
.cc-card::before{
  content:''; position:absolute; left:0; top:0; right:0; height:5px;
  background:linear-gradient(90deg,transparent,var(--cc-lane,#60a5fa),transparent);
  opacity:.9; z-index:3;
}

/* the generative art canvas area */
.cc-art{ position:relative; width:100%; aspect-ratio:16/10; display:block; background:#070b14; }
.cc-art svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* founder art overlay slot — hidden until an artSlot URL is present */
.cc-artslot{
  position:absolute; inset:0; background-size:cover; background-position:center;
  z-index:2; display:none;
}
.cc-card[data-artslot="1"] .cc-artslot{ display:block; }
.cc-card[data-artslot="1"] .cc-art svg{ opacity:.18; } /* keep a hint of the generative field under founder art */

/* lane badge (emoji) top-left over the art */
.cc-badge{
  position:absolute; left:10px; top:10px; z-index:4;
  width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  background:rgba(7,11,20,.62); border:1px solid var(--cc-lane,#60a5fa);
  box-shadow:0 0 14px var(--cc-glow,rgba(96,165,250,.4));
}

/* vote-count badges over the art (founder 2026-10-04 "my votes in green bottom left and total
   community votes in blue bottom right"). Both sit just inside the bottom edge of the 16:10 art. */
.cc-votebadge{
  position:absolute; z-index:5; left:10px;
  bottom:auto; top:calc(62.5% - 34px);
  font-size:12px; font-weight:800; line-height:1; letter-spacing:.02em;
  padding:5px 9px; border-radius:999px;
  background:rgba(7,11,20,.72); backdrop-filter:blur(2px);
}
.cc-votebadge-mine{
  color:#34d399; border:1px solid rgba(52,211,153,.6);
  box-shadow:0 0 12px rgba(52,211,153,.45);
}
/* BLUE total-community-votes badge, bottom-right (sourced from board-snapshot.json) */
.cc-votebadge-all{
  left:auto; right:10px;
  color:#60a5fa; border:1px solid rgba(96,165,250,.6);
  box-shadow:0 0 12px rgba(96,165,250,.4);
}
.pp-snap-fresh{ margin:0 0 10px; opacity:.85; }

/* viewer cast-a-vote control under a card (founder 2026-10-04 "cast a vote from visiting a profile") */
.cc-cast{ padding:8px 10px 10px; border-top:1px solid rgba(255,255,255,.06); }
.cc-cast-btn{ width:100%; padding:8px 10px; border-radius:10px; cursor:pointer;
  font-size:13px; font-weight:800; color:#05070d; background:#34d399; border:none; }
.cc-cast-btn:hover{ filter:brightness(1.06); }
.cc-cast-btn:disabled{ opacity:.5; cursor:default; }
.cc-cast-note{ font-size:12px; color:#8ea0c4; line-height:1.5; }
.cc-cast-msg{ margin-top:6px; font-size:12px; }
.cc-cast-msg.err{ color:#f87171; } .cc-cast-msg.ok{ color:#34d399; }

/* text plate at the bottom */
.cc-plate{
  position:relative; z-index:4; padding:12px 14px 13px;
  background:linear-gradient(180deg,rgba(7,11,20,0),rgba(7,11,20,.72) 40%,rgba(11,17,32,.96));
  margin-top:-46px; /* pull up over the art so the plate reads on the field */
}
.cc-name{ font-size:16px; font-weight:800; line-height:1.2; letter-spacing:.01em; color:#eef4ff; }
.cc-lane-name{
  font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cc-lane,#60a5fa); margin-top:3px;
}
.cc-meta{ display:flex; gap:10px; align-items:center; margin-top:7px; flex-wrap:wrap; }
.cc-addr{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px;
  color:#8ea0c4; text-decoration:none;
}
.cc-addr:hover{ color:var(--cc-lane,#60a5fa); }
.cc-group{
  font-size:10px; font-weight:700; letter-spacing:.04em; color:#8ea0c4;
  border:1px solid var(--cc-line,#1b2740); border-radius:999px; padding:2px 8px;
  background:rgba(255,255,255,.02);
}
.cc-stat{
  font-size:11px; color:#c9d6ef; margin-left:auto;
}
.cc-stat b{ color:var(--cc-lane,#60a5fa); }

/* size variants — a caller can add cc-sm / cc-lg */
.cc-card.cc-sm .cc-name{ font-size:14px; }
.cc-card.cc-sm .cc-badge{ width:32px; height:32px; font-size:17px; }
.cc-card.cc-lg .cc-art{ aspect-ratio:16/9; }
.cc-card.cc-lg .cc-name{ font-size:19px; }

/* a simple responsive grid the caller can use for a set of cards */
.cc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }