/* === Avatar Halo Streak Ring === */
.avatar-halo{
  --ring: 0.5px;                  /* ring thickness */
  --halo-color: #f7c948;        /* base yellow */
  --bg-muted: rgba(255,255,255,.08);
  position: relative;
  display: inline-block;
}

.avatar-halo img{
  display:block;
  border-radius:30px;
}

/* progress donut using conic-gradient + mask to punch the hole */
.avatar-halo::before{
  content:"";
  position:absolute;
  inset: calc(-1 * var(--ring));
  border-radius: 30px;
  background:
    conic-gradient(var(--halo-color) calc(var(--streak-pct) * 1%), var(--bg-muted) 0);
  -webkit-mask: radial-gradient(circle calc(50% - var(--ring)), transparent 98%, #000 100%);
          mask: radial-gradient(circle calc(50% - var(--ring)), transparent 98%, #000 100%);
}

/* subtle outer glow by tier */
.avatar-halo.t1::after,
.avatar-halo.t3::after,
.avatar-halo.t7::after,
.avatar-halo.t14::after,
.avatar-halo.t30::after{
  content:"";
  position:absolute;
  inset: calc(-1 * var(--ring));
  border-radius: 30px;
  pointer-events:none;
}

.avatar-halo.t1::after  { box-shadow: 0 0  6px rgba(247,201,72,.20) inset, 0 0  4px rgba(247,201,72,.20); }
.avatar-halo.t3::after  { box-shadow: 0 0  8px rgba(247,201,72,.28) inset, 0 0  6px rgba(247,201,72,.28); }
.avatar-halo.t7::after  { box-shadow: 0 0 10px rgba(247,201,72,.38) inset, 0 0  8px rgba(247,201,72,.38); }
.avatar-halo.t14::after { box-shadow: 0 0 12px rgba(247,201,72,.50) inset, 0 0 10px rgba(247,201,72,.50); }
.avatar-halo.t30::after { box-shadow: 0 0 14px rgba(247,201,72,.60) inset, 0 0 12px rgba(247,201,72,.60); }

/* small pulse on hover for flex (optional) */
.avatar-halo:hover::before{ filter: brightness(1.08); }





/* === Streak Heatmap (Final Polished Version) === */
/* === Streak Heatmap — tight, card-safe, 2-row layout === */
.streak-heatmap{
  --gap: 7px;                    /* space between dots */
  --on: #f7c948;                 /* checked-in color */
  --off: rgba(255,255,255,.08);  /* missed color */
  --today-ring: rgba(255,255,255,.55);

  padding: .65rem .9rem .75rem;  /* align with your float-card padding */
}

.streak-heatmap__meta{
  font-size:.85rem;
  font-weight:600;
  color:rgba(255,255,255,.9);
  margin-bottom:.35rem;
}

/* EXACTLY fits the card: 15 columns × 2 rows.
   Each track width is computed so 15 cells + 14 gaps = 100% width. */
.streak-heatmap__grid{
  --track: calc((100% - (14 * var(--gap))) / 15);
  display:grid;
  grid-template-columns: repeat(15, var(--track));
  column-gap: var(--gap);
  row-gap: var(--gap);
  padding-bottom:.4rem;          /* space above footer line */
}

.streak-heatmap__grid .cell{
  width:100%;
  aspect-ratio:1 / 1;            /* perfect squares, no overflow */
  border-radius:3px;
  background:var(--off);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10);
  transition: box-shadow .12s ease, filter .12s ease;
}

.streak-heatmap__grid .cell.on{
  background:var(--on);
  box-shadow: 0 0 4px rgba(247,201,72,.28), inset 0 0 0 1px rgba(0,0,0,.12);
}

/* Today: subtle ring, not a chunky box */
.streak-heatmap__grid .cell.today{
  outline: 1px solid var(--today-ring);
  outline-offset: 1px;
}

/* No scale-on-hover (keeps layout stable). Slight glow only. */
.streak-heatmap__grid .cell:hover{
  filter: brightness(1.08);
  box-shadow: 0 0 6px rgba(247,201,72,.35);
}

.streak-heatmap__footer{
  font-size:.85rem;
  color:rgba(255,255,255,.82);
  display:flex; align-items:center; gap:.45rem;
}
.streak-heatmap__footer strong{ color:#f7c948; }


/* =========================================================
   MOBILE: Square-ish avatar halo (flat edges)
   ========================================================= */
@media (max-width: 767.98px) {

  .avatar-halo img,
  .avatar-halo::before,
  .avatar-halo::after {
    border-radius: 20px !important;
  }

}