/* ═══════════════════════════════════════════════════════════════════════
   roll.css — the pinned contributor-loop figure.

   Layout ported from praana-site-wip; the palette is not. Every colour
   token the figure reads is redefined on #contribLoop, so the drawing
   code is unchanged and paints in this site's dark-figure language
   instead of the wip's light one. Nothing outside this block is touched.
   ═══════════════════════════════════════════════════════════════════ */

/* Scoped to the stage, not the whole roll: only the canvas panel is dark, so
   the copy beside it can sit on a light band without inheriting dark ink. */
#contribLoop .cl-stage{
  /* surfaces — blue-black, matched to --pane so the stage is not a hole */
  --paper:   #0C1523;
  --paper-2: #111C2E;
  --paper-3: #142136;
  --card:    #1A2942;

  /* type, lightest to quietest */
  --ink:     #E9E6E0;
  --ink-2:   #C2BEB6;
  --ink-3:   #9BA3AC;
  --ink-4:   #79828C;

  /* the standing figure: a quiet form on the ground, never a light source */
  --figure:  #414A55;

  /* the five semantic hues, lifted for a dark ground and matched to the
     values the other figures on this site already use */
  --green:   #3FB07A;   /* verified · accepted · paid   */
  --blue:    #6E93C8;   /* orchestration · task · route */
  --amber:   #C9922E;   /* scarcity · multiplier · price*/
  --violet:  #9B8BC4;   /* provenance · rights          */
  --red:     #D4633C;   /* rejected at the gate         */
}

/* ── the pinned unit ─────────────────────────────────────────────── */
.cl-roll{ position:relative }

.cl-pin{
  position:sticky; top:0;
  height:100svh; min-height:460px;
  display:flex; align-items:center;
  overflow:hidden;
}
.cl-grid{
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(0,.92fr);
  gap:clamp(20px,3vw,52px);
  align-items:center;
  width:100%;
}

/* invisible: supplies the scroll length and nothing else */
.cl-track{ position:relative }
.cl-track .cl-step{ height:100svh }
.cl-track .cl-step:first-child{ height:62svh }
.cl-track .cl-step:last-child{ height:88svh }

/* ── the stage ───────────────────────────────────────────────────── */
.cl-stage{
  position:relative;
  height:min(72vh,620px);
  max-height:calc(100svh - 132px);
  border:1px solid var(--pane-rule);
  border-radius:2px;
  background:var(--pane);
  overflow:hidden;
}
.cl-stage canvas{ display:block; width:100%; height:100% }

.cl-stagehead{
  position:absolute; inset:0 0 auto 0; z-index:3;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:11px 14px;
  font-family:var(--mono); font-size:.6rem;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--pane-ink-3);
  border-bottom:1px solid var(--pane-rule);
  background:rgba(12,21,35,.86);
  pointer-events:none;
}
.cl-stagehead .rsh-live{ display:inline-flex; align-items:center; gap:7px; color:#3FB07A }
.rsh-dot{ width:5px; height:5px; border-radius:50%; background:currentColor;
  animation:rollDot 2.2s cubic-bezier(.4,0,.2,1) infinite }
@keyframes rollDot{ 0%,100%{opacity:.28;transform:scale(.8)} 50%{opacity:1;transform:scale(1)} }

/* ── the copy column · slides cross-fade in place ────────────────── */
.cl-copy{ position:relative; display:flex; align-items:center; gap:18px }
.cl-rail{ display:flex; flex-direction:column; gap:6px; flex:0 0 auto }
.cl-rail i{ display:block; width:2px; height:13px; background:var(--pane-rule);
  transition:background .3s var(--ease), height .3s var(--ease) }
.cl-rail i.on{ background:#3FB07A; height:22px }

.cl-slides{ position:relative; flex:1 1 auto; min-width:0; display:grid }
.cl-slides > .rs{
  grid-area:1/1; max-width:42ch;
  opacity:0; visibility:hidden;
  transform:translateY(7px);
  transition:opacity .42s var(--ease), transform .42s var(--ease), visibility 0s .42s;
}
.cl-slides > .rs.on{ opacity:1; visibility:visible; transform:none; transition-delay:0s }

/* Copy defaults to a light band; a dark band overrides below. The stage keeps
   its own dark palette either way, so the two can be mixed freely. */
.rs-n{ display:block; margin-bottom:11px;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--rust) }
.rs h3{ margin:0 0 10px; color:var(--ink); font-size:clamp(1.15rem,2vw,1.5rem) }
.rs p{ margin:0; color:var(--ink-2); font-size:1rem; line-height:1.55; text-wrap:pretty }
.rs-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:15px }
.rs-meta span{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); border:1px solid var(--rule);
  border-radius:2px; padding:4px 8px;
}
.band.dark .rs-n{ color:#3FB07A }
.band.dark .rs h3{ color:var(--pane-ink) }
.band.dark .rs p{ color:var(--pane-ink-2) }
.band.dark .rs-meta span{ color:var(--pane-ink-3); border-color:var(--pane-rule) }

/* ── flat: stage on top, the six beats as a grid beneath ─────────── */
.cl-roll.flat .cl-pin{ position:static; height:auto; min-height:0; display:block; overflow:visible }
.cl-roll.flat .cl-grid{ grid-template-columns:1fr; gap:0 }
.cl-roll.flat .cl-track{ display:none }
.cl-roll.flat .cl-stage{ height:min(54vh,430px); max-height:none }
.cl-roll.flat .cl-copy{ display:block }
.cl-roll.flat .cl-rail{ display:none }
.cl-roll.flat .cl-slides{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-top:0;
}
.cl-roll.flat .cl-slides > .rs{
  grid-area:auto; max-width:none;
  opacity:1; visibility:visible; transform:none; transition:background .22s var(--ease);
  background:var(--card); padding:clamp(20px,2.2vw,28px); cursor:pointer;
}
.cl-roll.flat .cl-slides > .rs:hover,
.cl-roll.flat .cl-slides > .rs.on{ background:var(--paper-2) }
.cl-roll.flat .rs-n{ color:var(--rust); margin-bottom:8px }
.cl-roll.flat .rs h3{ color:var(--ink); font-size:clamp(1.02rem,1.35vw,1.2rem); margin-bottom:8px }
.cl-roll.flat .rs p{ color:var(--ink-2); font-size:.95rem }
.cl-roll.flat .rs-meta span{ color:var(--ink-3); border-color:var(--rule) }
@media (max-width:900px){ .cl-roll.flat .cl-slides{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .cl-roll.flat .cl-slides{ grid-template-columns:1fr } }

/* ── narrow: the stage stacks above the copy ─────────────────────── */
@media (max-width:900px){
  .cl-grid{ grid-template-columns:1fr; gap:16px; align-content:center }
  .cl-stage{ height:min(46svh,360px) }
  .cl-copy{ gap:12px }
  .cl-slides > .rs{ max-width:none }
  .rs h3{ font-size:1.12rem }
  .rs p{ font-size:.93rem; line-height:1.48 }
}
@media (max-width:560px){
  .cl-stage{ height:min(40svh,270px) }
  .rs p{ font-size:.88rem }
  .rs-meta{ display:none }
}

@media (prefers-reduced-motion: reduce){
  .cl-slides > .rs{ transition:none }
  .rsh-dot{ animation:none }
}