/* ============================================================
   components.css — chips, cards, tokens, charts, tooltips
   ============================================================ */

/* party token ------------------------------------------------ */
.token{
  --tk:38px;
  display:inline-flex; align-items:center; justify-content:center;
  height:var(--tk); min-width:var(--tk);
  border-radius:999px; padding:0 .6em;
  color:#fff; font-weight:800; font-size:calc(var(--tk)*.34);
  letter-spacing:.01em; line-height:1; white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.18); user-select:none;
}
.token--sm{ --tk:28px; font-size:11px; }
.token--lg{ --tk:46px; }
.token--logo{ background:#fff; padding:0 10px; border-radius:10px; min-width:0;
  box-shadow:0 2px 8px rgba(20,30,60,.16); overflow:hidden; }
.token--logo img{ height:calc(var(--tk) - 14px); width:auto; max-width:130px;
  object-fit:contain; display:block; transition:transform .2s var(--ease); }
.token--logo:hover img{ transform:scale(1.05); }

/* stat chip (scene 01) --------------------------------------- */
.chip{
  position:relative; background:#fff; border-radius:14px;
  padding:26px 26px 24px; border:1px solid var(--line);
  box-shadow:0 6px 22px rgba(20,30,60,.05); overflow:hidden;
}
.chip::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:7px;
  background:var(--chip-color,var(--orange));
}
.chip__num{
  font-size:var(--fs-stat); font-weight:800; line-height:1;
  color:var(--chip-color,var(--ink));
}
.chip__label{ margin-top:.4em; font-size:15px; color:var(--body); max-width:24ch; }
.chip__icon{ position:absolute; right:20px; top:20px; width:34px; height:34px; color:var(--chip-color); opacity:.85; }

/* fact card (scene 02) --------------------------------------- */
.fact{
  position:relative; background:var(--tint-b); border-radius:12px;
  padding:24px 18px 20px; text-align:center; overflow:hidden;
}
.fact::before{ content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--fact-color,var(--blue)); }
.fact__num{ font-size:clamp(28px,4vw,38px); font-weight:800; color:var(--fact-color,var(--blue)); line-height:1; }
.fact__label{ margin-top:.45em; font-size:14px; color:var(--body); }

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:0 6px 22px rgba(20,30,60,.05);
}

/* mechanic (vote -> seat) ------------------------------------ */
.mechanic{
  display:flex; align-items:center; gap:clamp(14px,3vw,34px);
  flex-wrap:wrap; margin:8px 0 36px;
}
.mechanic__step{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.mechanic__icon{ width:64px; height:64px; color:var(--blue); }
.mechanic__big{ font-weight:800; font-size:clamp(20px,3vw,30px); color:var(--ink); }
.mechanic__cap{ font-size:13px; color:var(--muted); max-width:18ch; }
.mechanic__arrow{ width:46px; height:24px; color:var(--orange); flex:none; }
.mechanic__seat{ width:40px; height:40px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 6px var(--tint-o); }

/* 150-grid --------------------------------------------------- */
.seatgrid{ display:grid; grid-template-columns:repeat(30,1fr); gap:4px; margin:10px 0 8px; max-width:760px; }
.seatgrid .sq{ aspect-ratio:1; border-radius:3px; background:#D9DEE8; }
.seatgrid .sq.maj{ background:var(--orange); }
.seatgrid__legend{ display:flex; gap:22px; font-size:13px; color:var(--muted); margin-top:14px; flex-wrap:wrap; }
.seatgrid__legend i{ display:inline-block; width:13px; height:13px; border-radius:3px; margin-right:7px; vertical-align:-2px; }
@media(max-width:760px){ .seatgrid{ grid-template-columns:repeat(15,1fr); } }

/* spectrum bar (scene 03) ------------------------------------ */
.spectrum{ margin:6px 0 10px; }
.spectrum__bar{ display:flex; height:64px; border-radius:10px; overflow:hidden; box-shadow:0 6px 22px rgba(20,30,60,.08); }
.spectrum__block{ flex:0; min-width:0; position:relative; transition:filter .2s var(--ease); }
.spectrum__block:hover{ filter:brightness(1.12); z-index:2; }
.spectrum__ends{ display:flex; justify-content:space-between; margin-top:12px; font-weight:700; font-size:13px; letter-spacing:.12em; }
.spectrum__ends .l{ color:var(--p-glpvda); }
.spectrum__ends .r{ color:var(--p-pvv); }

.leaders{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-top:30px; }
.leader{ display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; }
.leader__name{ font-weight:700; font-size:14px; color:var(--ink); line-height:1.25; }
.leader__seats{ font-size:12px; color:var(--muted); }
@media(max-width:760px){
  .leaders{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:minmax(110px,1fr);
            overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; }
  .leader{ scroll-snap-align:start; }
}

/* timeline (scene 04) ---------------------------------------- */
.timeline{ position:relative; margin:30px 0 8px; padding:30px 0; }
.timeline__rail{ position:absolute; left:0; right:0; top:50%; height:4px; background:rgba(255,255,255,.15); border-radius:2px; }
.timeline__fill{ position:absolute; left:0; top:50%; height:4px; width:0; background:var(--orange); border-radius:2px; transform:translateY(-50%); }
.timeline__nodes{ position:relative; display:flex; justify-content:space-between; gap:16px; }
.tnode{ flex:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; }
.tnode__date{ font-size:12px; font-weight:700; letter-spacing:.08em; color:#9FB0CE; text-transform:uppercase; }
.tnode__dot{ width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; box-shadow:0 0 0 6px rgba(255,255,255,.06); }
.tnode__dot svg{ width:26px; height:26px; }
.tnode__cap{ font-size:13px; color:#B9C5DC; max-width:22ch; }
.tnode__cap b{ color:#fff; }

.slope{ margin-top:34px; }
.slope svg{ width:100%; height:auto; }

/* hemicycle (scene 05) --------------------------------------- */
.hemi-wrap{ position:relative; }
.hemicycle{ width:100%; height:auto; }
.hemicycle circle{ transition:opacity .18s ease, transform .18s ease; transform-origin:center; transform-box:fill-box; }
.hemicycle.dim circle:not(.on){ opacity:.16 !important; }
.hemi-center{ text-align:center; margin-top:-2%; }
.hemi-center__num{ font-size:clamp(34px,6vw,58px); font-weight:800; color:var(--ink); line-height:1; }
.hemi-center__lbl{ font-size:13px; color:var(--muted); letter-spacing:.04em; }

.tie{
  background:var(--tint-o); border:1px solid #F2C9AE; border-radius:14px;
  padding:22px 24px; margin-top:20px; display:flex; align-items:center;
  gap:22px; flex-wrap:wrap;
}
.tie__pair{ display:flex; align-items:center; gap:12px; }
.tie__vs{ font-weight:800; color:var(--orange); font-size:20px; }
.tie__txt{ flex:1; min-width:240px; }
.tie__txt b{ color:var(--ink); }
.tie__lead{ font-weight:800; color:var(--orange); }

.bars{ margin-top:34px; }
.bars svg{ width:100%; height:auto; }
.bars .bar{ transition:filter .15s ease; }
.bars__legend{ display:flex; gap:22px; margin-top:14px; font-size:13px; color:var(--muted); flex-wrap:wrap; }
.bars__legend i{ display:inline-block; width:14px; height:14px; border-radius:3px; margin-right:7px; vertical-align:-2px; }

.toggle{
  display:inline-flex; align-items:center; gap:0; margin-top:8px;
  border:1.5px solid var(--line); border-radius:999px; overflow:hidden; background:#fff;
}
.toggle button{
  border:0; background:transparent; padding:8px 18px; font-weight:700; font-size:14px;
  color:var(--muted); transition:all .2s var(--ease);
}
.toggle button[aria-pressed="true"]{ background:var(--orange); color:#fff; }

/* chain (scene 00 · start here) ------------------------------ */
.chain{
  list-style:none; margin:8px 0 26px; padding:0; position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
.chain__node{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:22px 18px; box-shadow:0 6px 22px rgba(20,30,60,.05);
  cursor:default;
}
.chain__node--key{ border-color:#F2C9AE; background:var(--tint-o); }
.chain__dot{
  width:46px; height:46px; border-radius:50%; background:var(--c,var(--blue));
  color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.chain__dot svg{ width:24px; height:24px; }
.chain__title{ display:block; font-weight:800; color:var(--ink); font-size:16px; line-height:1.2; }
.chain__cap{ display:block; font-size:13px; color:var(--muted); margin-top:6px; }
.chain__pct{ font-weight:800; color:var(--orange); font-size:17px; display:inline-block; }
.chain__link{
  position:absolute; right:-13px; top:46px; width:26px; height:26px;
  color:var(--orange); z-index:3;
}
.chain__handoff{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
}
.chain__cue{ width:26px; height:26px; color:var(--orange); }
.chain__cue{ animation:bob 1.8s ease-in-out infinite; }
@media(max-width:760px){
  .chain{ grid-template-columns:1fr; }
  .chain__link{ right:50%; top:auto; bottom:-22px; transform:translateX(50%) rotate(90deg); }
}

/* step cards (scene 06) -------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:8px 0 36px; position:relative; }
.step{ position:relative; background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px 18px; box-shadow:0 6px 22px rgba(20,30,60,.05); }
.step::before{ content:""; position:absolute; left:0; right:0; top:0; height:6px; border-radius:14px 14px 0 0; background:var(--blue); }
.step__n{ width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:15px; margin-bottom:14px; }
.step__icon{ width:30px; height:30px; color:var(--blue); margin-bottom:10px; }
.step__title{ font-weight:800; color:var(--ink); font-size:16px; }
.step__cap{ font-size:13px; color:var(--muted); margin-top:6px; }
.step__arrow{ position:absolute; right:-13px; top:50%; transform:translateY(-50%); width:26px; height:26px; color:var(--orange); z-index:3; }
.step:last-child .step__arrow{ display:none; }
@media(max-width:760px){
  .steps{ grid-template-columns:1fr; }
  .step__arrow{ right:50%; top:auto; bottom:-22px; transform:translateX(50%) rotate(90deg); }
}

.callout-record{
  background:var(--navy2); color:#fff; border-radius:16px; padding:30px;
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
}
.callout-record__num{ font-size:clamp(46px,8vw,80px); font-weight:800; color:var(--gold); line-height:1; }
.callout-record__txt{ flex:1; min-width:240px; color:#C6D0E4; }
.callout-record__txt b{ color:#fff; }
.callout-record__clock{ width:80px; height:80px; color:var(--gold); flex:none; }

/* closing crown (scene 07) ----------------------------------- */
.closing{ text-align:center; }
.closing .crown{ width:clamp(90px,16vw,150px); height:auto; color:var(--gold); margin:0 auto 26px; position:relative; }
.closing__line{ font-size:clamp(26px,4.5vw,46px); font-weight:800; line-height:1.18; color:#fff; max-width:18ch; margin:0 auto; letter-spacing:-.01em; }
.closing__line .accent{ color:var(--orange); }
.footer{ margin-top:clamp(40px,7vh,80px); font-size:13px; color:#8593B0; max-width:60ch; margin-inline:auto; }
.footer a{ color:#AEBAD2; text-decoration:underline; text-underline-offset:2px; }
.footer__src{ margin-top:14px; font-size:12px; color:#6C7A99; }

/* tooltip ---------------------------------------------------- */
.tooltip{
  position:fixed; z-index:150; pointer-events:none;
  background:var(--ink); color:#fff; padding:9px 13px; border-radius:9px;
  font-size:13px; line-height:1.35; box-shadow:0 8px 28px rgba(0,0,0,.28);
  opacity:0; transform:translateY(4px); transition:opacity .14s ease,transform .14s ease;
  max-width:220px;
}
.tooltip.show{ opacity:1; transform:translateY(0); }
.tooltip b{ font-weight:800; }
.tooltip .swatch{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:0; }
.tooltip .up{ color:#7CD992; } .tooltip .down{ color:#FF8A8A; }