/* Social wall — the only styles the library needs from its host page.
   Everything drawn by the wall is in the canvas; this file styles the DOM
   layer over it, the provenance badge. Sizes are in em: the host decides the
   type scale, so a phone and a 55" television compose alike. */

/* Used when the host page has no badge markup of its own (Focus.inside). */
.sw-host { position: relative; }
.sw-host canvas { display: block; width: 100%; height: 100%; }

.sw-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.focus {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translate(-50%, 14px);
  display: flex;
  align-items: center;
  gap: 1.1em;
  padding: .75em 1.1em;
  background: rgba(10, 22, 40, .82);
  border: 1px solid var(--outline, #24345c);
  border-radius: 1em;
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
}

.focus.visible { opacity: 1; transform: translate(-50%, 0); }

.focus .badge {
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: 1em;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.focus .dot {
  width: .7em;
  height: .7em;
  border-radius: 50%;
  box-shadow: 0 0 1.2em currentColor;
  background: currentColor;
}