/*
 * NaijaQuiz — Leaderboard widget styles (hub result screen)
 */

.nqh-lb { margin-top: 26px; text-align: left; width: 100%; }
.nqh-lb h4 {
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted, #5c7367); margin-bottom: 12px;
}

.nqh-lb-list { display: flex; flex-direction: column; gap: 7px; }

.nqh-lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 13px;
  background: var(--surface, #fff);
  border: 1.5px solid rgba(6,49,31,.10);
  font-family: var(--body, "Outfit", sans-serif);
  font-size: .92rem; font-weight: 600;
  transition: border-color .15s;
}
.nqh-lb-row.mine {
  border-color: #0fa866;
  background: #eef5ea;
}

.nqh-lb-medal {
  font-size: 1.2rem; flex: 0 0 auto; width: 28px; text-align: center;
}
.nqh-lb-name { flex: 1; color: var(--ink, #06311f); }
.nqh-lb-name.anon { color: var(--muted, #5c7367); font-style: italic; }
.nqh-lb-score {
  font-weight: 800; color: #0fa866; font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.nqh-lb-when { font-size: .72rem; color: var(--muted, #5c7367); flex: 0 0 auto; }

.nqh-lb-rank {
  margin-top: 12px; font-size: .85rem; color: var(--muted, #5c7367);
  text-align: center;
}
.nqh-lb-rank strong { color: #0fa866; }

/* Name capture form */
.nqh-lb-form { margin-top: 14px; }
.nqh-lb-form p { font-size: .82rem; color: var(--muted, #5c7367); margin-bottom: 8px; }
.nqh-lb-inputs { display: flex; gap: 8px; }
.nqh-lb-name-input {
  flex: 1; border: 1.5px solid rgba(6,49,31,.15); border-radius: 10px;
  padding: 10px 12px; font-size: .95rem; color: var(--ink, #06311f);
  font-family: var(--body, "Outfit", sans-serif); outline: none;
  background: var(--surface, #fff); transition: border-color .15s;
}
.nqh-lb-name-input:focus { border-color: #0fa866; }
.nqh-lb-save {
  padding: 10px 16px; border-radius: 10px; border: none;
  background: #0fa866; color: #fff; font-weight: 700; font-size: .9rem;
  cursor: pointer; font-family: var(--body, "Outfit", sans-serif);
  transition: opacity .15s;
}
.nqh-lb-save:hover { opacity: .88; }
.nqh-lb-saved { font-size: .82rem; color: #0fa866; font-weight: 700; margin-top: 8px; }

.nqh-lb-loading { font-size: .82rem; color: var(--muted, #5c7367); text-align: center; padding: 12px; }