/* === REHEARSAL LOCK v2 — 2026-07-26 — CHMOD 444, DO NOT EDIT === */
/* Contract: every chapter includes ONLY this file for rehearsal UI. */

.speaker-parent-armed { outline: 2px dashed #7c3aed !important; outline-offset: 4px; background: rgba(124,58,237,.06) !important; border-radius: 4px; transition: outline 0.15s, background 0.15s }
.speaker-parent-hover { outline: 2px dotted #a78bfa !important; outline-offset: 3px }

/* Move (← →) + Remove (✕) buttons — visible when body has .reviewing class OR when cluster hovered */
.speaker-cluster .move-speaker-btn, .speaker-cluster .remove-speaker-btn { display: none; margin-left: 4px; width: 20px; height: 20px; border: 1px solid #cbd5e1; background: #fff; border-radius: 4px; cursor: pointer; font-size: 12px; align-items: center; justify-content: center; padding: 0; vertical-align: middle }
.speaker-cluster .move-speaker-btn { color: #6d28d9 }
.speaker-cluster .remove-speaker-btn { color: #dc2626; border-color: #fecaca; background: #fef2f2; border-radius: 50%; font-weight: 700; font-size: 11px }
body.reviewing .speaker-cluster.speaker-new .move-speaker-btn, body.reviewing .speaker-cluster .remove-speaker-btn,
.speaker-cluster.speaker-new:hover .move-speaker-btn, .speaker-cluster:hover .remove-speaker-btn,
.speaker-cluster.speaker-new:focus-within .move-speaker-btn, .speaker-cluster:focus-within .remove-speaker-btn { display: inline-flex }
.speaker-cluster .move-speaker-btn:hover { background: #6d28d9; color: #fff; border-color: #6d28d9 }
.speaker-cluster .remove-speaker-btn:hover { background: #dc2626; color: #fff; border-color: #dc2626 }

/* Newly-added, un-synthed speaker: 🔊 rendered RED. NO badge. NO bg change. */
.speaker-cluster.speaker-new .rehearsal-speaker {
  background: #dc2626 !important;
  color: #fff !important;
  border: 2px solid #991b1b !important;
  border-radius: 20px !important;
  padding: 3px 10px !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25), 0 2px 6px rgba(220, 38, 38, 0.35) !important;
  animation: speakerNewPulse 1.6s ease-in-out infinite !important;
  font-weight: 700 !important
}
.speaker-cluster.speaker-new .rehearsal-speaker:hover {
  background: #991b1b !important;
  animation: none !important
}
@keyframes speakerNewPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25), 0 2px 6px rgba(220, 38, 38, 0.35) }
  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0), 0 2px 6px rgba(220, 38, 38, 0.35) }
}

/* Toolbar red-🔊 glyph inside Add button */
.speaker-glyph-red { color: #dc2626; font-size: 1.05em; margin-left: 3px }

/* Sticky bar buttons — normalized */
.rehearsal-sticky button { border: 1px solid #cbd5e1; background: #fff; color: #1f2937; padding: 5px 11px; border-radius: 8px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; margin-left: 4px }
.rehearsal-sticky button:hover:not(:disabled) { background: #f5f3ff; border-color: #a78bfa }
.rehearsal-sticky button:disabled { opacity: 0.4; cursor: not-allowed }
.rehearsal-sticky button.active { background: #dbeafe; border-color: #0369a1; color: #0369a1 }

/* When Add-🔊 is armed, cursor becomes crosshair on hoverable blocks */
body.armed-add-speaker { cursor: crosshair }
body.armed-add-speaker p:hover, body.armed-add-speaker h1:hover, body.armed-add-speaker h2:hover, body.armed-add-speaker h3:hover, body.armed-add-speaker h4:hover, body.armed-add-speaker h5:hover, body.armed-add-speaker h6:hover, body.armed-add-speaker li:hover { outline: 2px dashed #dc2626; outline-offset: 3px; background: rgba(220,38,38,.04) }
/* === END === */

/* Multi-scope selection during Add-🔊 flow */
.speaker-scope-selected { outline: 3px dashed #ea580c !important; outline-offset: 4px; background: rgba(234, 88, 12, 0.05) !important; border-radius: 4px; position: relative }
.speaker-scope-selected::before { content: attr(data-scope-idx); position: absolute; top: -12px; left: -12px; width: 22px; height: 22px; background: #ea580c; color: #fff; font-size: 11px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 10 }
body.armed-add-speaker { cursor: crosshair }
body.armed-add-speaker::after { content: 'Shift+Click paragraphs to add to scope · plain click = drop speaker · Esc to cancel'; position: fixed; top: 12px; left: 50%; transform: translateX(-50%); background: #1e293b; color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-family: -apple-system, sans-serif; z-index: 10000; box-shadow: 0 4px 12px rgba(0,0,0,.25); pointer-events: none }
/* Scope paragraphs LOCKED to a placed speaker (persists after drop) */
.speaker-scope-placed { outline: 2px solid #ea580c !important; outline-offset: 3px; background: rgba(234, 88, 12, 0.03) !important; border-radius: 4px; position: relative }
.speaker-scope-placed::before { content: attr(data-scope-idx); position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; background: #ea580c; color: #fff; font-size: 10px; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 5; opacity: 0.85 }

/* Visual scope-separator — underline color matches the ancestor card's border-left color */

/* Default (falls back to green — matches §3 का हरा) */
html body p:has(.rehearsal-speaker[data-scope-count]),
html body li:has(.rehearsal-speaker[data-scope-count]),
html body h1:has(.rehearsal-speaker[data-scope-count]),
html body h2:has(.rehearsal-speaker[data-scope-count]),
html body h3:has(.rehearsal-speaker[data-scope-count]),
html body h4:has(.rehearsal-speaker[data-scope-count]),
html body h5:has(.rehearsal-speaker[data-scope-count]),
html body h6:has(.rehearsal-speaker[data-scope-count]),
html body blockquote:has(.rehearsal-speaker[data-scope-count]),
html body figcaption:has(.rehearsal-speaker[data-scope-count]) {
  border-bottom: 2px solid #22c55e !important;
  padding-bottom: 6px !important;
  margin-bottom: 8px !important;
}

/* Match §1 red card (#dc2626 / #7f1d1d) */
html body .card[style*="#dc2626"] p:has(.rehearsal-speaker[data-scope-count]),
html body .card[style*="#dc2626"] li:has(.rehearsal-speaker[data-scope-count]),
html body .card[style*="#7f1d1d"] p:has(.rehearsal-speaker[data-scope-count]),
html body .card[style*="#7f1d1d"] li:has(.rehearsal-speaker[data-scope-count]),
html body .card[style*="#ef4444"] p:has(.rehearsal-speaker[data-scope-count]),
html body .card[style*="#ef4444"] li:has(.rehearsal-speaker[data-scope-count]) {
  border-bottom-color: #dc2626 !important
}

/* Match §2 orange card (#f59e0b) */
html body .card[style*="#f59e0b"] p:has(.rehearsal-speaker[data-scope-count]),
html body .card[style*="#f59e0b"] li:has(.rehearsal-speaker[data-scope-count]) {
  border-bottom-color: #f59e0b !important
}

/* Match §3 green card (#22c55e) — already default */

/* Match §4 blue card (#3b82f6) */
html body .card[style*="#3b82f6"] p:has(.rehearsal-speaker[data-scope-count]),
html body .card[style*="#3b82f6"] li:has(.rehearsal-speaker[data-scope-count]),
html body .card[style*="#3b82f6"] blockquote:has(.rehearsal-speaker[data-scope-count]) {
  border-bottom-color: #3b82f6 !important
}

/* Purple card (#8b5cf6 / #7c3aed) fallback */
html body .card[style*="#8b5cf6"] p:has(.rehearsal-speaker[data-scope-count]),
html body .card[style*="#7c3aed"] p:has(.rehearsal-speaker[data-scope-count]),
html body .card[style*="#8b5cf6"] li:has(.rehearsal-speaker[data-scope-count]),
html body .card[style*="#7c3aed"] li:has(.rehearsal-speaker[data-scope-count]) {
  border-bottom-color: #8b5cf6 !important
}

/* Shift scoped-speaker cluster to the right */
html body .speaker-cluster:has(.rehearsal-speaker[data-scope-count]) { margin-left: 22px !important }

/* Hide legacy inline decoration badges (badge-x, badge-arrow) from earlier authoring passes.
   These were static chrome, not functional. Rehearsal buttons come from JS on .speaker-new only. */
html body .speaker-cluster .badge-x,
html body .speaker-cluster .badge-arrow,
html body .speaker-cluster .speaker-x,
html body .speaker-cluster .speaker-move,
html body .speaker-cluster .speaker-arrow {
  display: none !important;
}

/* === SOUND-BAR (frozen 2026-07-26) — identical across all chapters === */
.chapter-bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120px); z-index: 9998; display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: rgba(10,18,32,.96); backdrop-filter: blur(10px); border: 1px solid rgba(56,189,248,.4); border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.5); font-family: inherit; font-size: .78rem; color: #e2e8f0; max-width: min(720px, calc(100vw - 20px)); opacity: 0; pointer-events: none; transition: transform .28s cubic-bezier(.2,.9,.3,1.2), opacity .28s ease }
.chapter-bar.visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto }
.chapter-bar button { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; border: none; background: rgba(56,189,248,.18); color: #7dd3fc; font-size: .85rem; cursor: pointer }
.chapter-bar button:hover { background: #38bdf8; color: #0a1220 }
.chapter-bar .snippet { flex: 1; min-width: 0; font-size: .78rem; color: #a5f3fc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px }
.chapter-bar .progress-wrap { display: flex; flex-direction: column; gap: 3px; min-width: 130px }
.chapter-bar .progress-track { position: relative; height: 4px; width: 100%; background: rgba(56,189,248,.15); border-radius: 2px; cursor: pointer }
.chapter-bar .progress-fill { position: absolute; top: 0; left: 0; bottom: 0; background: #38bdf8; border-radius: 2px; width: 0%; transition: width .1s linear }
/* time + speed group */
.chapter-bar .time { font-size: .7rem; color: #7dd3fc; font-family: SFMono-Regular, Menlo, monospace; text-align: right }
.chapter-bar .speed-group { display: flex; align-items: center; gap: 6px; font-size: .7rem; color: #7dd3fc }
.chapter-bar .speed-group input[type=range] { width: 70px; accent-color: #38bdf8 }
.chapter-bar .speed-group .val { min-width: 34px; font-family: SFMono-Regular, Menlo, monospace; color: #a5f3fc }

/* Show ✕ Remove button ALWAYS on newly-added red speakers (frozen 2026-07-26) */
html body .speaker-cluster.speaker-new .remove-speaker-btn {
  display: inline-flex !important;
  width: 20px; height: 20px;
  margin-left: 4px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #dc2626;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  vertical-align: middle;
}
html body .speaker-cluster.speaker-new .remove-speaker-btn:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

/* Hover-show ✕ Remove on ALL speaker clusters, not just .speaker-new (2026-07-26) */
html body .speaker-cluster:hover .remove-speaker-btn,
html body .speaker-cluster:focus-within .remove-speaker-btn {
  display: inline-flex !important;
}
html body .speaker-cluster .remove-speaker-btn:not(.speaker-new *) {
  display: none;
  width: 20px; height: 20px;
  margin-left: 4px;
  border: 1px solid #fecaca;
  background: #fef2f2;
  color: #dc2626;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  vertical-align: middle;
}

/* ALWAYS-VISIBLE ✕ + ← → on every speaker cluster (locked 2026-07-26) */
html body .speaker-cluster .remove-speaker-btn,
html body .speaker-cluster .move-speaker-btn {
  display: inline-flex !important;
  width: 20px; height: 20px;
  margin-left: 3px;
  border-radius: 4px;
  border: 1px solid #cbd5e1;
  background: #fff;
  color: #6d28d9;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  vertical-align: middle;
  font-size: 12px;
  font-family: inherit;
}
html body .speaker-cluster .remove-speaker-btn {
  border-color: #fecaca;
  background: #fef2f2;
  color: #dc2626;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
html body .speaker-cluster .move-speaker-btn:hover {
  background: #6d28d9;
  color: #fff;
  border-color: #6d28d9;
}
html body .speaker-cluster .remove-speaker-btn:hover {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

/* ================ Rehearsal Ribbon (auto-injected 2026-08-02) ================ */
/* Top toolbar rendered by rehearsal-lock.js — chapters no longer hand-code Add/Copy-All/Play-All */
.rehearsal-ribbon {
  position: sticky; top: 0; z-index: 9998;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(90deg, #fff8ea, #fff0d0);
  border-bottom: 2px solid #b8860b;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 0.92em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.rehearsal-ribbon .ribbon-label {
  font-weight: 600; color: #7a5a0a; margin-right: 8px;
  padding: 2px 8px; background: rgba(184,134,11,0.15); border-radius: 4px;
}
.rehearsal-ribbon button {
  padding: 5px 12px; border-radius: 4px; border: 1px solid #b8860b;
  background: white; cursor: pointer; font-size: 0.92em;
  transition: background 0.15s ease;
}
.rehearsal-ribbon button:hover { background: #fff8ea; }
.rehearsal-ribbon button.active { background: #b8860b; color: white; }
.rehearsal-ribbon .ribbon-status {
  margin-left: auto; font-size: 0.85em; color: #666; font-style: italic;
}
.rehearsal-ribbon .speaker-glyph-red {
  display: inline-block; padding: 0 4px; background: #dc3545; color: white;
  border-radius: 3px; margin-left: 4px;
}
/* Hide ribbon in student mode */
html[data-rehearsal='off'] .rehearsal-ribbon,
html[data-rehearsal='off'] #rehearsalRibbon { display: none !important; }

/* Student-facing sticky bar with 3-scope Play-All. Always visible on student pages. */
.a11y-bar {
  position: fixed; left: 12px; bottom: 74px; z-index: 9997;
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 10px; background: linear-gradient(135deg, #1e40af, #1e3a8a);
  color: white; border-radius: 12px; box-shadow: 0 4px 16px rgba(30,64,175,0.4);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.92em; max-width: calc(100% - 24px);
}
.a11y-bar button {
  padding: 6px 12px; background: rgba(255,255,255,0.15); color: white;
  border: 1px solid rgba(255,255,255,0.35); border-radius: 8px;
  cursor: pointer; font-size: 0.92em; font-weight: 500;
  transition: background 0.15s, transform 0.1s;
}
.a11y-bar button:hover { background: rgba(255,255,255,0.28); transform: translateY(-1px); }
.a11y-bar button:active { transform: translateY(0); }
.a11y-bar button:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }
.a11y-bar .a11y-status {
  margin-left: 8px; padding: 2px 10px; background: rgba(0,0,0,0.25);
  border-radius: 6px; font-size: 0.85em; font-style: italic;
  min-width: 100px; text-align: center;
}
/* Currently-playing highlight */
.speaker-cluster.a11y-playing-now {
  background: rgba(251,191,36,0.35); border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(251,191,36,0.5); animation: a11yPulse 1.4s ease-in-out infinite;
}
@keyframes a11yPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(251,191,36,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(251,191,36,0.7); }
}
/* Mobile stack */
@media (max-width: 720px) {
  .a11y-bar { left: 6px; right: 6px; bottom: 6px; max-width: none; font-size: 0.82em; }
  .a11y-bar button { padding: 5px 8px; }
  .a11y-bar .a11y-status { min-width: auto; flex-basis: 100%; margin: 4px 0 0; }
}

/* ================ Accessibility (rev-3) — toggle button + hidden-until-active enhanced bar ================ */
/* Top-right toggle button — bold, always visible on student pages */
.a11y-toggle-btn {
  position: fixed;
  top: 12px; right: 12px;
  z-index: 10000;
  padding: 10px 18px;
  background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
  color: white;
  border: 2px solid #1e3a8a;
  border-radius: 24px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.98em;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(30,64,175,0.35);
  transition: all 0.2s ease;
  min-height: 44px;   /* WCAG target-size 44x44 */
  min-width: 44px;
}
.a11y-toggle-btn:hover {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(30,64,175,0.5);
}
.a11y-toggle-btn:focus-visible {
  outline: 4px solid #fbbf24;
  outline-offset: 3px;
}
.a11y-toggle-btn.active {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border-color: #047857;
  box-shadow: 0 4px 12px rgba(16,185,129,0.4);
}

/* Enhanced a11y bar — HIDDEN by default, revealed only when a11y toggle is ON */
.a11y-bar {
  display: none;   /* hidden until .a11y-visible added */
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 9998;
  flex-wrap: wrap;
  gap: 10px; align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  color: white;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(30,58,138,0.5);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.95em;
  border: 2px solid #1e3a8a;
}
.a11y-bar.a11y-visible { display: flex; }

.a11y-bar button {
  padding: 10px 16px;
  min-height: 44px;   /* WCAG */
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1.5px solid rgba(255,255,255,0.4);
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 500;
  transition: all 0.15s;
}
.a11y-bar button b { font-weight: 700; }
.a11y-bar button:hover { background: rgba(255,255,255,0.3); transform: translateY(-1px); }
.a11y-bar button:active { transform: translateY(0); }
.a11y-bar button:focus-visible { outline: 3px solid #fbbf24; outline-offset: 2px; }

.a11y-sep {
  display: inline-block;
  width: 2px;
  height: 28px;
  background: rgba(255,255,255,0.3);
  margin: 0 4px;
}

.a11y-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 200px;
  min-width: 180px;
}
.a11y-progress-track {
  height: 10px;
  background: rgba(0,0,0,0.3);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}
.a11y-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  border-radius: 5px;
  width: 0%;
  transition: width 0.2s;
}
.a11y-time {
  font-size: 0.82em;
  font-family: 'SF Mono', Menlo, monospace;
  color: rgba(255,255,255,0.85);
  text-align: right;
}

.a11y-speed-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
}
.a11y-speed-group input[type=range] {
  width: 90px;
  accent-color: #fbbf24;
}
.a11y-speed-val { min-width: 44px; font-family: 'SF Mono', Menlo, monospace; }

.a11y-status {
  margin-left: auto;
  padding: 4px 12px;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  font-size: 0.85em;
  font-style: italic;
  min-width: 100px;
  text-align: center;
}

/* Hide plain sound bar when a11y mode is on */
.chapter-bar.a11y-hidden-by-mode { display: none !important; }

/* Currently-playing highlight */
.speaker-cluster.a11y-playing-now {
  background: rgba(251,191,36,0.4);
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(251,191,36,0.6);
  animation: a11yPulse 1.4s ease-in-out infinite;
}
@keyframes a11yPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(251,191,36,0.6); }
  50% { box-shadow: 0 0 0 6px rgba(251,191,36,0.85); }
}

/* Mobile stack */
@media (max-width: 720px) {
  .a11y-toggle-btn { top: 6px; right: 6px; padding: 8px 12px; font-size: 0.85em; }
  .a11y-bar { left: 6px; right: 6px; bottom: 6px; padding: 8px; font-size: 0.85em; gap: 6px; }
  .a11y-bar button { padding: 8px 10px; font-size: 0.85em; }
  .a11y-progress-wrap { flex-basis: 100%; }
  .a11y-status { flex-basis: 100%; margin-left: 0; }
}