/* IMB Tier System, Founding Access & IMANI Explanation Pass v1 — 2026-06-23 */
:root {
  --imb-tier-border: rgba(255,255,255,.12);
  --imb-tier-panel: rgba(255,255,255,.045);
  --imb-tier-panel-strong: rgba(255,255,255,.075);
  --imb-tier-text-soft: rgba(255,255,255,.74);
}

.tier-label {
  display:inline-flex;
  align-items:center;
  width:max-content;
  max-width:100%;
  padding:.22rem .5rem;
  border:1px solid var(--imb-tier-border);
  border-radius:999px;
  font-size:.68rem;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--imb-tier-text-soft);
  background:var(--imb-tier-panel);
  vertical-align:middle;
  margin-left:.35rem;
  gap:.25rem;
}
.tier-label.free { color:#d9fbdc; border-color:rgba(126,235,150,.35); background:rgba(38,168,83,.13); }
.tier-label.founding { color:#fff1c6; border-color:rgba(255,210,94,.38); background:rgba(190,136,26,.16); }
.tier-label.plus { color:#d7ccff; border-color:rgba(158,132,255,.42); background:rgba(102,76,211,.17); }
.tier-label.review { color:#cfeeff; border-color:rgba(90,190,255,.32); background:rgba(42,129,190,.14); }
.tier-label.locked { color:#ffd4d4; border-color:rgba(255,120,120,.32); background:rgba(190,42,42,.13); }

.tier-ladder-block .tier-ladder-card,
.tier-create-guide,
.tier-imani-guide-card {
  border:1px solid var(--imb-tier-border);
  background:linear-gradient(180deg, var(--imb-tier-panel-strong), rgba(255,255,255,.03));
}
.tier-ladder-grid {
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
}
.tier-ladder-item,
.tier-create-step,
.tier-fieldset {
  border:1px solid var(--imb-tier-border);
  border-radius:16px;
  padding:14px;
  background:var(--imb-tier-panel);
}
.tier-ladder-item h3,
.tier-create-step h3,
.tier-fieldset h3 { margin:.55rem 0 .35rem; }
.tier-ladder-item p,
.tier-create-step p,
.tier-fieldset p { color:var(--imb-tier-text-soft); margin:0; }
.tier-disclaimer,
.tier-softlaunch-note {
  margin:14px 0 0;
  padding:12px 14px;
  border:1px solid rgba(255,210,94,.28);
  border-radius:14px;
  background:rgba(190,136,26,.10);
  color:var(--imb-tier-text-soft);
}
.tier-create-guide {
  margin:0 0 16px;
  border-radius:18px;
  padding:16px;
}
.tier-create-grid,
.tier-field-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
}
.tier-create-step ul,
.tier-imani-guide-card ul {
  margin:.65rem 0 0;
  padding-left:1.1rem;
  color:var(--imb-tier-text-soft);
}
.tier-fieldset {
  margin:4px 0 14px;
}
.tier-fieldset[aria-disabled="true"] {
  opacity:.68;
}
.tier-fieldset[aria-disabled="true"] input,
.tier-fieldset[aria-disabled="true"] textarea,
.tier-fieldset[aria-disabled="true"] select,
.tier-fieldset[aria-disabled="true"] button {
  pointer-events:none;
}
.tier-lock-note {
  color:var(--imb-tier-text-soft);
  font-size:.85rem;
  margin:.35rem 0 0;
}
.pricing-plan .tier-safe-copy {
  margin-top:12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.04);
  color:var(--imb-tier-text-soft);
  font-size:.9rem;
}
.imani-quick-prompts {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:8px 10px 0;
}
.imani-quick-prompts .imani-mini-chip {
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:inherit;
  border-radius:999px;
  padding:.35rem .58rem;
  cursor:pointer;
  font-size:.78rem;
}
.imani-msg.ai[data-tier-explainer="1"] {
  white-space:pre-wrap;
}

@media (max-width: 980px) {
  .tier-ladder-grid,
  .tier-create-grid,
  .tier-field-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  .tier-ladder-grid,
  .tier-create-grid,
  .tier-field-grid { grid-template-columns:1fr; }
  .tier-label { margin-left:0; margin-top:.35rem; }
}

/* =========================================================
   IMB Lounge Avatar Stability Hotfix — 2026-06-24
   Keeps Lounge post avatars consistent across profile/image field variants.
========================================================= */
#view-lounge .lounge-post-avatar.avatar,
#lounge-feed .lounge-post-avatar.avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex: 0 0 40px;
  overflow: hidden;
  position: relative;
}

#view-lounge .lounge-post-avatar .avatar-img,
#lounge-feed .lounge-post-avatar .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

#view-lounge .lounge-post-avatar.image-failed,
#lounge-feed .lounge-post-avatar.image-failed,
#view-lounge .lounge-post-avatar[data-avatar-fallback="1"],
#lounge-feed .lounge-post-avatar[data-avatar-fallback="1"] {
  color: #050509;
}

#view-lounge .lounge-post-avatar .avatar-fallback,
#lounge-feed .lounge-post-avatar .avatar-fallback {
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* =========================================================
   IMB Lounge Avatar Eager-Load Hotfix — 2026-06-24
   Lounge avatars are critical identity UI and must not be
   deferred as lazy images. The initials fallback renders first;
   the image overlays it only when the browser paints it.
========================================================= */
#view-lounge .lounge-post-avatar[data-lounge-avatar-critical="1"],
#lounge-feed .lounge-post-avatar[data-lounge-avatar-critical="1"] {
  contain: layout paint;
  background: rgba(255,255,255,.08);
}

#view-lounge .lounge-post-avatar[data-lounge-avatar-critical="1"] .avatar-fallback,
#lounge-feed .lounge-post-avatar[data-lounge-avatar-critical="1"] .avatar-fallback {
  display: flex !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  line-height: 1;
}

#view-lounge .lounge-post-avatar[data-lounge-avatar-critical="1"] .avatar-img,
#lounge-feed .lounge-post-avatar[data-lounge-avatar-critical="1"] .avatar-img {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(5,5,9,.92);
}

#view-lounge .lounge-post-avatar.image-failed .avatar-img,
#lounge-feed .lounge-post-avatar.image-failed .avatar-img {
  display: none !important;
}



/* =========================================================
   IMB Lounge Avatar Connect-Mirror Hotfix — 2026-06-24
   Mirrors the Connect directory avatar DOM/class path for Lounge posts.
   The production Connect directories render avatars consistently with
   .imb-creator-avatar, so Lounge now uses that same stable presentation.
========================================================= */
#view-lounge .lounge-post-header .connect-avatar-mirror.imb-creator-avatar,
#lounge-feed .lounge-post-header .connect-avatar-mirror.imb-creator-avatar {
  width: 40px;
  height: 40px;
  min-width: 40px;
  flex: 0 0 40px;
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.08);
  line-height: 1;
}

#view-lounge .lounge-post-header .connect-avatar-mirror.imb-creator-avatar img,
#lounge-feed .lounge-post-header .connect-avatar-mirror.imb-creator-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  z-index: 1;
}

#view-lounge .lounge-post-header .connect-avatar-mirror.imb-creator-avatar span,
#lounge-feed .lounge-post-header .connect-avatar-mirror.imb-creator-avatar span {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  font-size: .82rem;
}

#view-lounge .lounge-post-header .connect-avatar-mirror.imb-creator-avatar.image-failed img,
#lounge-feed .lounge-post-header .connect-avatar-mirror.imb-creator-avatar.image-failed img {
  display: none !important;
}