:root{
  --eip-ma-gap: 0.5rem;
  --eip-like-fill-active: #ec4899;
  --eip-bm-fill-active: #f59e0b;
}
.eip-microactions{ display:inline-flex; align-items:center; gap: var(--eip-ma-gap); margin-left: .5rem; }
.eip-microactions .eip-ma-slot:empty { display:none; }
.eip-microactions .eip-bm-btn,
.eip-microactions .eip-like-btn{ border:0; background:transparent; padding:.2rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: transform .12s ease, opacity .12s ease; }
.eip-microactions .eip-bm-btn:focus,
.eip-microactions .eip-like-btn:focus{ outline:2px solid currentColor; outline-offset:2px; }
.eip-microactions .eip-bm-btn::before{
  content:""; display:inline-block; width:1em; height:1.2em;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 4h12v17l-6-4-6 4V4z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat 50% 50% / contain;
  background: currentColor; vertical-align: middle;
}
.eip-microactions .eip-bm-btn.is-active::before{
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 4h12v17l-6-4-6 4V4z" /></svg>');
  background: var(--eip-bm-fill-active);
}
.eip-microactions .eip-like-btn::before{
  content:""; display:inline-block; width:1.2em; height:1.2em;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.1 8.64l-.1.1-.1-.1C10.14 6.6 7.1 6.6 5.14 8.56c-1.95 1.95-1.95 5.12 0 7.07L12 22.5l6.86-6.86c1.95-1.95 1.95-5.12 0-7.07-1.96-1.96-4.99-1.96-6.76-.93z" fill="none" stroke="currentColor" stroke-width="2"/></svg>') no-repeat 50% 50% / contain;
  background: currentColor; vertical-align: middle;
}
.eip-microactions .eip-like-btn.is-active::before{
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41 1.01 4.22 2.44C11.59 5.01 13.26 4 15 4 17.5 4 19.5 6 19.5 8.5c0 3.78-3.4 6.86-8.05 11.54L12 21.35z"/></svg>');
  background: var(--eip-like-fill-active);
}
.eip-microactions .eip-like-count,
.eip-microactions .eip-bm-count{ font-size:.85em; opacity:.8; margin-left:.1rem; }
.eip-pop{ transform: scale(1.12); transition: transform .16s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce){ .eip-pop{ transform:none !important; transition:none !important; } }
.eip-ma-confetti{ pointer-events:none; }

:root{
  --eip-ma-icon: 24px;          /* icon size (was ~12px) */
  --eip-ma-tap: 36px;           /* minimum tap area */
  --eip-like-fill-active: #ec4899;
  --eip-bm-fill-active: #f59e0b;
  --eip-ma-color: #111827;      /* fallback color so icons aren't white-on-white */
}

/* Put the controls on their own row at the bottom */
.eip-microactions{
  display:flex;
  width:100%;
  align-items:center;
  gap:.75rem;
  margin-top:.5rem;
  flex-wrap:nowrap;
  color:var(--eip-ma-color);
}

/* bolder buttons / bigger hit area */
.eip-microactions .eip-bm-btn,
.eip-microactions .eip-like-btn{
  border:0;
  background:transparent;
  padding:6px;
  min-width:var(--eip-ma-tap);
  min-height:var(--eip-ma-tap);
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.eip-microactions .eip-icon{
  width:var(--eip-ma-icon);
  height:var(--eip-ma-icon);
  display:block;
}

.eip-like-count,
.eip-bm-count{
  font-size:.95em;
  opacity:.85;
  margin-right:.25rem;
}

/* Keep the nice micro-pop */
.eip-pop{ transform: scale(1.12); transition: transform .16s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce){
  .eip-pop{ transform:none !important; transition:none !important; }
}

/* Remove the old ::before mask icons if they exist in your file */
.eip-microactions .eip-bm-btn::before,
.eip-microactions .eip-like-btn::before { content:none !important; }

/* --- Circular controls, fixed size, and theme-resistant resets --- */
:root{
  --eip-ma-icon: 24px;                /* icon size */
  --eip-ma-tap: calc(var(--eip-ma-icon) * 1.5);  /* circular hit area */
  --eip-ma-fg: #374151;               /* fallback visible color on light themes */
}

/* Keep the bar at the bottom visually */
.eip-sentences .eip-microactions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.6rem;
  margin-top:.5rem;
  color:var(--eip-ma-fg);
}

/* Circle buttons — no pill/oval stretching from theme CSS */
.eip-sentences .eip-microactions .eip-bm-btn,
.eip-sentences .eip-microactions .eip-like-btn{
  appearance:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  width:var(--eip-ma-tap) !important;
  height:var(--eip-ma-tap) !important;
  min-width:var(--eip-ma-tap) !important;
  min-height:var(--eip-ma-tap) !important;
  border-radius:50% !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--eip-ma-fg) !important; /* visible outline when unclicked */
  outline:2px solid transparent;     /* keep focus ring controlled */
  outline-offset:2px;
}

/* Make the icon itself fit nicely inside the circle */
.eip-sentences .eip-microactions .eip-bm-btn::before,
.eip-sentences .eip-microactions .eip-like-btn::before{
  content:"";
  display:block;
  width:var(--eip-ma-icon);
  height:var(--eip-ma-icon);
  background:currentColor;
}

/* Bookmark icons (outline vs filled when active) */
.eip-sentences .eip-microactions .eip-bm-btn::before{
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 4h12v17l-6-4-6 4V4z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat 50% 50% / contain;
}
.eip-sentences .eip-microactions .eip-bm-btn.is-active::before{
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 4h12v17l-6-4-6 4V4z"/></svg>') no-repeat 50% 50% / contain;
  background:#f59e0b; /* golden yellow when bookmarked */
}

/* Heart icons (outline vs filled when active) */
.eip-sentences .eip-microactions .eip-like-btn::before{
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.1 8.64l-.1.1-.1-.1C10.14 6.6 7.1 6.6 5.14 8.56c-1.95 1.95-1.95 5.12 0 7.07L12 22.5l6.86-6.86c1.95-1.95 1.95-5.12 0-7.07-1.96-1.96-4.99-1.96-6.76-.93z" fill="none" stroke="currentColor" stroke-width="2"/></svg>') no-repeat 50% 50% / contain;
}
.eip-sentences .eip-microactions .eip-like-btn.is-active::before{
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41 1.01 4.22 2.44C11.59 5.01 13.26 4 15 4 17.5 4 19.5 6 19.5 8.5c0 3.78-3.4 6.86-8.05 11.54L12 21.35z"/></svg>') no-repeat 50% 50% / contain;
  background:#ec4899; /* pink when liked */
}

/* Counts next to icons */
.eip-sentences .eip-microactions .eip-like-count,
.eip-sentences .eip-microactions .eip-bm-count{
  font-size:.95em;
  opacity:.85;
  margin-left:.25rem;
}

/* Kill any theme “ripple/ellipse” :after/:before effects */
.eip-sentences .eip-microactions .eip-bm-btn:after,
.eip-sentences .eip-microactions .eip-like-btn:after{
  content:none !important;
}

/* ---- ONE-ROW LAYOUT + NO WRAP + SHIRNK-WRAP CHILDREN ---- */
.eip-sentences .eip-microactions{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;                 /* <-- don't break into 2 rows */
  align-items:center;
  justify-content:flex-start;
  gap:.5rem;
  width:100%;
}

/* Prevent theme CSS from making children full-width blocks */
.eip-sentences .eip-microactions > *{
  flex:0 0 auto !important;         /* <-- shrink-wrap each item */
}

/* Make spare slots inline containers (not block) */
.eip-sentences .eip-microactions .eip-ma-slot{
  display:inline-flex !important;
  align-items:center;
}

/* Counts must be inline, not block; center them vertically next to the circle */
.eip-sentences .eip-microactions .eip-bm-count,
.eip-sentences .eip-microactions .eip-like-count{
  display:inline-block !important;  /* <-- beats themes that set span{display:block} */
  height:var(--eip-ma-tap);         /* same height as the circle button */
  line-height:var(--eip-ma-tap);    /* vertically center the numeral */
  margin-left:.25rem;
  margin-right:.4rem;
}

/* Keep the buttons perfectly round & fixed size (from earlier patch) */
:root{
  --eip-ma-icon: 24px;
  --eip-ma-tap: calc(var(--eip-ma-icon) * 1.5);
  --eip-ma-fg: #374151;
}
.eip-sentences .eip-microactions .eip-bm-btn,
.eip-sentences .eip-microactions .eip-like-btn{
  appearance:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  width:var(--eip-ma-tap) !important;
  height:var(--eip-ma-tap) !important;
  min-width:var(--eip-ma-tap) !important;
  min-height:var(--eip-ma-tap) !important;
  border-radius:50% !important;     /* true circle, no pills */
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--eip-ma-fg) !important;/* visible outline when unclicked */
}

/* Icon masks (unchanged) */
.eip-sentences .eip-microactions .eip-bm-btn::before,
.eip-sentences .eip-microactions .eip-like-btn::before{
  content:"";
  display:block;
  width:var(--eip-ma-icon);
  height:var(--eip-ma-icon);
  background:currentColor;
}
.eip-sentences .eip-microactions .eip-bm-btn::before{
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 4h12v17l-6-4-6 4V4z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat 50% 50%/contain;
}
.eip-sentences .eip-microactions .eip-bm-btn.is-active::before{
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 4h12v17l-6-4-6 4V4z"/></svg>') no-repeat 50% 50%/contain;
  background:#f59e0b;
}
.eip-sentences .eip-microactions .eip-like-btn::before{
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.1 8.64l-.1.1-.1-.1C10.14 6.6 7.1 6.6 5.14 8.56c-1.95 1.95-1.95 5.12 0 7.07L12 22.5l6.86-6.86c1.95-1.95 1.95-5.12 0-7.07-1.96-1.96-4.99-1.96-6.76-.93z" fill="none" stroke="currentColor" stroke-width="2"/></svg>') no-repeat 50% 50%/contain;
}
.eip-sentences .eip-microactions .eip-like-btn.is-active::before{
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41 1.01 4.22 2.44C11.59 5.01 13.26 4 15 4 17.5 4 19.5 6 19.5 8.5c0 3.78-3.4 6.86-8.05 11.54L12 21.35z"/></svg>') no-repeat 50% 50%/contain;
  background:#ec4899;
}

/* Kill theme ripple/ellipse overlays */
.eip-sentences .eip-microactions .eip-bm-btn:after,
.eip-sentences .eip-microactions .eip-like-btn:after{ content:none !important; }

.eip-microactions .eip-bm-btn::before,
.eip-microactions .eip-like-btn::before { content: none !important; }

/* ---- FORCE ICONS VISIBLE & KEEP ONE ROW (final override) ---- */

/* 1) Row must not wrap */
.eip-sentences .eip-microactions{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:.5rem;
  width:100%;
}

/* 2) Children shrink-wrap (prevents counts moving to next line) */
.eip-sentences .eip-microactions > *{ flex:0 0 auto !important; }

/* 3) Buttons are round, fixed size, visible color */
.eip-sentences .eip-microactions .eip-bm-btn,
.eip-sentences .eip-microactions .eip-like-btn{
  appearance:none !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  min-height:36px !important;
  border-radius:50% !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:#374151 !important; /* visible on light bg */
}

/* 4) CRITICAL: ensure pseudo-elements exist (override any content:none) */
.eip-sentences .eip-microactions .eip-bm-btn::before,
.eip-sentences .eip-microactions .eip-like-btn::before{
  content:"" !important;
  display:block !important;
  width:24px; height:24px;
  background:currentColor;
}

/* 5) Bookmark icon (outline vs filled) */
.eip-sentences .eip-microactions .eip-bm-btn::before{
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 4h12v17l-6-4-6 4V4z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>') no-repeat 50% 50%/contain;
}
.eip-sentences .eip-microactions .eip-bm-btn.is-active::before{
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 4h12v17l-6-4-6 4V4z"/></svg>') no-repeat 50% 50%/contain;
  background:#f59e0b;
}

/* 6) Heart icon (outline vs filled) */
.eip-sentences .eip-microactions .eip-like-btn::before{
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.1 8.64l-.1.1-.1-.1C10.14 6.6 7.1 6.6 5.14 8.56c-1.95 1.95-1.95 5.12 0 7.07L12 22.5l6.86-6.86c1.95-1.95 1.95-5.12 0-7.07-1.96-1.96-4.99-1.96-6.76-.93z" fill="none" stroke="currentColor" stroke-width="2"/></svg>') no-repeat 50% 50%/contain;
}
.eip-sentences .eip-microactions .eip-like-btn.is-active::before{
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 6 4 4 6.5 4c1.74 0 3.41 1.01 4.22 2.44C11.59 5.01 13.26 4 15 4 17.5 4 19.5 6 19.5 8.5c0 3.78-3.4 6.86-8.05 11.54L12 21.35z"/></svg>') no-repeat 50% 50%/contain;
  background:#ec4899;
}

/* 7) Counts inline and vertically aligned */
.eip-sentences .eip-microactions .eip-bm-count,
.eip-sentences .eip-microactions .eip-like-count{
  display:inline-block !important;
  height:36px; line-height:36px;
  margin-left:.25rem;
}

/* === EIP Microactions — final polish overrides (append at end) === */
:root{
  /* fallback hover tints (approx 20–25% intensity) */
  --eip-hover-neutral: rgba(55, 65, 81, .18);     /* neutral gray for inactive icons */
  --eip-hover-like:    rgba(236, 72,153, .20);    /* like hover when active */
  --eip-hover-bm:      rgba(245,158, 11, .20);    /* bookmark hover when active */
}

/* 1) Bring counts closer to their icons */
.eip-sentences .eip-microactions .eip-bm-count,
.eip-sentences .eip-microactions .eip-like-count{
  margin-left: .18rem !important;   /* was ~.25rem */
  line-height: var(--eip-ma-tap, 36px);
  height: var(--eip-ma-tap, 36px);
}

/* 2) Add extra spacing *between* bookmark cluster and like cluster */
.eip-sentences .eip-microactions .eip-bm-count{
  margin-right: .6rem !important;   /* creates a gap before the heart group */
}

/* 3) Twitter-style hover patch: soft filled circle behind the icon */
.eip-sentences .eip-microactions .eip-bm-btn,
.eip-sentences .eip-microactions .eip-like-btn{
  transition: background-color .12s ease, transform .12s ease; /* keep micro-pop smooth */
}

/* Neutral hover when inactive (uses currentColor mix where supported) */
.eip-sentences .eip-microactions .eip-bm-btn:hover,
.eip-sentences .eip-microactions .eip-like-btn:hover{
  /* modern browsers */
  background-color: color-mix(in srgb, currentColor 22%, transparent);
  /* fallback */
  background-color: var(--eip-hover-neutral);
}

/* When active, tint hover with the active fill color */
.eip-sentences .eip-microactions .eip-like-btn.is-active:hover{
  background-color: color-mix(in srgb, var(--eip-like-fill-active) 25%, transparent);
  background-color: var(--eip-hover-like);
}
.eip-sentences .eip-microactions .eip-bm-btn.is-active:hover{
  background-color: color-mix(in srgb, var(--eip-bm-fill-active) 25%, transparent);
  background-color: var(--eip-hover-bm);
}

/* Optional: keyboard focus ring stays visible but neat */
.eip-sentences .eip-microactions .eip-bm-btn:focus-visible,
.eip-sentences .eip-microactions .eip-like-btn:focus-visible{
  box-shadow: 0 0 0 3px color-mix(in srgb, #3b82f6 25%, transparent);
  outline: 0;
}

/* === EIP Microactions – final overrides (append at end) === */

:root{
  /* fine-tune these two if you want */
  --eip-pair-gap: .22rem;    /* icon ↔ its count */
  --eip-group-gap: .55rem;   /* bookmark group ↔ like group */
}

/* Turn off global gap so we can control pair spacing precisely */
.eip-sentences .eip-microactions{ gap: 0 !important; }

/* Tight, consistent gap between icon and its count */
.eip-sentences .eip-microactions .eip-bm-btn + .eip-bm-count,
.eip-sentences .eip-microactions .eip-like-btn + .eip-like-count{
  margin-left: var(--eip-pair-gap) !important;
}

/* Put a little air between the two clusters via the bookmark count */
.eip-sentences .eip-microactions .eip-bm-count{
  margin-right: var(--eip-group-gap) !important;
}

/* Keep counts vertically centered next to the round buttons */
.eip-sentences .eip-microactions .eip-bm-count,
.eip-sentences .eip-microactions .eip-like-count{
  display: inline-block !important;
  height: var(--eip-ma-tap, 36px) !important;
  line-height: var(--eip-ma-tap, 36px) !important;
  font-size: .95em;
  opacity: .9;
}

/* Round button box + proper stacking so the hover patch sits behind the icon */
.eip-sentences .eip-microactions .eip-bm-btn,
.eip-sentences .eip-microactions .eip-like-btn{
  position: relative !important;
  width: var(--eip-ma-tap, 36px) !important;
  height: var(--eip-ma-tap, 36px) !important;
  min-width: var(--eip-ma-tap, 36px) !important;
  min-height: var(--eip-ma-tap, 36px) !important;
  border-radius: 50% !important;
  padding: 0 !important;
  overflow: visible;
  background: transparent !important; /* we paint the patch with ::after */
}

.eip-sentences .eip-microactions .eip-bm-btn::before,
.eip-sentences .eip-microactions .eip-like-btn::before{
  position: relative; z-index: 1;   /* icon stays above the patch */
}

/* The hover patch */
.eip-sentences .eip-microactions .eip-bm-btn::after,
.eip-sentences .eip-microactions .eip-like-btn::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  z-index: 0;
  transform: scale(.9);
  opacity: 0;
  transition: opacity .12s ease, transform .12s ease;
  /* neutral tint by default (about 22–25%) */
  background-color: color-mix(in srgb, currentColor 24%, transparent);
}

/* Show patch on hover/focus */
.eip-sentences .eip-microactions .eip-bm-btn:hover::after,
.eip-sentences .eip-microactions .eip-bm-btn:focus-visible::after,
.eip-sentences .eip-microactions .eip-like-btn:hover::after,
.eip-sentences .eip-microactions .eip-like-btn:focus-visible::after{
  opacity: 1;
  transform: scale(1);
}

/* When active, tint patch to the active fill color */
.eip-sentences .eip-microactions .eip-bm-btn.is-active:hover::after,
.eip-sentences .eip-microactions .eip-bm-btn.is-active:focus-visible::after{
  background-color: color-mix(in srgb, var(--eip-bm-fill-active, #f59e0b) 25%, transparent);
}
.eip-sentences .eip-microactions .eip-like-btn.is-active:hover::after,
.eip-sentences .eip-microactions .eip-like-btn.is-active:focus-visible::after{
  background-color: color-mix(in srgb, var(--eip-like-fill-active, #ec4899) 25%, transparent);
}

/* Fallback for browsers without color-mix() */
@supports not (background-color: color-mix(in srgb, black 50%, transparent)){
  .eip-sentences .eip-microactions .eip-bm-btn::after,
  .eip-sentences .eip-microactions .eip-like-btn::after{
    background-color: rgba(55,65,81,.18); /* neutral gray ~22% */
  }
  .eip-sentences .eip-microactions .eip-bm-btn.is-active:hover::after,
  .eip-sentences .eip-microactions .eip-bm-btn.is-active:focus-visible::after{
    background-color: rgba(245,158,11,.20);
  }
  .eip-sentences .eip-microactions .eip-like-btn.is-active:hover::after,
  .eip-sentences .eip-microactions .eip-like-btn.is-active:focus-visible::after{
    background-color: rgba(236,72,153,.20);
  }
}

/* Respect reduced motion: keep the patch but remove the pop */
@media (prefers-reduced-motion: reduce){
  .eip-sentences .eip-microactions .eip-bm-btn::after,
  .eip-sentences .eip-microactions .eip-like-btn::after{
    transition: none !important;
    transform: none !important;
  }
}

/* === Circular hover patch for BOOKMARK button === */

/* 1) Make sure the button is a positioned circle */
.eip-sentences .eip-microactions .eip-bm-btn,
.eip-sentences [data-eip-bar] .eip-bm-btn{
  position: relative;
  width: var(--eip-ma-tap, 36px);
  height: var(--eip-ma-tap, 36px);
  min-width: var(--eip-ma-tap, 36px);
  min-height: var(--eip-ma-tap, 36px);
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: visible; /* ensure patch isn't clipped */
}

/* 2) Keep the icon above the patch whether it's ::before or inline SVG/text */
.eip-sentences .eip-microactions .eip-bm-btn > *,
.eip-sentences [data-eip-bar] .eip-bm-btn > *{ position: relative; z-index: 1; }
.eip-sentences .eip-microactions .eip-bm-btn::before,
.eip-sentences [data-eip-bar] .eip-bm-btn::before{ position: relative; z-index: 1; }

/* 3) The patch */
.eip-sentences .eip-microactions .eip-bm-btn::after,
.eip-sentences [data-eip-bar] .eip-bm-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;
  transform: scale(.9);
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
  /* neutral tint using currentColor; fallback below */
  background: color-mix(in srgb, currentColor 24%, transparent);
}

/* 4) Show on hover/focus */
.eip-sentences .eip-microactions .eip-bm-btn:hover::after,
.eip-sentences .eip-microactions .eip-bm-btn:focus-visible::after,
.eip-sentences [data-eip-bar] .eip-bm-btn:hover::after,
.eip-sentences [data-eip-bar] .eip-bm-btn:focus-visible::after{
  opacity: 1;
  transform: scale(1);
}

/* 5) When bookmarked (active), use active color */
.eip-sentences .eip-microactions .eip-bm-btn.is-active::after,
.eip-sentences [data-eip-bar] .eip-bm-btn.is-active::after{
  background: color-mix(in srgb, var(--eip-bm-active, #f59e0b) 25%, transparent);
}

/* Fallback for browsers without color-mix() */
@supports not (background: color-mix(in srgb, black 50%, transparent)){
  .eip-sentences .eip-microactions .eip-bm-btn::after,
  .eip-sentences [data-eip-bar] .eip-bm-btn::after{
    background: rgba(55,65,81,.18); /* neutral gray */
  }
  .eip-sentences .eip-microactions .eip-bm-btn.is-active::after,
  .eip-sentences [data-eip-bar] .eip-bm-btn.is-active::after{
    background: rgba(245,158,11,.20); /* active tint */
  }
}

/* === EIP: Bookmark button — guaranteed circular hover patch === */

/* Give the button a real circle box and position context */
li[data-sid].eip-sentence .eip-bm-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* pick ONE size; tune if you want */
  width: 36px; height: 36px;
  min-width: 36px; min-height: 36px;

  border-radius: 50%;
  background: transparent;
  padding: 0;
  line-height: 1;           /* avoid inline gaps */
  overflow: visible;        /* don't clip the patch */
  color: #374151;           /* neutral icon color; patch uses currentColor */
}

/* Make sure the icon (::before or child SVG/text) sits above the patch */
li[data-sid].eip-sentence .eip-bm-btn::before,
li[data-sid].eip-sentence .eip-bm-btn > *{ 
  position: relative; 
  z-index: 1; 
}

/* The circular patch */
li[data-sid].eip-sentence .eip-bm-btn::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;

  transform: scale(.9);
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;

  /* modern: tint from currentColor; fallback below */
  background: color-mix(in srgb, currentColor 24%, transparent);
}

/* Show on hover/focus */
li[data-sid].eip-sentence .eip-bm-btn:hover::after,
li[data-sid].eip-sentence .eip-bm-btn:focus-visible::after{
  opacity: 1;
  transform: scale(1);
}

/* Active state: slightly warmer patch (optional) */
li[data-sid].eip-sentence .eip-bm-btn[aria-pressed="true"]::after{
  background: color-mix(in srgb, #f59e0b 25%, transparent);
}

/* Fallback if color-mix() isn’t supported */
@supports not (background: color-mix(in srgb, black 50%, transparent)){
  li[data-sid].eip-sentence .eip-bm-btn::after{
    background: rgba(55,65,81,.18);          /* neutral gray */
  }
  li[data-sid].eip-sentence .eip-bm-btn[aria-pressed="true"]::after{
    background: rgba(245,158,11,.20);        /* bookmark tint */
  }
}

/* Audio button inside the micro-bar */
.eip-sentences .eip-microactions .eip-audio-btn{
  position: relative;
  width: var(--eip-ma-tap, 36px);
  height: var(--eip-ma-tap, 36px);
  min-width: var(--eip-ma-tap, 36px);
  min-height: var(--eip-ma-tap, 36px);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--eip-ma-fg, #374151);
  padding: 0;
}

/* Same circular hover patch used on other icons */
.eip-sentences .eip-microactions .eip-audio-btn::after{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:0; pointer-events:none;
  opacity:0; transform:scale(.9); transition:opacity .12s ease, transform .12s ease;
  background: color-mix(in srgb, currentColor 24%, transparent);
}
.eip-sentences .eip-microactions .eip-audio-btn:hover::after,
.eip-sentences .eip-microactions .eip-audio-btn:focus-visible::after{
  opacity:1; transform:scale(1);
}

/* --- Micro-bar spacing + audio visibility tweaks --- */
:root{
  /* tune these numbers to taste */
  --eip-ma-tap: 36px;            /* round button size (already used) */
  --eip-pair-gap: .20rem;        /* icon ↔ count */
  --eip-group-gap: .60rem;       /* group ↔ group (bm group → like group) */
  --eip-audio-gap: .70rem;       /* audio → next group */
  --eip-ma-fg: #374151;          /* neutral icon color */
  --eip-audio-fg: #0f172a;       /* darker so play icon pops */
  --eip-audio-bg: rgba(15,23,42,.06);   /* subtle base tint for visibility */
  --eip-audio-bg-hover: rgba(15,23,42,.12);
}

/* 1) Audio first, with a clear gap before bookmark */
.eip-sentences .eip-microactions .eip-audio-btn,
.eip-sentences [data-eip-bar] .eip-audio-btn{
  margin-right: var(--eip-audio-gap);
  color: var(--eip-audio-fg);
  background-color: var(--eip-audio-bg);        /* base visibility */
}
.eip-sentences .eip-microactions .eip-audio-btn:hover,
.eip-sentences [data-eip-bar] .eip-audio-btn:hover,
.eip-sentences .eip-microactions .eip-audio-btn:focus-visible,
.eip-sentences [data-eip-bar] .eip-audio-btn:focus-visible{
  background-color: var(--eip-audio-bg-hover);
}

/* 2) Bookmark: icon ↔ count closer */
.eip-sentences .eip-microactions .eip-bm-btn + .eip-bm-count,
.eip-sentences [data-eip-bar] .eip-bm-btn + .eip-bm-count{
  margin-left: var(--eip-pair-gap: 0.16rem);
}
/* 3) Then add a group gap before like */
.eip-sentences .eip-microactions .eip-bm-count,
.eip-sentences [data-eip-bar] .eip-bm-count{
  margin-right: var(--eip-group-gap);
}

/* 3) Like: icon ↔ count closer (same as bookmark) */
.eip-sentences .eip-microactions .eip-like-btn + .eip-like-count,
.eip-sentences [data-eip-bar] .eip-like-btn + .eip-like-count{
  margin-left: var(--eip-pair-gap);
}

/* Keep counts vertically centered and stable width */
.eip-sentences .eip-microactions .eip-bm-count,
.eip-sentences .eip-microactions .eip-like-count,
.eip-sentences [data-eip-bar] .eip-bm-count,
.eip-sentences [data-eip-bar] .eip-like-count{
  height: var(--eip-ma-tap);
  line-height: var(--eip-ma-tap);
  min-width: 2ch;
}

/* If your audio uses a pseudo icon, keep it above the patch */
.eip-sentences .eip-microactions .eip-audio-btn::before,
.eip-sentences [data-eip-bar] .eip-audio-btn::before{
  position: relative; z-index: 1;
}