/* Demo banner and "sign in as" picker. Uses the prototype's own colors. */
.demo-banner {
  display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap;
  padding: .45rem 1rem; font-size: .82rem; color: #cbd5e1; text-align: center;
  background: linear-gradient(90deg, rgba(34, 211, 238, .12), rgba(99, 102, 241, .12), rgba(168, 85, 247, .12));
  border-bottom: 1px solid var(--line);
}
.demo-banner strong { font: 700 .7rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.demo-banner button { font: inherit; font-size: .78rem; padding: .2rem .75rem; border: 1px solid rgba(34, 211, 238, .5); color: #a5f3fc; background: rgba(34, 211, 238, .08); border-radius: 999px; cursor: pointer; }
.demo-banner button:hover { box-shadow: var(--glow); }

.demo-picker { max-width: 62rem; margin: 1.5rem auto 1.5rem; text-align: center; }
.demo-picker h2 {
  margin: 0 0 .4rem; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 750; letter-spacing: -.03em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.demo-people { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin: 1.6rem 0 1.2rem; text-align: left; }
.demo-people button {
  position: relative; flex: 0 1 14.5rem; display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.05rem;
  font: inherit; color: var(--ink); cursor: pointer; text-align: left;
  background: linear-gradient(180deg, rgba(34, 46, 72, .8), rgba(20, 29, 48, .8));
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.demo-people button::after { content: "→"; position: absolute; top: .9rem; right: 1rem; color: var(--faint); transition: color .15s, transform .15s; }
.demo-people button:hover, .demo-people button:focus-visible { transform: translateY(-3px); border-color: rgba(34, 211, 238, .55); box-shadow: 0 16px 36px -14px rgba(34, 211, 238, .55); }
.demo-people button:hover::after { color: var(--accent); transform: translateX(3px); }
.demo-people button:disabled { opacity: .55; cursor: wait; }
.demo-people strong { font-size: 1.02rem; }
.demo-role { font: 600 .68rem/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.demo-who { font-size: .86rem; color: #cbd5e1; }
.demo-cred { margin-top: .2rem; font: .72rem/1.4 var(--mono); color: var(--faint); word-break: break-all; }