/* ============================================================================
   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));
}

/* 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; }