/* =====================================================================
   EIP Sentence Anantha — Consolidated Styles (FLEX layout)
   Contract selectors preserved (no renames)
   - Archives/blog & Singles: FLEX 3-row feel (Sentence → Actions → Level+Chips)
   ===================================================================== */

/* ===== Base list + typography ===== */
.eip-sentences { list-style: none; padding-left: 0; margin: 0; }
.eip-sentence  {
  margin: .6rem 0;
  padding: 4px 6px 8px;
  line-height: 1.5;
  font-size: 18.5px;

  /* FLEX 3-row container (no wrappers) */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: .5rem;   /* horizontal gap within a row */
  row-gap: .35rem;     /* vertical gap when wrapping to next row */
  box-sizing: border-box;
}

/* ===== Chips (colors via contract vars) ===== */
.eip-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.eip-sentences.chips-hidden .eip-chips { display: none; } /* contract */
.chip { border: 0; padding: 2px 8px; border-radius: 999px; font-size: 12px; cursor: pointer; }
.chip-idiom     { background: var(--eip-idiom, #A855F7); color: #fff; }
.chip-phrasal   { background: var(--eip-phrasal, #06B6D4); color: #fff; }
.chip-connector { background: var(--eip-connector, #F59E0B); color: #111; }

/* ===== Level badge (tiny, inline) ===== */
.eip-level{
  order: 3; /* Row 3 */
  display:inline-block;
  margin-right:6px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  line-height:1.3;
  background:#eef2ff;
  color:#3730a3;
  white-space:nowrap;
  vertical-align:middle;
}

/* ===== Deep-link highlight ===== */
.eip-hl{
  background-color: rgba(255,235,59,.28);
  box-shadow: inset 0 0 0 2px rgba(255,235,59,.45);
  transition: background-color 180ms ease;
}

/* ===== Audio button (visuals + states; reusable) ===== */
.eip-audio-btn{
  --sz: 34px;
  width:var(--sz);
  height:var(--sz);
  border-radius:50%;
  border:0;
  background:#111;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
  cursor:pointer;
  position:relative;
  transition:transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.eip-audio-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.18); background:#0f172a; }
/* Play / pause / loading glyphs */
.eip-audio-btn::before{
  content:''; display:block; width:0; height:0;
  border-left:10px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent;
  margin-left:2px;
}
.eip-audio-btn[data-state="playing"]::before{
  content:''; width:12px; height:12px; border:none;
  box-shadow:0 0 0 0 #fff, 6px 0 0 0 #fff;
}
.eip-audio-btn[data-state="loading"]{ background:#334155; }
.eip-audio-btn[data-state="loading"]::before{
  content:''; width:14px; height:14px; border:2px solid rgba(255,255,255,.55);
  border-top-color:#fff; border-radius:50%; animation:eip-spin 800ms linear infinite;
}
@keyframes eip-spin { to { transform: rotate(360deg); } }

/* ================= FLEX 3-row layout (Sentence → Actions → Level+Chips) ================= */

/* Row 1: sentence text (full width, on top) */
.eip-sentence .eip-text,
.eip-sentence .txt{
  order: 1;
  flex-basis: 100%;
  min-width: 0;
  margin: 0 0 .5rem 0;           /* space under Row 1 */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

/* Row 2: actions (▶ ★ count ♥ count) — keep in one line and aligned */
.eip-sentence .eip-audio-btn,
.eip-sentence .eip-bm-btn,
.eip-sentence .eip-bm-count,
.eip-sentence .eip-like-btn,
.eip-sentence .eip-like-count{
  order: 2;
}

/* Normalize action buttons to stop baseline wobble */
.eip-sentence .eip-bm-btn,
.eip-sentence .eip-like-btn{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 0;
  background: #111;
  color: #fff;
  cursor: pointer;
}

/* Counts: fixed min width so numbers don’t “jump” */
.eip-sentence .eip-bm-count,
.eip-sentence .eip-like-count{
  display: inline-block;
  min-width: 1.6ch;
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Row 3: level pill + chips inline; put a gap above Row 3 */
.eip-sentence .eip-level,
.eip-sentence .eip-chips{ margin-top: .5rem; }

.eip-sentence .eip-chips{
  order: 3;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0;
}

/* a11y focus-visible preserved */
.eip-sentence .eip-audio-btn:focus-visible,
.eip-sentence .eip-bm-btn:focus-visible,
.eip-sentence .eip-like-btn:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* small screens: slightly smaller action boxes to avoid crowding */
@media (max-width: 480px){
  .eip-sentence .eip-audio-btn,
  .eip-sentence .eip-bm-btn,
  .eip-sentence .eip-like-btn{
    width: 32px;
    height: 32px;
  }
}

/* Add vertical gap between sentence blocks */
.eip-sentence{
  margin: 1.5rem 0;         /* more breathing space top & bottom */
  padding: 8px 10px 12px; /* a bit more padding inside */
  border-radius: 6px;     /* optional: rounded card look */
  background: #fffbea;    /* optional: light background for clarity */
  box-shadow: 0 1px 3px rgba(0,0,0,.06); /* subtle separation */
}

/* === Row forcing tweak: 1) Sentence  2) Audio+Level+Chips  3) Bookmark/Like === */

/* Row 1 — Sentence only (full width, clean wrap) */
.eip-sentence .eip-text,
.eip-sentence .txt{
  order: 1 !important;
  flex-basis: 100%;
  min-width: 0;
  margin: 0 0 .6rem 0;   /* space before Row 2 */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Row 2 — Audio + Level + Chips aligned inline */
.eip-sentence .eip-audio-btn,
.eip-sentence .eip-level,
.eip-sentence .eip-chips{
  order: 2 !important;
}

/* Keep chips inline and wrap nicely */
.eip-sentence .eip-chips{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;             /* no extra top margin; Row 1 already added spacing */
}

/* Small spacing between audio and level */
.eip-sentence .eip-audio-btn{ margin-right: .5rem; }

/* Row 3 — Bookmark + count + Like + count */
.eip-sentence .eip-bm-btn,
.eip-sentence .eip-bm-count,
.eip-sentence .eip-like-btn,
.eip-sentence .eip-like-count{
  order: 3 !important;
}

/* Add gap above Row 3 */
.eip-sentence .eip-bm-btn,
.eip-sentence .eip-bm-count,
.eip-sentence .eip-like-btn,
.eip-sentence .eip-like-count{
  margin-top: .6rem;
}

/* Keep buttons consistent and counts stable (if not already set elsewhere) */
.eip-sentence .eip-audio-btn,
.eip-sentence .eip-bm-btn,
.eip-sentence .eip-like-btn{
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex; justify-content: center; align-items: center;
  border: 0; cursor: pointer;
}

.eip-sentence .eip-bm-count,
.eip-sentence .eip-like-count{
  display: inline-block;
  min-width: 1.6ch;
  text-align: center;
  line-height: 1.2;
  font-size: 14px;
}

/* === Force bookmark + like row to always be 3rd line === */

/* Sentence text row (Row 1) */
.eip-sentence .eip-text,
.eip-sentence .txt {
  order: 1 !important;
  flex-basis: 100%;
  margin: 0 0 .6rem 0;   /* space before next row */
}

/* Row 2: audio + level + chips */
.eip-sentence .eip-audio-btn,
.eip-sentence .eip-level,
.eip-sentence .eip-chips {
  order: 2 !important;
}

/* Row 3: bookmark + like + counts — force to new line */
.eip-sentence .eip-bm-btn,
.eip-sentence .eip-bm-count,
.eip-sentence .eip-like-btn,
.eip-sentence .eip-like-count {
  order: 3 !important;
  flex-basis: 100%;      /* full-width row */
  margin-top: .6rem;     /* gap above Row 3 */
  display: inline-flex;  /* they still align horizontally */
  align-items: center;
  gap: .5rem;
}

/* Force Row 3: bookmark + like */
.eip-sentence .eip-bm-btn,
.eip-sentence .eip-like-btn,
.eip-sentence .eip-bm-count,
.eip-sentence .eip-like-count {
  order: 3 !important;    /* all grouped as row 3 */
  margin-top: .5rem;
}

/* === Force exact 3 rows on .eip-sentence (based on your actual DOM) === */
/* Ensure the container wraps */
.eip-sentence{ display:flex; flex-wrap:wrap; }

/* Row 1 — Sentence text ONLY (full width) */
.eip-sentence .txt,
.eip-sentence .eip-text{
  order: 1 !important;
  flex-basis: 100% !important;
  min-width: 0;
  margin: 0 0 .6rem 0; /* gap before Row 2 */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Row 2 — Audio + Level + Chips inline */
.eip-sentence .eip-audio-btn,
.eip-sentence .eip-level,
.eip-sentence .eip-chips{
  order: 2 !important;
}
.eip-sentence .eip-chips{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0; /* Row 1 already added spacing */
}

/* Row 3 — Bookmark group + Like group (move the WRAPPERS) */
.eip-sentence .eip-bm-ui,
.eip-sentence .eip-like-ui{
  order: 3 !important;
  float: none !important;         /* neutralize any theme floats */
  position: static !important;    /* neutralize any absolute pos */
}

/* Start Row 3 on a new line by breaking before the first group */
/* Row 3 wrappers must be compact; no full-width pill */
.eip-sentence .eip-bm-ui{
  flex-basis: auto !important;   /* was 100% — remove the “long bar” */
  margin-top: .6rem;
}


/* (Optional) keep the groups tidy inline on Row 3 */
.eip-sentence .eip-bm-ui,
.eip-sentence .eip-like-ui{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.entry-content .eip-sentence .eip-bm-ui{ /* same rules */ }
.entry-content .eip-sentence .eip-like-ui{ /* same rules */ }

/* === EIP 3-row layout (explicit rows; contract-safe) === */

/* Row containers */
.eip-sentence .eip-row-1{ display:block; margin: 0 0 .6rem 0; }
.eip-sentence .eip-row-2{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.eip-sentence .eip-row-3{ display:flex; align-items:center; gap:8px; margin-top:.6rem; flex-wrap:wrap; }

/* Keep sentence text clean */
.eip-sentence .eip-row-1 .txt,
.eip-sentence .eip-row-1 .eip-text{
  display:inline;
  white-space:normal;
  overflow-wrap:anywhere;
}

/* Actions (Row 2) */
.eip-sentence .eip-row-2 .eip-audio-btn{ margin-right:.25rem; }
.eip-sentence .eip-row-2 .eip-chips{ display:inline-flex; gap:6px; flex-wrap:wrap; }

/* Reactions (Row 3) — compact, aligned */
.eip-sentence .eip-row-3 .eip-bm-ui,
.eip-sentence .eip-row-3 .eip-like-ui{
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; box-shadow:none; border:0;
}

/* Equal button boxes; stable counts */
.eip-sentence .eip-bm-btn,
.eip-sentence .eip-like-btn{
  width:34px; height:34px; border-radius:50%;
  display:inline-flex; justify-content:center; align-items:center; border:0; cursor:pointer;
}
.eip-sentence .eip-bm-count,
.eip-sentence .eip-like-count{
  min-width:1.6ch; text-align:center; line-height:1.2; font-size:14px;
}

/* Focus ring on buttons only (not wrappers) */
.eip-sentence .eip-bm-btn:focus-visible,
.eip-sentence .eip-like-btn:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }

/* === Force each row to its own line === */
.eip-sentence { display:flex; flex-wrap:wrap; }

/* Rows occupy full width, in order */
.eip-sentence > .eip-row-1,
.eip-sentence > .eip-row-2,
.eip-sentence > .eip-row-3{
  flex-basis: 100%;
}

/* Row 1: sentence only */
.eip-sentence > .eip-row-1{ order:1; margin: 0 0 .6rem 0; }

/* Row 2: audio + level + chips (inline) */
.eip-sentence > .eip-row-2{
  order:2;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}

/* Row 3: bookmark group + like group (inline, always below row 2) */
.eip-sentence > .eip-row-3{
  order:3;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:.6rem;
}

/* === Force three stacked rows (contract-safe) === */
.eip-sentence{ display:flex; flex-wrap:wrap; }

/* each row takes a full line */
.eip-sentence > .eip-row-1,
.eip-sentence > .eip-row-2,
.eip-sentence > .eip-row-3{ flex-basis:100%; }

.eip-sentence > .eip-row-1{ margin:0 0 .6rem 0; }
.eip-sentence > .eip-row-2{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.eip-sentence > .eip-row-3{ display:flex; align-items:center; gap:12px; margin-top:.6rem; flex-wrap:wrap; }
/* Ensure consistent inline size/baseline for action buttons in Row-3 */
.eip-sentence .eip-row-3 > *{
  min-height:34px;       /* matches icon button size below */
  line-height:1;         /* avoid text-line baseline drift */
  margin:0;              /* neutralize theme margins */
}


/* keep Row-2 chips inline and wrapping */
.eip-sentence > .eip-row-2 .eip-chips{ display:inline-flex; gap:6px; flex-wrap:wrap; }

/* bookmark/like inline, compact */
.eip-row-3 .eip-bm-ui,
.eip-row-3 .eip-like-ui{ display:inline-flex; align-items:center; gap:.5rem; }

/* fix elongated hover: constrain the actual buttons */
.eip-row-3 .eip-bm-btn,
.eip-row-3 .eip-like-btn{
  width:34px; height:34px; padding:0;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
}

/* === Keep Row-3 groups on ONE line (desktop), allow wrap on small screens === */
.eip-sentence > .eip-row-3{
  display: flex;
  align-items: center;
  gap: 6px;           /* tighten if needed: 8px or 6px */
  flex-wrap: nowrap;   /* <- prevents like from dropping to next line */
  margin-top: .6rem;
}

/* Make each group size to content and not grow or shrink */
.eip-sentence .eip-row-3 .eip-bm-ui,
.eip-sentence .eip-row-3 .eip-like-ui{
  flex: 0 0 auto;      /* don't stretch, don't shrink */
  display: inline-flex;
  align-items: center;
  gap: .45rem;         /* micro gap inside each group */
  margin: 0;           /* kill stray margins that eat width */
}

/* Buttons and counts: compact but readable */
.eip-sentence .eip-bm-btn,
.eip-sentence .eip-like-btn{
  width: 32px;
  height: 32px;
}
.eip-sentence .eip-bm-count,
.eip-sentence .eip-like-count{
  min-width: 1.4ch;    /* a touch tighter than 1.6ch to save space */
  font-size: 13.5px;
  line-height: 1.2;
}

/* If your theme adds margins to spans/buttons, neutralize them here */
.eip-sentence .eip-row-3 span,
.eip-sentence .eip-row-3 button{
  margin: 0;
}

/* On small screens, allow Row-3 to wrap naturally */
@media (max-width: 560px){
  .eip-sentence > .eip-row-3{
    flex-wrap: wrap;   /* okay to wrap under narrow widths */
    gap: 8px;
  }
}

/* === HARD LOCK: keep bookmark + like on the SAME line (Row 3) === */
.eip-sentence > .eip-row-3{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:nowrap !important;   /* no wrapping on desktop */
  white-space:nowrap !important; /* prevent line breaks */
  width:100%;
}

.eip-sentence .eip-row-3 .eip-bm-ui,
.eip-sentence .eip-row-3 .eip-like-ui{
  display:inline-flex !important;
  align-items:center !important;
  gap:.45rem !important;
  flex:0 0 auto !important;      /* don't grow/shrink */
  width:auto !important;
  max-width:none !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  float:none !important;
  position:static !important;
  overflow:visible !important;
}

/* prevent hidden spans or pseudo-elements from reserving width */
.eip-sentence .eip-row-3 .eip-bm-ui::before,
.eip-sentence .eip-row-3 .eip-bm-ui::after,
.eip-sentence .eip-row-3 .eip-like-ui::before,
.eip-sentence .eip-row-3 .eip-like-ui::after{
  content:none !important;
}

/* compact controls so both fit comfortably */
.eip-sentence .eip-row-3 .eip-bm-btn,
.eip-sentence .eip-row-3 .eip-like-btn{
  width:32px !important; height:32px !important; padding:0 !important;
  border-radius:50% !important;
  display:inline-flex !important; justify-content:center !important; align-items:center !important;
  margin:0 !important;
}
.eip-sentence .eip-row-3 .eip-bm-count,
.eip-sentence .eip-row-3 .eip-like-count{
  min-width:1.4ch !important; font-size:13.5px !important; line-height:1.2 !important;
  margin:0 !important;
}

/* Allow wrap on very small screens only */
@media (max-width: 560px){
  .eip-sentence > .eip-row-3{ flex-wrap:wrap !important; white-space:normal !important; }
}

/* === Row-3 one-line lock & neutralize old break === */
.eip-sentence > .eip-row-3{
  display:flex !important;
  align-items:center !important;
  gap:4px !important;
  flex-wrap:nowrap !important;   /* keep both groups on same line */
}

.eip-sentence .eip-row-3 .eip-bm-ui,
.eip-sentence .eip-row-3 .eip-like-ui{
  display:inline-flex !important;
  align-items:center !important;
  gap:.45rem !important;
  flex:0 0 auto !important;      /* no grow/shrink */
  width:auto !important;
}

/* critical: undo the old “full-width bookmark button” */
.eip-sentence .eip-row-3 .eip-bm-btn{
  flex-basis:auto !important;
  flex:0 0 auto !important;
}

/* keep the like button compact too */
.eip-sentence .eip-row-3 .eip-like-btn{
  flex:0 0 auto !important;
}

/* small comfort on button size & counts */
.eip-sentence .eip-row-3 .eip-bm-btn,
.eip-sentence .eip-row-3 .eip-like-btn{
  width:32px; height:32px; padding:0;
}
.eip-sentence .eip-row-3 .eip-bm-count,
.eip-sentence .eip-row-3 .eip-like-count{
  min-width:1.4ch; font-size:13.5px; line-height:1.2;
}

/* ===== Row-3: clean Twitter/Reddit-style reaction bar ===== */

/* 1) Row-3 container: one line (desktop), neat spacing */
.eip-sentence > .eip-row-3{
  display: flex;
  align-items: center;
  gap: 12px;                 /* adjust 10–14px to taste */
  flex-wrap: nowrap;         /* keep on one line on desktop */
  margin-top: .6rem;
}

/* Allow wrap only on very narrow screens */
@media (max-width: 520px){
  .eip-sentence > .eip-row-3{ flex-wrap: wrap; }
}

/* 2) Each reaction group: icon + count, compact & baseline aligned */
.eip-sentence .eip-row-3 .eip-bm-ui,
.eip-sentence .eip-row-3 .eip-like-ui{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;            /* don’t grow/shrink */
  margin: 0; padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  position: static;
}

/* 3) Icon buttons: consistent hit area, subtle hover */
.eip-sentence .eip-row-3 .eip-bm-btn,
.eip-sentence .eip-row-3 .eip-like-btn{
  width: 30px;               /* 28–32px works well */
  height: 30px;
  border-radius: 50%;
  display: inline-flex; justify-content: center; align-items: center;
  border: 0;
  background: transparent;   /* no filled pills */
  color: #64748b;            /* slate-500 style neutral */
  padding: 0;
  margin: 0;
  transition: background-color 120ms ease, color 120ms ease, transform 80ms ease;
}
.eip-sentence .eip-row-3 .eip-bm-btn:hover,
.eip-sentence .eip-row-3 .eip-like-btn:hover{
  background-color: rgba(100,116,139,.12);  /* soft hover tint */
}
.eip-sentence .eip-row-3 .eip-bm-btn:active,
.eip-sentence .eip-row-3 .eip-like-btn:active{
  transform: translateY(0.5px);
}

/* Selected state (if you toggle aria-pressed=true later) */
.eip-sentence .eip-row-3 .eip-bm-btn[aria-pressed="true"],
.eip-sentence .eip-row-3 .eip-like-btn[aria-pressed="true"]{
  color: #0ea5e9;            /* cyan-500-ish; tweak if you like */
}

/* 4) Counts: stable width, same baseline as icons */
.eip-sentence .eip-row-3 .eip-bm-count,
.eip-sentence .eip-row-3 .eip-like-count{
  display: inline-block;
  min-width: 2ch;            /* keeps “1” and “28” aligned */
  text-align: left;
  font-size: 13.5px;
  line-height: 1;            /* aligns with icon center */
  color: #64748b;
  margin: 0;
  vertical-align: middle;
}

/* 5) Kill any stray styling that created the “long yellow pill” */
.eip-sentence .eip-row-3 .eip-bm-ui::before,
.eip-sentence .eip-row-3 .eip-bm-ui::after,
.eip-sentence .eip-row-3 .eip-like-ui::before,
.eip-sentence .eip-row-3 .eip-like-ui::after{
  content: none !important;
}
.eip-sentence .eip-row-3 .eip-bm-ui:hover,
.eip-sentence .eip-row-3 .eip-like-ui:hover{
  background: transparent;
  box-shadow: none;
}

/* 6) A11y: focus ring on the actual buttons, not wrappers */
.eip-sentence .eip-row-3 .eip-bm-btn:focus-visible,
.eip-sentence .eip-row-3 .eip-like-btn:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* EIP: sentence hover marker swipe (green, thicker) */
.eip-sentence .txt{
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;

  /* light green */
  background-image: linear-gradient(
    to right,
    rgba(233,255,50, 0.75),
    rgba(194,255,116, 0.75)
  );
  background-repeat: no-repeat;

  /* thickness = the SECOND value ↓ (height) */
  background-size: 0% 100%;     /* was 60% → thicker */
  background-position: 0 75%;  /* vertical placement; try 70–85% */

  transition: background-size 360ms ease;
}

.eip-sentence:hover .txt,
.eip-sentence:focus-within .txt,
.eip-sentence .txt:focus-visible{
  /* sweep to full width, same thickness */
  background-size: 100% 100%;
  /* optional: a bit stronger on hover */
  background-image: linear-gradient(
    to right,
    rgba(194,255,116, 0.75),
    rgba(233,255,50, 0.75)
  );
}

@media (prefers-reduced-motion: reduce){
  .eip-sentence .txt{ transition: none; }
}


/* Sentence row hover/focus outline (contract-safe) */
.eip-sentence{
  position: relative;                 /* anchor */
  border-radius: 10px;                /* rounded block */
  outline: 2px solid transparent;     /* base ring (hidden) */
  outline-offset: 4px;                /* space between text and ring */
  transition:
    outline-color 180ms ease,
    outline-offset 180ms ease,
    box-shadow 220ms ease,
    background-color 160ms ease;
}

/* Hover and keyboard focus highlight */
.eip-sentence:hover,
.eip-sentence:focus-within{
  outline-color: rgba(0, 204, 255, 0.7);     /* light green ring */
  outline-offset: 2px;                        /* pull ring closer */
  box-shadow: 0 4px 18px rgba(0, 204, 255, 0.3); /* soft glow */
  background-color: rgba(0, 204, 255, 0.06);  /* subtle fill */
}

/* Keep deep-link highlight compatible: make .eip-hl pop a bit more */
.eip-sentence.eip-hl{
  outline-color: rgba(0, 204, 255, 0.9);
  box-shadow: 0 6px 22px rgba(0, 204, 255, 0.25);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .eip-sentence{ transition: none; }
}

/* === 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 */
  }
}

/* === EIP: Bookmark circular hover patch (contract-safe) === */
.eip-sentences .eip-microactions .eip-bm-btn,
.eip-sentences [data-eip-bar] .eip-bm-btn{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* choose one size you like */
  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%;
  background: transparent;
  padding: 0;
  line-height: 1;
  overflow: visible; /* avoid clipping the patch */
  color: var(--eip-ma-fg, #374151);
}

/* make sure the icon sits above the patch */
.eip-sentences .eip-microactions .eip-bm-btn::before,
.eip-sentences [data-eip-bar] .eip-bm-btn::before,
.eip-sentences .eip-microactions .eip-bm-btn > *,
.eip-sentences [data-eip-bar] .eip-bm-btn > *{
  position: relative;
  z-index: 1;
}

/* the circular hover 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;
  pointer-events: none;
  transform: scale(.9);
  opacity: 0;
  transition: opacity .14s ease, transform .14s ease;
  background: color-mix(in srgb, currentColor 24%, transparent);
}

/* 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);
}

/* bookmarked (active) — warmer tint */
.eip-sentences .eip-microactions .eip-bm-btn[aria-pressed="true"]::after,
.eip-sentences [data-eip-bar] .eip-bm-btn[aria-pressed="true"]::after{
  background: color-mix(in srgb, var(--eip-bm-active, #f59e0b) 25%, transparent);
}

/* fallback if color-mix() isn't supported */
@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); }
  .eip-sentences .eip-microactions .eip-bm-btn[aria-pressed="true"]::after,
  .eip-sentences [data-eip-bar] .eip-bm-btn[aria-pressed="true"]::after{ background: rgba(245,158,11,.20); }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .eip-sentences .eip-microactions .eip-bm-btn::after,
  .eip-sentences [data-eip-bar] .eip-bm-btn::after{ transition: none; transform: none; }
}

/* Editor-only: Audio map UI layout */
.eip-audio-map{
  display:flex;
  gap:.5rem;
  align-items:center;
  margin-top:.25rem;
  flex-wrap:wrap;
}

/* === Row-3 alignment: audio + micro-actions bar on one line === */
li[data-sid].eip-sentence{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Row ordering */
.eip-sentence .txt{ order:1; flex-basis:100%; margin:0 0 .6rem 0; }
.eip-sentence .eip-row-2{ order:2; display:inline-flex; gap:.5rem; align-items:center; flex-wrap:wrap; }

/* Row-3 (our new block with the audio button) */
.eip-sentence .eip-row-3{
  order:3;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .6rem;
}

/* Micro-actions bar node appended by the plugin (keep in same row as Row-3) */
.eip-sentence [data-eip-bar]{
  order:3;                                /* same row as Row-3 */
  display: inline-flex;
  align-items: center;
  gap: .22rem;                             /* icon↔count; plugin may fine-tune */
  margin-top: .6rem;
}

/* Optional spacer after audio */
.eip-sentence .eip-ma-spacer{
  display:inline-block;
  width: .6rem;
  height: 1px;
}

/* Stack on very narrow screens if needed */
@media (max-width: 520px){
  .eip-sentence .eip-row-3,
  .eip-sentence [data-eip-bar]{ flex-wrap: wrap; }
}

/* Keep audio hidden on archives (requirement) */
body:not(.single-post) .eip-sentence .eip-audio-btn{ display:none !important; }