/* ══════════════════════════════════════════════════════════════════════
   badges.css — behavioural badges.

   Byte-identical across all four apps AND the admin dashboard. Uses only
   design tokens the host stylesheet already defines, so it inherits both
   themes for free and never needs its own light-mode block.

   Surface colours are written as a fallback chain because the dashboard
   is a separate project with its own names for the same two things:
   --panel/--line in the apps, --bg-elevated/--border in admin. One file,
   both palettes, no fork.
   ══════════════════════════════════════════════════════════════════════ */

/* ── The badge itself ─────────────────────────────────────────────── */
.zb { display: inline-block; line-height: 0; vertical-align: middle; }
.zb svg { display: block; overflow: visible; }

/* Soft outer glow, tinted per category. drop-shadow follows the alpha
   of the shape rather than its box, so the light comes off the crest
   silhouette and not off a rectangle behind it. */
.zb-creator    svg { filter: drop-shadow(0 1px 5px rgba(124, 92, 255, .45)); }
.zb-social     svg { filter: drop-shadow(0 1px 5px rgba(46, 224, 138, .38)); }
.zb-generosity svg { filter: drop-shadow(0 1px 5px rgba(255, 95, 158, .40)); }
.zb-loyalty    svg { filter: drop-shadow(0 1px 7px rgba(150, 180, 255, .52)); }

/* Beside a name the glow is dialled back — at 17px, next to the
   verified seal and the Plus crown, a strong halo just reads as blur. */
.zb-compact svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); }

/* ── Shimmer: rare badges only ─────────────────────────────────────
   Founding Member and every Gold tier. A clipped bar swept across the
   crest by a CSS transform — one compositor layer, no SMIL, no timer. */
.zb-shine { opacity: 0; }
.zb-rare .zb-shine {
  opacity: 1;
  animation: zb-sweep 3.4s cubic-bezier(.4, 0, .5, 1) infinite;
}
@keyframes zb-sweep {
  0%   { transform: translateX(-46px); }
  55%  { transform: translateX(46px); }
  100% { transform: translateX(46px); }
}
@media (prefers-reduced-motion: reduce) {
  .zb-rare .zb-shine { animation: none; opacity: .18; }
}

/* ── Name rows ─────────────────────────────────────────────────────
   Matches the spacing the verified badge and Plus crown already use,
   so the four marks sit on one rhythm instead of three. */
.name-row .zb,
.conv-name .zb,
.row-title .zb,
.chat-title .zb,
.chat-name .zb,
.chat-head-name .zb,
.comment-author .zb,
.creator-name .zb,
.acc-name .zb,
.menu-me-name .zb,
.sh-name .zb,
.sp-name .zb,
.qr-person-name .zb,
.qr-result-name .zb,
.reel-author-name .zb {
  margin-left: .18em;
  flex: none;
}

/* ── Profile section ──────────────────────────────────────────────── */
.zb-section { margin: 1.1rem 0 .4rem; }
.zb-section > h4 {
  display: flex; align-items: baseline; gap: .55rem;
}
.zb-count {
  font-size: .72rem; font-weight: 600; letter-spacing: 0;
  text-transform: none;
}

.zb-group { margin: 0 0 .9rem; }
.zb-group-title {
  margin: 0 0 .5rem;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2, var(--muted));
}

.zb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: .9rem .4rem;
}

.zb-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: .3rem; text-align: center; min-width: 0;
}
.zb-cell-icon { line-height: 0; }
.zb-cell-name {
  font-size: .72rem; line-height: 1.25; font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}
.zb-cell-tier {
  font-size: .6rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .08rem .38rem; border-radius: 999px;
  border: 1px solid transparent;
}
.zb-t-bronze { color: #d99a63; border-color: rgba(217, 154, 99, .32); background: rgba(217, 154, 99, .10); }
.zb-t-silver { color: #c2ccd9; border-color: rgba(194, 204, 217, .32); background: rgba(194, 204, 217, .10); }
.zb-t-gold   { color: #f0c04a; border-color: rgba(240, 192, 74, .34);  background: rgba(240, 192, 74, .11); }

.zb-cell-prog {
  font-size: .66rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* "Ready": the threshold is already met and the award write hasn't landed
   yet. Accented rather than muted, because on the owner's own profile it
   is the most interesting thing on the wall. */
.zb-cell-ready {
  color: var(--accent-a, var(--accent, #7c5cff));
  font-weight: 700;
}

/* Locked: the shape stays legible, the colour does not. Greying it out
   rather than hiding it is the whole point of showing locked badges —
   you can see what you are chasing. */
.zb-cell.locked .zb svg { filter: grayscale(1) opacity(.34); }
.zb-cell.locked .zb-cell-name { color: var(--muted); font-weight: 500; }
.zb-cell.locked .zb-rare .zb-shine { animation: none; opacity: 0; }

/* ── Celebration ───────────────────────────────────────────────────
   Deliberately brief and dismissible. It appears at the moment a badge
   is written and gets out of the way on its own after four seconds. */
.zb-cheer-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: rgba(4, 7, 14, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .22s ease;
}
.zb-cheer-overlay.in  { opacity: 1; }
.zb-cheer-overlay.out { opacity: 0; }

.zb-cheer {
  display: flex; flex-direction: column; align-items: center;
  gap: .45rem; text-align: center;
  max-width: 21rem; padding: 1.6rem 1.4rem;
  border-radius: 20px;
  background: var(--panel, var(--bg-elevated, #111725));
  border: 1px solid var(--line, var(--border, #1f2839));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  transform: translateY(14px) scale(.94);
  transition: transform .34s cubic-bezier(.16, 1, .3, 1);
}
.zb-cheer-overlay.in .zb-cheer { transform: none; }

.zb-cheer-badge { line-height: 0; margin-bottom: .35rem; }
.zb-cheer-overlay.in .zb-cheer-badge {
  animation: zb-pop .55s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes zb-pop {
  0%   { transform: scale(.5) rotate(-9deg); opacity: 0; }
  60%  { transform: scale(1.07) rotate(2deg); opacity: 1; }
  100% { transform: none; }
}

.zb-cheer-kicker {
  font-size: .64rem; font-weight: 700;
  letter-spacing: .16em; color: var(--muted);
}
.zb-cheer-title {
  font-size: 1.06rem; font-weight: 700; line-height: 1.3;
  color: var(--text);
}
.zb-cheer-sub {
  font-size: .82rem; line-height: 1.45; color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .zb-cheer-overlay, .zb-cheer { transition: none; }
  .zb-cheer-overlay.in .zb-cheer-badge { animation: none; }
}