/* Shared audio recorder + waveform player styles. */

/* Recorder (teacher, wp-admin) */
/* Reserve a stable footprint so pressing the button (which swaps the label and
   reveals a timer) never reflows the row around it. */
.ef-au-rec { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: nowrap; min-height: 40px; }
.ef-au-rec__btn {
  width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--accent, #733428);
  background: var(--surface, #fff); color: var(--accent, #733428); font-size: 17px; cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  /* press-and-hold: never let the hold select text or scroll the page */
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* the recording state stays red in both themes, so its label stays light
   (--on-deep) rather than following --on-fill, which darkens in dark mode.
   A slight grow reinforces that the button is being physically held down. */
.ef-au-rec__btn--recording { background: #b91c1c; border-color: #b91c1c; color: var(--on-deep, #fff); transform: scale(1.12); animation: ef-pulse 1s ease-in-out infinite; }
.ef-au-rec__btn--saving { opacity: .7; cursor: default; }
@keyframes ef-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(185,28,28,.4); } 50% { box-shadow: 0 0 0 6px rgba(185,28,28,0); } }
.ef-au-rec__label { font-size: 13px; color: var(--ink-2, #6b5b54); min-width: 190px; }
.ef-au-rec__timer { font-variant-numeric: tabular-nums; font-size: 13px; color: #b91c1c; min-width: 46px; display: inline-block; }
.ef-au-rec__actions { display: inline-flex; gap: .4rem; }
@media (prefers-reduced-motion: reduce) { .ef-au-rec__btn--recording { animation: none; } }

/* Compact recorder — same widget, smaller footprint, for tight spots like the
   pronunciation modal (as opposed to the Sons page's full-size one). */
.ef-au-rec--compact { min-height: 30px; gap: .4rem; }
.ef-au-rec--compact .ef-au-rec__btn { width: 30px; height: 30px; font-size: 13px; }
.ef-au-rec--compact .ef-au-rec__label { font-size: 12px; min-width: 0; }
.ef-au-rec--compact .ef-au-rec__timer { font-size: 12px; min-width: 32px; }
.ef-au-rec--compact .ef-au-rec__cog { width: 22px; height: 22px; font-size: 12px; }

/* ⚙ mic-settings launcher — deliberately quiet so it never competes with the
   record button, but always reachable next to any recorder. */
.ef-au-rec__cog {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line, #e0d4ce);
  background: transparent; color: var(--ink-2, #6b5b54); font-size: 14px; line-height: 1;
  cursor: pointer; opacity: .55; flex: none; display: inline-flex; align-items: center; justify-content: center;
}
.ef-au-rec__cog:hover { opacity: 1; }

/* Mic-settings popup */
.ef-mic {
  position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center;
  background: rgba(20, 12, 10, .5); padding: 1rem;
}
.ef-mic__box {
  background: var(--surface, #fff); color: var(--ink, #2b211d); border-radius: 14px;
  padding: 1.1rem 1.2rem 1rem; width: min(92vw, 400px); box-shadow: 0 18px 50px rgba(0,0,0,.28);
  font-size: 14px;
}
.ef-mic__h { margin: 0 0 .8rem; font-size: 17px; }
.ef-mic__row { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .8rem; }
.ef-mic__lbl { font-size: 12px; color: var(--ink-2, #6b5b54); }
.ef-mic__sel { padding: .45rem .5rem; border: 1px solid var(--line, #e0d4ce); border-radius: 8px; background: var(--surface, #fff); color: inherit; font-size: 14px; }
.ef-mic__meter { height: 12px; border-radius: 6px; background: var(--line, #ece2dd); overflow: hidden; margin-bottom: .4rem; }
.ef-mic__bar { height: 100%; width: 0; background: #2e9e5b; border-radius: 6px; transition: width .06s linear; }
.ef-mic__bar.is-hot { background: #e0a500; }
.ef-mic__bar.is-clip { background: #b91c1c; }
.ef-mic__hint { font-size: 12px; color: var(--ink-2, #6b5b54); min-height: 2.4em; margin-bottom: .7rem; }
.ef-mic__tog { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; cursor: pointer; }
.ef-mic__tog input { flex: none; }
.ef-mic__foot { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .9rem; }
.ef-mic__btn--save { background: var(--accent, #733428); color: var(--on-fill, #fff); border-color: var(--accent, #733428); }

/* Waveform player (student) */
.ef-au-play { display: inline-flex; align-items: center; gap: .5rem; }
.ef-au-play__btn {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--ef-primary, #733428); color: var(--on-fill, #fff); font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.ef-au-play__btn:hover { opacity: .92; }
.ef-au-play__wave { display: block; }