/* forre_pulse — Happy Birthday-banner på hubbens flöde.
   Självständig, scopad, ingen prefix-krock med forre_pulse.css (.bday-*).
   Följer pulse-tokens (var(--card/--line/--ink/--accent/--danger/--gold/--r)). */

html[data-pulse] .bday-card{
  position:relative;
  overflow:hidden;
  text-align:center;
  padding:18px 16px 16px;
}

html[data-pulse] .bday-banner{
  display:block;
  width:auto;
  max-width:230px;
  max-height:104px;
  height:auto;
  margin:2px auto 10px;
  position:relative;
  z-index:1;
}

html[data-pulse] .bday-title{
  position:relative;
  z-index:1;
  font-size:15px;
  font-weight:700;
  color:var(--ink);
  line-height:1.35;
}

html[data-pulse] .bday-title a{
  color:var(--accent-ink);
  font-weight:700;
  text-decoration:none;
}
html[data-pulse] .bday-title a:hover{ text-decoration:underline; }

html[data-pulse] .bday-sub{
  position:relative;
  z-index:1;
  margin-top:3px;
  font-size:12px;
  color:var(--dim);
}

html[data-pulse] .bday-cta{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:12px;
  padding:7px 14px;
  border:1px solid var(--line2);
  border-radius:var(--r);
  background:var(--card);
  color:var(--accent-ink);
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  transition:background .12s ease-out, border-color .12s ease-out;
}
html[data-pulse] .bday-cta:hover{
  background:var(--accent-wash);
  border-color:var(--accent);
}

/* Konfetti — statiskt, diskret scatter (ingen animation, ingen gradient). */
html[data-pulse] .bday-confetti{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}
html[data-pulse] .bday-confetti i{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:1px;
  opacity:.75;
}
html[data-pulse] .bday-confetti i:nth-child(1){ left:8%;  top:14px; background:var(--danger); transform:rotate(18deg); }
html[data-pulse] .bday-confetti i:nth-child(2){ left:20%; top:34px; background:var(--accent); transform:rotate(-12deg); }
html[data-pulse] .bday-confetti i:nth-child(3){ left:33%; top:10px; background:var(--gold); transform:rotate(24deg); }
html[data-pulse] .bday-confetti i:nth-child(4){ right:30%;top:20px; background:var(--live); transform:rotate(-20deg); }
html[data-pulse] .bday-confetti i:nth-child(5){ right:18%;top:40px; background:var(--danger); transform:rotate(10deg); }
html[data-pulse] .bday-confetti i:nth-child(6){ right:7%; top:12px; background:var(--accent); transform:rotate(-24deg); }
html[data-pulse] .bday-confetti i:nth-child(7){ left:12%; bottom:16px;background:var(--gold); transform:rotate(-16deg); }
html[data-pulse] .bday-confetti i:nth-child(8){ right:11%;bottom:14px;background:var(--live); transform:rotate(20deg); }

/* Snabb-grattis: 1-klicks-hälsning + eget meddelande. */
html[data-pulse] .bday-greet{ position:relative; z-index:1; margin-top:12px; }
html[data-pulse] .bday-greet-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px;
}
html[data-pulse] .bday-cta--primary{
  background:var(--accent); border-color:var(--accent); color:#fff;
}
html[data-pulse] .bday-cta--primary:hover{
  background:var(--accent-ink); border-color:var(--accent-ink);
}
html[data-pulse] .bday-cta--ghost{ color:var(--ink2); }
html[data-pulse] .bday-llama{ vertical-align:-4px; margin-right:2px; }

html[data-pulse] .bday-own{
  display:flex; gap:8px; align-items:center; justify-content:center;
  margin-top:10px; flex-wrap:wrap;
}
html[data-pulse] .bday-own[hidden]{ display:none; }
html[data-pulse] .bday-done[hidden]{ display:none; }
html[data-pulse] .bday-own-in{
  flex:1 1 220px; max-width:340px; min-width:0;
  padding:8px 12px; border:1px solid var(--line2); border-radius:var(--r);
  background:var(--inset); color:var(--ink); font:inherit; font-size:13px;
}
html[data-pulse] .bday-own-in:focus{ outline:none; border-color:var(--accent); background:var(--card); }
html[data-pulse] .bday-own-send{ flex:0 0 auto; margin-top:0; }

html[data-pulse] .bday-done{
  position:relative; z-index:1; margin-top:12px;
  font-size:13px; font-weight:600; color:var(--live);
}
html[data-pulse] .bday-done .bi{ margin-right:4px; }

html[data-pulse] .bday-err{
  position:relative; z-index:1; margin-top:10px;
  font-size:12.5px; font-weight:600; color:var(--danger);
}
html[data-pulse] .bday-err[hidden]{ display:none; }

@media(max-width:560px){
  html[data-pulse] .bday-banner{ max-width:190px; max-height:88px; }
  html[data-pulse] .bday-confetti i:nth-child(3),
  html[data-pulse] .bday-confetti i:nth-child(4){ display:none; }
}