/* bbcommunity directdeploy — self-contained styles (mobile-first). */
:root {
  /* Light corporate palette modeled on bniatl.com (teal + navy on white). */
  --bg-0:#ffffff; --bg-1:#f4f7f9; --surface:#ffffff; --surface-2:#eef3f6;
  --border:#dce3ea; --text:#1e2a36; --muted:#5d6b78;
  --accent:#cf2030; --accent-2:#16356b; --accent-3:#a81a26; --navy:#16356b; --navy-2:#1d4488; --danger:#d64545;
  --shadow:0 10px 30px rgba(16,33,60,.10); --radius:14px;
  --font:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{height:100%;}
@media (max-width:560px){ html,body{overflow-x:hidden;} }
body{
  margin:0; font-family:var(--font); color:var(--text);
  background:
    radial-gradient(900px 480px at 50% -8%, rgba(207,32,48,.06), transparent 60%),
    linear-gradient(180deg,#ffffff,var(--bg-1));
  background-attachment:fixed; display:flex; flex-direction:column; min-height:100%;
  -webkit-font-smoothing:antialiased;
}
img{display:block; max-width:100%;}
a{color:var(--accent);}

.topbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px;
  padding:14px max(16px,env(safe-area-inset-left)); border-bottom:1px solid var(--border);
  background:#fff; box-shadow:0 1px 0 rgba(16,33,60,.04); position:sticky; top:0; z-index:20;
}
.brand{display:flex; align-items:center; gap:10px; font-size:1.2rem;}
.brand__mark{font-size:1.5rem; color:var(--accent-2); animation:spin 9s linear infinite;}
.brand__name strong{color:var(--accent);}
@keyframes spin{to{transform:rotate(360deg);}}
.topbar__tag{margin:0; color:var(--muted); font-size:.85rem;}
.topbar__back{color:var(--accent); font-size:.9rem; font-weight:600; text-decoration:none; border:1px solid var(--accent); border-radius:999px; padding:6px 14px; white-space:nowrap;}
.topbar__back:hover,.topbar__back:focus-visible{background:var(--accent); color:#fff;}

.stage-wrap{flex:1; display:flex; align-items:center; justify-content:center; padding:24px 16px;}
.loading,.error{color:var(--muted); text-align:center; max-width:520px;}
.error{color:var(--danger);}
.appfoot{text-align:center; color:var(--muted); font-size:.82rem; padding:14px; border-top:1px solid var(--border);}
.appfoot code{background:var(--bg-1); padding:1px 6px; border-radius:5px; border:1px solid var(--border);}

/* BNI-style red accent bar across the very top. */
.accent-bar{height:5px; width:100%; flex-shrink:0; background:linear-gradient(90deg,var(--accent),var(--accent-3));}

/* ---- Hero banner (red/navy, white text) + stats ---- */
.hero{width:100%; color:#fff;
  background:
    radial-gradient(800px 400px at 100% 120%, rgba(207,32,48,.55), transparent 60%),
    /*linear-gradient(120deg,#16356b 0%,#1d4488 60%,#cf2030 130%);}*/
	linear-gradient(120deg,#cf2030 0%,#cf2030 60%,#16356b 130%);}
.hero__inner{max-width:1180px; margin:0 auto; padding:44px 24px 28px;}
.hero__eyebrow{margin:0 0 10px; font-size:.78rem; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:rgba(255,255,255,.85);}
.hero__title{margin:0 0 12px; font-size:2.4rem; line-height:1.1; color:#fff; font-weight:800; max-width:680px;}
.hero__title span{color:#ffd2cf;}
.hero__sub{margin:0 0 22px; font-size:1.05rem; color:rgba(255,255,255,.9); max-width:640px;}
.hero__cta .btn, #browse{border:1px solid #fff; background:#fff; color:var(--accent); border-radius:10px; padding:11px 20px; font-size:.95rem; font-weight:600; cursor:pointer;}
.hero__cta .btn:hover, #browse:hover{background:#f1f3f6; border-color:#f1f3f6;}
.hero__stats{display:grid; grid-template-columns:repeat(4,1fr); max-width:1180px; margin:0 auto; padding:0 24px 28px; gap:14px;}
.stat{background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.25); border-radius:12px; padding:18px 14px; text-align:center;}
.stat__num{display:block; font-size:2rem; font-weight:800; color:#fff; line-height:1;}
.stat__label{display:block; margin-top:6px; font-size:.78rem; letter-spacing:.4px; text-transform:uppercase; color:rgba(255,255,255,.82);}
@media (max-width:720px){
  .hero__title{font-size:1.9rem;} .hero__inner{padding:32px 16px 20px;}
  .hero__stats{grid-template-columns:repeat(2,1fr); padding:0 16px 20px;}
}

/* Deck = profile panel + rolodex */
.deck{display:flex; align-items:center; gap:28px; width:100%; max-width:1180px;}
.deck .rolo{flex:1; min-width:0;}
@media (max-width:880px){
  .deck{flex-direction:column; align-items:stretch; gap:16px;}
  .stage-wrap{align-items:stretch;}
}

/* ---- Profile panel ---- */
.profile-panel{
  width:330px; flex-shrink:0; background:linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:22px 20px; align-self:stretch; max-height:560px; overflow-y:auto;
}
@media (max-width:880px){ .profile-panel{width:100%; max-height:none;} }
.profile-panel__head{display:flex; gap:14px; align-items:flex-start; margin-bottom:16px;}
.profile-avatar{
  width:84px; height:84px; flex-shrink:0; border-radius:50%; overflow:hidden;
  border:2px solid var(--accent); background:var(--bg-1); display:flex; align-items:center; justify-content:center;
}
.profile-avatar img{width:100%; height:100%; object-fit:cover;}
.profile-avatar span{font-size:1.6rem; font-weight:700; color:var(--accent-2);}
.profile-panel__title{min-width:0;}
.profile-panel__title h2{margin:0 0 4px; font-size:1.2rem; line-height:1.2;}
.profile-panel__web{display:inline-block; font-size:.8rem; max-width:190px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; text-decoration:none;}
.profile-block{margin-bottom:14px;}
.profile-block h3{margin:0 0 6px; font-size:.74rem; text-transform:uppercase; letter-spacing:.6px; color:var(--accent-2);}
.profile-block p{margin:0; font-size:.9rem; color:var(--text); white-space:pre-wrap;}
.profile-contact{display:grid; grid-template-columns:54px 1fr; gap:6px 8px; font-size:.88rem;}
.profile-contact dt{color:var(--muted);} .profile-contact dd{margin:0;}
.profile-contact a{text-decoration:none;}

/* ---- Rolodex 3D wheel ---- */
.rolo{ --step:36deg; --radius:340px; --card-w:320px; --card-h:240px;
  display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }
.rolo-stage{
  position:relative; width:100%; max-width:600px; height:520px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  perspective:1600px; perspective-origin:50% 50%;
  overflow:hidden; /* clip the 3D wheel so cards never spill onto the controls */
  touch-action:none; cursor:grab;
}
.rolo-stage:active{cursor:grabbing;}
.rolo-stage::after{content:""; position:absolute; bottom:64px; width:380px; height:60px;
  background:radial-gradient(ellipse at center, rgba(16,33,60,.16), transparent 70%); filter:blur(4px);}
.rolo-axle{position:absolute; width:12px; height:470px; border-radius:12px; transform:translateZ(-18px);
  background:linear-gradient(90deg,#c2ccd8,#eef2f6 50%,#c2ccd8);
  box-shadow:0 0 18px rgba(16,33,60,.12);}
.rolo-wheel{position:relative; width:var(--card-w); height:var(--card-h); transform-style:preserve-3d;
  transform:rotateX(calc(var(--active) * var(--step) * -1)); transition:transform .55s cubic-bezier(.22,.61,.36,1);}
.rolo-card{
  position:absolute; inset:0; width:var(--card-w); height:var(--card-h);
  display:flex; flex-direction:column; overflow:hidden; border-radius:16px;
  border:1px solid var(--border); background:linear-gradient(160deg,var(--surface-2),var(--surface)); box-shadow:var(--shadow);
  transform:rotateX(calc(var(--i) * var(--step))) translateZ(var(--radius));
  transition:transform .55s cubic-bezier(.22,.61,.36,1), filter .4s ease, opacity .4s ease;
  backface-visibility:hidden;
  filter:brightness(calc(1 - var(--dim) * .06));
  opacity:calc(1 - var(--dim) * .45);
}
.rolo-card:not(.is-active){cursor:pointer;}
.rolo-card.is-active{
  transform:rotateX(calc(var(--i) * var(--step))) translateZ(calc(var(--radius) + 36px)) scale(1.05);
  filter:none; opacity:1; border-color:var(--accent);
  box-shadow:0 18px 44px rgba(16,33,60,.18),0 0 0 2px rgba(207,32,48,.35);
}
.rolo-card__punch{position:absolute; top:-7px; left:50%; width:46px; height:14px; transform:translateX(-50%);
  background:var(--bg-1); border:1px solid var(--border); border-top:none; border-radius:0 0 10px 10px; z-index:2;}
.rolo-card__media{height:84px; flex-shrink:0; background:linear-gradient(135deg,#eef1f4,#e2e7ee);
  display:flex; align-items:center; justify-content:center; overflow:hidden;}
.rolo-card__media img{width:100%; height:100%; object-fit:cover;}
.rolo-card__placeholder{font-size:2rem; font-weight:700; letter-spacing:1px; color:var(--accent-2); opacity:.85;}
.rolo-card__body{padding:10px 14px 4px; flex:1; min-height:0;}
.rolo-card__name{margin:0 0 4px; font-size:1.1rem; line-height:1.2;}
.rolo-card__desc{margin:0; font-size:.86rem; line-height:1.35; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.rolo-card__web{display:inline-block; margin-top:6px; font-size:.78rem; text-decoration:none;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.rolo-card__footer{display:flex; align-items:center; gap:8px; padding:8px 14px; border-top:1px solid var(--border);}

/* ---- Social links ---- */
.social-bar{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;}
.social-bar a{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:8px; color:var(--muted); background:var(--surface-2); border:1px solid var(--border); transition:.15s;}
.social-bar a:hover{color:var(--brand,var(--accent)); border-color:var(--brand,var(--accent)); transform:translateY(-2px);}

/* ---- Controls ---- */
.rolo-controls{display:flex; align-items:center; gap:16px;}
.rolo-controls button{width:44px; height:44px; border-radius:50%; border:1px solid var(--border);
  background:var(--surface); color:var(--text); font-size:1rem; cursor:pointer; transition:.16s;}
.rolo-controls button:hover:not(:disabled){border-color:var(--accent); transform:translateY(-2px);}
.rolo-controls button:disabled{opacity:.35; cursor:not-allowed;}
.rolo-counter{min-width:64px; text-align:center; color:var(--muted); font-variant-numeric:tabular-nums;}
.rolo-hint{color:var(--muted); font-size:.8rem; margin:0;}

@media (max-width:880px){ .rolo-stage{max-width:100%;} }
@media (max-width:560px){
  .rolo{ --card-w:240px; --radius:300px; --card-h:210px; }
  .rolo-stage{height:400px; perspective:1500px;}
  .rolo-controls button{width:48px; height:48px;}
  .rolo-hint{display:none;}
}