/* ===== Points/level module + check-in toast (design_handoff_points_bar) =====
   Lives in the control bars (global .sc-cbar and /explore's .xf-cbar),
   replacing the rotating Rising chip. Dark base + html.si-light overrides. */

/* ---- module pill ---- */
.sclvl { position: relative; flex: none; }
/* right-aligned in the control bars, like the Rising chip it replaced —
   the persona pill rides after it */
.sc-cbar .sclvl, .xf-cbar .sclvl { margin-left: auto; }
.sclvl-pill {
  display: inline-flex !important; align-items: center; gap: 9px;
  padding: 4px 13px 4px 5px !important; margin: 0 !important; width: auto !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important; border-radius: 999px !important;
  background: transparent !important; box-shadow: none !important;
  cursor: pointer; font-family: inherit; line-height: 1 !important;
  transition: border-color 0.2s ease, box-shadow 0.3s ease;
}
.sclvl-pill:hover { border-color: rgba(255, 255, 255, 0.6) !important; }
.sclvl.is-levelup .sclvl-pill { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0.18) !important; }
.sclvl-badge {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: #e9edf2; color: #0b0d10;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 850;
}
.sclvl-badge.is-big { width: 30px; height: 30px; font-size: 12px; }
.sclvl-stack { display: flex; flex-direction: column; gap: 4px; width: 160px; }
.sclvl-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sclvl-label {
  font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.6); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.sclvl-label.is-up { color: #4ade80; }
.sclvl-pts {
  font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.75); white-space: nowrap; transition: color 0.5s;
}
.sclvl-pts.is-flash { color: #4ade80; }
.sclvl-bar { display: block; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.sclvl-fill {
  display: block; height: 100%; border-radius: 2px; background: #e9edf2;
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---- signed-out ghost: dashed pitch pill, links to /signup ---- */
.sclvl.is-ghost .sclvl-pill { border-style: dashed !important; border-color: rgba(255, 255, 255, 0.35) !important; }
.sclvl.is-ghost .sclvl-pill:hover { border-color: rgba(255, 255, 255, 0.65) !important; }
.sclvl.is-ghost .sclvl-badge {
  background: transparent; color: rgba(255, 255, 255, 0.55);
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
}
.sclvl.is-ghost .sclvl-pts { color: #fff; font-size: 11.5px; }
.sclvl.is-ghost .sclvl-bar { background: rgba(255, 255, 255, 0.1); }
.sclvl.is-ghost .sclvl-fill { background: rgba(255, 255, 255, 0.35); }

/* ---- dropdown panel ---- */
@keyframes sclvl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.sclvl-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 1002;
  width: 330px; padding: 16px 18px 14px;
  border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 14px;
  background: #171b20; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  animation: sclvl-in 0.25s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.sclvl-phead { display: flex; align-items: center; gap: 11px; margin: 0 0 12px; }
.sclvl-pcol { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sclvl-pcol b { font-size: 15px; font-weight: 850; color: #fff; letter-spacing: -0.2px; }
.sclvl-pcol span {
  font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.sclvl-ppts { flex: none; font-size: 16px; font-weight: 850; font-variant-numeric: tabular-nums; color: #fff; }
.sclvl-pbar { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.sclvl-pbar i { display: block; height: 100%; border-radius: 3px; background: #e9edf2; }
.sclvl-pcap { display: block; margin: 7px 0 0; font-size: 11px; color: rgba(255, 255, 255, 0.6); }
.sclvl-earnhead { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; }
.sclvl-earnhead span {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.sclvl-earnhead i { flex: 1; height: 1px; background: rgba(255, 255, 255, 0.2); }
.sclvl-earn {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.sclvl-earn:last-of-type { border-bottom: none; }
.sclvl-earn span { font-size: 12.5px; font-weight: 700; color: #fff; }
.sclvl-earn b { font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.85); }
.sclvl-earn.is-done span { color: rgba(255, 255, 255, 0.45); }
.sclvl-earn.is-done b { color: #4ade80; }
.sclvl-pfoot {
  display: block; margin: 12px 0 0; padding-top: 11px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12px; font-weight: 700; color: #fff !important; text-decoration: none;
}
.sclvl-pfoot:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ---- token flight ---- */
.sclvl-tokens { position: fixed; inset: 0; z-index: 1400; pointer-events: none; }
.sclvl-token {
  position: absolute; width: 14px; height: 14px; border-radius: 50%;
  background: #e9edf2; box-shadow: inset 0 0 0 1.5px rgba(16, 20, 24, 0.4),
    0 3px 8px rgba(0, 0, 0, 0.35);
  opacity: 1;
  transition: transform 0.75s cubic-bezier(0.35, 0, 0.25, 1), opacity 0.25s linear;
}

/* ---- bottom action pill ---- */
.sclvl-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 1300;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px 8px 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.45); background: #171b20;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, 16px); opacity: 0;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.35s ease;
}
.sclvl-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.sclvl-toast-kicker {
  font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5); white-space: nowrap;
}
.sclvl-toast-act {
  display: inline-flex !important; align-items: center; margin: 0 !important;
  padding: 7px 15px !important; width: auto !important;
  border: none !important; border-radius: 999px !important;
  background: #e9edf2 !important; color: #0b0d10 !important;
  font-size: 12px !important; font-weight: 800; font-family: inherit;
  line-height: 1 !important; cursor: pointer; box-shadow: none !important;
  white-space: nowrap;
}
.sclvl-toast-act.is-done {
  background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.55) !important;
  cursor: default;
}
.sclvl-toast-x {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin: 0 !important; padding: 0 !important;
  border: none !important; border-radius: 50% !important; background: transparent !important;
  color: rgba(255, 255, 255, 0.5) !important; font-size: 15px; cursor: pointer;
  box-shadow: none !important; line-height: 1 !important; width: 24px !important;
}
.sclvl-toast-x:hover { color: #fff !important; }

@media (max-width: 1100px) { .sclvl { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .sclvl-panel { animation: none; }
  .sclvl-fill, .sclvl-pts { transition: none; }
  .sclvl-tokens { display: none; }
  .sclvl-toast { transition: none; }
}

/* ============================= LIGHT MODE ================================ */
html.si-light .sclvl.is-ghost .sclvl-pill { border-color: rgba(16, 20, 24, 0.35) !important; }
html.si-light .sclvl.is-ghost .sclvl-pill:hover { border-color: rgba(16, 20, 24, 0.65) !important; }
html.si-light .sclvl.is-ghost .sclvl-badge {
  background: transparent; color: rgba(16, 20, 24, 0.55);
  border-color: rgba(16, 20, 24, 0.4);
}
html.si-light .sclvl.is-ghost .sclvl-pts { color: #101418; }
html.si-light .sclvl.is-ghost .sclvl-bar { background: rgba(16, 20, 24, 0.1); }
html.si-light .sclvl.is-ghost .sclvl-fill { background: rgba(16, 20, 24, 0.35); }
html.si-light .sclvl-pill { border-color: rgba(16, 20, 24, 0.3) !important; }
html.si-light .sclvl-pill:hover { border-color: rgba(16, 20, 24, 0.6) !important; }
html.si-light .sclvl-badge { background: #101418; color: #fff; }
html.si-light .sclvl-label { color: rgba(16, 20, 24, 0.6); }
html.si-light .sclvl-label.is-up { color: #16a34a; }
html.si-light .sclvl-pts { color: rgba(16, 20, 24, 0.75); }
html.si-light .sclvl-pts.is-flash { color: #16a34a; }
html.si-light .sclvl-bar { background: rgba(16, 20, 24, 0.12); }
html.si-light .sclvl-fill { background: #101418; }
html.si-light .sclvl-panel {
  border-color: rgba(16, 20, 24, 0.45); background: #f4f5f7;
  box-shadow: 0 18px 48px rgba(16, 20, 24, 0.16);
}
html.si-light .sclvl-pcol b { color: #101418; }
html.si-light .sclvl-pcol span { color: rgba(16, 20, 24, 0.5); }
html.si-light .sclvl-ppts { color: #101418; }
html.si-light .sclvl-pbar { background: rgba(16, 20, 24, 0.12); }
html.si-light .sclvl-pbar i { background: #101418; }
html.si-light .sclvl-pcap { color: rgba(16, 20, 24, 0.6); }
html.si-light .sclvl-earnhead span { color: rgba(16, 20, 24, 0.55); }
html.si-light .sclvl-earnhead i { background: rgba(16, 20, 24, 0.2); }
html.si-light .sclvl-earn { border-bottom-color: rgba(16, 20, 24, 0.1); }
html.si-light .sclvl-earn span { color: #101418; }
html.si-light .sclvl-earn b { color: rgba(16, 20, 24, 0.85); }
html.si-light .sclvl-earn.is-done span { color: rgba(16, 20, 24, 0.45); }
html.si-light .sclvl-earn.is-done b { color: #16a34a; }
html.si-light .sclvl-pfoot { border-top-color: rgba(16, 20, 24, 0.16); color: #101418 !important; }
html.si-light .sclvl-token {
  background: #101418;
  box-shadow: inset 0 0 0 1.5px rgba(236, 238, 241, 0.4), 0 3px 8px rgba(16, 20, 24, 0.25);
}
html.si-light .sclvl-toast {
  border-color: rgba(16, 20, 24, 0.45); background: #f4f5f7;
  box-shadow: 0 10px 28px rgba(16, 20, 24, 0.12);
}
html.si-light .sclvl-toast-kicker { color: rgba(16, 20, 24, 0.5); }
html.si-light .sclvl-toast-act { background: #101418 !important; color: #fff !important; }
html.si-light .sclvl-toast-act.is-done {
  background: rgba(16, 20, 24, 0.08) !important; color: rgba(16, 20, 24, 0.55) !important;
}
html.si-light .sclvl-toast-x { color: rgba(16, 20, 24, 0.5) !important; }
html.si-light .sclvl-toast-x:hover { color: #101418 !important; }