/* Mock test — read-aloud + voice answering bar (exam-voice.js). [2026-09-15]
   Sits under .question-header inside .question-panel on exam-challenge.html; borrows the
   page's own tokens (--primary, --border, --text-*) so it reads as part of the panel. */
.ev-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: -8px 0 20px; }
.ev-btn {
  font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; cursor: pointer;
  border: 1px solid var(--border, #ded6c8); border-radius: 999px; background: #fff; color: var(--text-secondary, #475569);
  transition: background .15s, border-color .15s, color .15s;
}
.ev-btn:hover { border-color: #cbbfae; background: #fffaf3; color: var(--text-primary, #0f172a); }
.ev-btn:focus-visible { outline: 3px solid var(--primary, #ea580c); outline-offset: 2px; }
.ev-btn.ev-on { background: var(--primary, #ea580c); border-color: var(--primary, #ea580c); color: #fff; }
.ev-btn.ev-live { background: #fee2e2; border-color: #ef4444; color: #991b1b; animation: evPulse 1.2s ease-in-out infinite; }
@keyframes evPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .35); } 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); } }
.ev-status { font-size: 13px; color: var(--text-secondary, #475569); flex: 1 1 12rem; min-width: 0; }
.ev-status:empty { display: none; }

.ev-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: -8px 0 20px; padding: 12px 14px; border: 1px dashed var(--border, #ded6c8); border-radius: 14px; background: rgba(255, 250, 243, .7); }
.ev-seg { display: inline-flex; align-items: center; gap: 0.25rem; }
.ev-seg-lbl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary, #94a3b8); margin-right: .25rem; }
.ev-seg button {
  font: inherit; font-size: 12px; font-weight: 700; padding: 4px 10px; cursor: pointer;
  border: 1px solid #e2e8f0; border-radius: 999px; background: #fff; color: #475569;
}
.ev-seg button:hover { border-color: #cbd5e1; background: #f8fafc; }
.ev-seg button.ev-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.ev-voice { width: 100%; font-size: 12px; color: var(--text-tertiary, #94a3b8); }
.ev-voice:empty { display: none; }
.ev-help { width: 100%; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary, #475569); }
.ev-help kbd { font: inherit; font-size: 11px; font-weight: 700; padding: 0 5px; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 5px; background: #fff; }

/* First-visit question: a real dialog, above the shell (its chrome tops out at 9200). */
.ev-prompt { position: fixed; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15, 23, 42, .55); backdrop-filter: blur(3px); }
.ev-dialog { width: min(100%, 34rem); background: #fff; border-radius: 22px; padding: 28px 28px 22px; box-shadow: 0 30px 80px rgba(15, 23, 42, .35); text-align: center; }
.ev-pico { font-size: 40px; line-height: 1; margin-bottom: 10px; }
.ev-dialog h2 { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; margin: 0 0 10px; color: var(--text-primary, #0f172a); }
.ev-dialog p { font-size: 15px; line-height: 1.65; color: var(--text-secondary, #475569); margin: 0 0 18px; }
.ev-dialog kbd { font: inherit; font-size: 12px; font-weight: 700; padding: 0 6px; border: 1px solid #cbd5e1; border-bottom-width: 2px; border-radius: 5px; background: #f8fafc; }
.ev-pbtns { display: flex; flex-direction: column; gap: 10px; }
.ev-pbtns button { font: inherit; font-size: 15px; font-weight: 700; padding: 14px 18px; border-radius: 14px; cursor: pointer; border: 1px solid var(--border, #ded6c8); background: #fff; color: var(--text-primary, #0f172a); }
.ev-pbtns .ev-yes { background: var(--primary, #ea580c); border-color: var(--primary, #ea580c); color: #fff; }
.ev-pbtns button:focus-visible { outline: 3px solid #0f172a; outline-offset: 3px; }
.ev-pnote { font-size: 12.5px !important; color: var(--text-tertiary, #94a3b8) !important; margin: 14px 0 0 !important; }

@media (max-width: 640px) {
  .ev-bar .ev-btn { flex: 1 1 auto; text-align: center; }
  .ev-settings { gap: .5rem .75rem; }
}