/* ACSS-friendly pill countdown */
.asb-countdown{
  --asb-bg: var(--base-ultra-dark);
  --asb-radius: 1.25rem;
  --asb-gap: .75rem;

  display:inline-flex; align-items:center; gap:var(--asb-gap);
  color: var(--asb-fg, #fff);
  background: var(--asb-bg);
  border-radius: var(--asb-radius);
  padding: .55rem .9rem;
  font: inherit;
  line-height: 1;
  backdrop-filter: saturate(1.1) blur(2px);
  box-shadow:
    0 10px 24px rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.25);
}

/* prefix/label */
.asb-countdown .asb-prefix{ opacity:.8 }

/* button inherits color; optional */
.asb-countdown .asb-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.35rem .65rem; border-radius:.6rem; text-decoration:none;
  border:1px solid currentColor; font: inherit;
}

/* digits container */
.asb-count{
  display:inline-flex; gap:.6rem; align-items:center;
  font-variant-numeric: tabular-nums; /* fixes wiggly numbers */
  font-feature-settings: "tnum" 1, "ss01" 0;
}

/* a group like 12, 05, 44 */
.asb-group{
  display:inline-flex; gap:.2rem; align-items:center;
  background: rgba(255,255,255,.06);
  border-radius: .8rem;
  padding:.35rem .5rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* single digit box */
.asb-d{
  min-width: .9ch; text-align:center;
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* colon separator */
.asb-sep{ opacity:.6; padding:0 .1ch }

/* flip/fade animation when digit changes */
.asb-d.flip{
  animation: asb-flip .34s cubic-bezier(.2,.6,.2,1);
}
@keyframes asb-flip{
  0%   { transform: translateY(-35%); opacity:.0 }
  55%  { transform: translateY(  0%); opacity:1  }
  100% { transform: translateY(  0%); opacity:1  }
}

/* LIVE state dot */
.asb-countdown.state-live .asb-timer{
  position:relative; padding-left:1rem;
}
.asb-countdown.state-live .asb-timer::before{
  content:''; width:.55rem; height:.55rem; border-radius:999px;
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  background: currentColor;
  animation: asb-pulse 1.4s infinite;
}
@keyframes asb-pulse{
  0%{box-shadow:0 0 0 0 currentColor}
  70%{box-shadow:0 0 0 .6rem rgba(0,0,0,0)}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}
}