/* Pronunciation Practice Modal — shared across Liaison Lab, Entry detail,
   Review results, and Dictation results. Open via window.openPronunciationPractice(opts). */

.pp-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0.65);
  display:none;align-items:center;justify-content:center;z-index:1080;padding:1rem;
}
.pp-backdrop.show{display:flex;}

.pp-card{
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:1.4rem 1.5rem;max-width:680px;width:100%;
  max-height:90vh;overflow-y:auto;
  box-shadow:0 12px 36px rgba(0,0,0,0.45);
}
.pp-card h3{
  font-size:1.1rem;margin:0 0 .9rem 0;color:var(--helix-blue);
  display:flex;align-items:center;gap:.4rem;
}
.pp-card h3 .pp-close{
  margin-left:auto;background:transparent;border:none;color:var(--text-muted);
  font-size:1.4rem;line-height:1;cursor:pointer;padding:0 4px;
}
.pp-card h3 .pp-close:hover{color:var(--text);}

.pp-target{
  padding:.9rem 1rem;background:rgba(43,107,242,0.08);
  border-left:3px solid var(--helix-blue);border-radius:6px;
  margin-bottom:.8rem;font-size:1.05rem;line-height:1.5;color:var(--text);
}

.pp-ssd{margin-bottom:1rem;}

.pp-tts-row{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  margin-bottom:.8rem;padding:.5rem .6rem;background:rgba(0,0,0,0.18);border-radius:8px;
}
.pp-tts-row audio{height:30px;max-width:240px;flex:1;min-width:160px;}
.pp-tts-row button{font-size:.82rem;}

.pp-rec-row{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.6rem;
}
.pp-rec-btn{
  font-size:.95rem;padding:.5rem 1.2rem;
}
.pp-rec-btn.recording{
  background:var(--coral, #f25c54);color:#fff;border-color:var(--coral, #f25c54);
  animation:pp-pulse 1.4s ease-in-out infinite;
}
@keyframes pp-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(242,92,84,0.5);}
  50%{box-shadow:0 0 0 10px rgba(242,92,84,0);}
}
.pp-mic-level{
  flex:1;min-width:120px;max-width:300px;height:8px;
  background:rgba(0,0,0,0.3);border-radius:4px;overflow:hidden;
  display:none;
}
.pp-mic-level.show{display:block;}
.pp-mic-level-bar{
  height:100%;background:linear-gradient(90deg,var(--helix-teal),var(--helix-cyan));
  width:0%;transition:width .1s linear;
}
.pp-status{font-size:.85rem;color:var(--text-muted);}

.pp-result{
  margin-top:1rem;padding:.9rem 1rem;background:rgba(0,0,0,0.22);
  border-radius:8px;font-size:.92rem;line-height:1.5;display:none;
}
.pp-result.show{display:block;}
.pp-result .pp-score-row{
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:.5rem;
}
.pp-result .pp-grade{font-size:2rem;line-height:1;font-weight:700;}
.pp-result .pp-grade.good{color:var(--helix-teal);}
.pp-result .pp-grade.fair{color:#f0b429;}
.pp-result .pp-grade.poor{color:var(--coral, #f25c54);}
.pp-result .pp-score-num{font-size:1.5rem;font-weight:700;color:var(--text);}
.pp-result .pp-score-sub{font-size:.78rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace;}
.pp-result .pp-recognized{font-style:italic;color:var(--text-muted);margin:.3rem 0;}
.pp-result .pp-feedback{margin:.4rem 0;}

.pp-phonemes{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.5rem;}
.pp-ph-badge{
  display:inline-block;padding:2px 8px;border-radius:10px;
  font-family:'JetBrains Mono',monospace;font-size:.78rem;
  border:1px solid var(--border);
}
.pp-ph-badge.good{background:rgba(76,201,176,0.15);color:var(--helix-teal);border-color:rgba(76,201,176,0.4);}
.pp-ph-badge.fair{background:rgba(240,180,40,0.15);color:#f0b429;border-color:rgba(240,180,40,0.4);}
.pp-ph-badge.poor{background:rgba(242,92,84,0.15);color:var(--coral, #f25c54);border-color:rgba(242,92,84,0.4);}

.pp-err{color:var(--coral, #f25c54);background:rgba(242,92,84,0.1);padding:8px 12px;border-radius:6px;font-size:.85rem;}

/* Inline 🎤 button used at call sites (Liaison Lab, Entry detail, etc.) */
.pp-launch-btn{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:3px 10px;font-size:.78rem;
  background:transparent;color:var(--helix-blue);
  border:1px solid var(--helix-blue);border-radius:14px;
  cursor:pointer;transition:all .15s;line-height:1.4;
}
.pp-launch-btn:hover{background:rgba(43,107,242,0.15);}
.pp-launch-btn i{font-size:.85em;}