/* Narration buttons: a small round play button with the clip length, sitting inline in the text */
button.narrate {
  display: inline-flex; align-items: center; gap: 4px; vertical-align: middle;
  min-width: 44px; min-height: 32px; padding: 2px 9px 2px 4px; margin: 0 6px 2px 0;
  border: 1.5px solid var(--accent, #4f46e5); border-radius: 999px;
  background: var(--panel, #fff); color: var(--accent, #4f46e5);
  font: 600 13px/1 system-ui, sans-serif; cursor: pointer;
}
button.narrate:hover { background: var(--panel2, #eef2ff); }
button.narrate:focus-visible { outline: 3px solid var(--accent, #4f46e5); outline-offset: 2px; }
button.narrate .nr-icon {
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent, #4f46e5); position: relative; flex: none;
}
button.narrate .nr-icon::after {           /* play triangle */
  content: ""; position: absolute; left: 9px; top: 6px;
  border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--panel, #fff);
}
button.narrate.nr-playing .nr-icon::after {  /* pause bars */
  left: 7px; top: 7px; width: 3px; height: 10px; border: 0; background: var(--panel, #fff);
  box-shadow: 6px 0 0 var(--panel, #fff);
}
button.narrate.nr-playing { animation: nr-pulse 1.2s ease-in-out infinite; }
@keyframes nr-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #4f46e5) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { button.narrate.nr-playing { animation: none; } }
@media print { button.narrate { display: none; } }

/* Listen mode */
.nr-listen-start {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 6px 0 14px; padding: 8px 16px;
  border-radius: 999px; border: 2px solid var(--accent, #4f46e5); background: var(--panel, #fff);
  color: var(--accent, #4f46e5); font: 600 16px/1.2 system-ui, sans-serif; cursor: pointer;
}
.nr-listen-start:hover { background: var(--panel2, #eef2ff); }
.nr-listen-bar {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: calc(100vw - 24px); box-sizing: border-box;
  padding: 8px 12px; border-radius: 14px; background: var(--panel, #fff); color: var(--ink, #111);
  border: 2px solid var(--accent, #4f46e5); box-shadow: 0 6px 24px rgba(0, 0, 0, .25); font: 15px/1.3 system-ui, sans-serif;
}
.nr-listen-bar .nr-l-text { font-weight: 600; min-width: 0; flex: 1 1 140px; }
.nr-listen-bar button { min-height: 40px; padding: 4px 12px; border-radius: 10px; border: 1.5px solid var(--accent, #4f46e5);
  background: var(--panel, #fff); color: var(--ink, #111); font: inherit; cursor: pointer; }
.nr-listen-bar .nr-l-pause { background: var(--accent, #4f46e5); color: #fff; }
.nr-here { outline: 3px solid var(--accent, #4f46e5); outline-offset: 4px; border-radius: 6px; }
html.nr-listening main { padding-bottom: 90px; }
@media print { .nr-listen-start, .nr-listen-bar { display: none; } }

/* Guard: a narrate button dropped straight into a grid or flex container must stay a small pill,
   not stretch to the height of the neighbouring simulation (seen on 2-7 friction). */
button.narrate { align-self: start; justify-self: start; height: auto; max-height: 3em; flex: 0 0 auto; }