/* The bar under the video: creator, subscribe, likes, views, and the video's
   own EXP. Sits between the player and the wall. */

.vmeta { margin: 10px 0 14px; }
.vmeta[hidden] { display: none; }

.vmeta__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 18px;
}

/* ---- Creator ------------------------------------------------------------- */

.vmeta__creator {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.vmeta__avatar {
  position: relative;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(160deg, #2b3a4a, #111a24);
  display: grid;
  place-items: center;
}
.vmeta__avatar-fallback {
  font-size: 17px;
  font-weight: 800;
  color: #e7f2ff;
}
/* Absolute so it covers the initial rather than pushing it aside — the letter
   stays underneath as the fallback if the image itself fails to decode. */
.vmeta__avatar-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The level sits ON the picture, bottom-centre, the way a game badge does —
   next to the name rather than inside the row, so it reads as belonging to the
   person and not to the video. */
.vmeta__avatar-level {
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  padding: 1px 6px 2px;
  border-radius: 999px;
  background: rgba(8, 12, 20, .88);
  color: #43dced;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
}

.vmeta__names { min-width: 0; }
.vmeta__name {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vmeta__name:hover { text-decoration: underline; }
.vmeta__subs {
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--app-dim);
}

.vmeta__sub {
  flex: none;
  height: 38px;
  padding: 0 18px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  background: #0f1720;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.vmeta__sub:hover { background: #1d2836; }
.vmeta__sub[hidden] { display: none; }
/* Subscribed is the quieter state: it is a thing you have already done, not a
   thing being sold to you. */
.vmeta__sub.is-on {
  color: inherit;
  background: rgba(127, 127, 127, .16);
}
.vmeta__sub.is-on:hover { background: rgba(127, 127, 127, .26); }
.vmeta__sub:disabled { opacity: .6; cursor: default; }

/* ---- Creator Highlights -------------------------------------------------- */

/* The gap between the Subscribe button and the like/view cluster — roughly
   670px of nothing on a desktop layout. Takes the free space so the circles
   start just after Subscribe and the actions stay pinned right where they were.
   min-width:0 is what lets the row inside scroll instead of forcing this box
   wider than the bar and pushing the like button off the end. */
.vmeta__highlights {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  padding-left: 6px;
}
.vmeta__highlights:empty { display: none; }
.vmeta__highlights > .chl[hidden] { display: none; }

/* ---- Likes and views ----------------------------------------------------- */

.vmeta__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.vmeta__like {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: inherit;
  background: rgba(127, 127, 127, .14);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.vmeta__like:hover { background: rgba(127, 127, 127, .24); }
.vmeta__like:disabled { opacity: .6; cursor: default; }
.vmeta__like-icon { font-size: 15px; line-height: 1; color: var(--app-dim); }
.vmeta__like.is-on { background: rgba(236, 72, 118, .16); }
.vmeta__like.is-on .vmeta__like-icon { color: #ec4876; }

.vmeta__views { font-size: 13px; font-weight: 700; color: var(--app-dim); }

/* ---- The video's EXP ----------------------------------------------------- */

/* The bar itself is /shared/exp-bar.css — the same one every profile page
   draws. Only its placement is here: full width under the title, where
   .pf-level on a profile is a 520px column in a narrower layout. */
.vmeta__exp.pf-level {
  max-width: none;
  margin: 0 0 14px;
}
.vmeta__exp .pf-level__label {
  font-size: 15px;
  font-weight: 900;
}

/* ---- What the world has been through ------------------------------------- */

.vmeta__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.vmeta__stats[hidden] { display: none; }

.vmeta__stat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(127, 127, 127, .12);
}
.vmeta__stat-value { font-size: 13.5px; font-weight: 900; }
.vmeta__stat-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--app-dim);
}
/* The leaderboard row earns its colour: it is the only stat about a person. */
.vmeta__stat--top {
  background: rgba(22, 200, 210, .16);
  border: 1px solid rgba(22, 200, 210, .32);
}

@media (max-width: 720px) {
  .vmeta__top { gap: 10px; }
  .vmeta__creator { width: 100%; }
  .vmeta__actions { width: 100%; }
  .vmeta__avatar { width: 36px; height: 36px; }
  .vmeta__name { font-size: 14px; }
  .vmeta__sub, .vmeta__like { height: 34px; font-size: 12.5px; }
  .vmeta__stat { padding: 6px 10px; }
  .vmeta__stat-value { font-size: 12.5px; }
}