/* Plon Bit — social icon row.  Uses the same tokens as every page (with fallbacks),
   so it drops into any footer without page-specific CSS.                          */
.pb-social{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0}
.pb-social[hidden]{display:none}
.pb-social--center{justify-content:center}

.pb-soc{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  background:var(--card,#F1F4FA);color:var(--dim,#8A90A6);
  box-shadow:var(--raised-sm,4px 4px 9px rgba(163,170,196,.55),-4px -4px 9px rgba(255,255,255,.92));
  text-decoration:none;
  transition:color .15s,transform .15s,box-shadow .15s;
}
.pb-soc svg{width:16px;height:16px;fill:currentColor;display:block}
.pb-soc:hover,.pb-soc:focus-visible{color:var(--accent,#7C5CFC);transform:translateY(-2px)}
.pb-soc:active{transform:none;box-shadow:var(--inset-sm,inset 3px 3px 7px rgba(163,170,196,.55),inset -3px -3px 7px rgba(255,255,255,.92))}
.pb-soc:focus-visible{outline:2px solid var(--accent,#7C5CFC);outline-offset:3px}

/* visually hidden, still read by screen readers and crawlers */
.pb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media (prefers-reduced-motion:reduce){
  .pb-soc{transition:none}
  .pb-soc:hover,.pb-soc:focus-visible{transform:none}
}