/* === View Transitions === */
::view-transition-old(root) {
  animation: fade-out 200ms ease;
}

::view-transition-new(root) {
  animation: fade-in 300ms ease;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ========================================
   Mushaf — The Sacred Reading Space
   Generous spacing. Arabic text breathes.
   Everything else recedes.
   ======================================== */

/* === Mushaf Container === */
.mushaf {
  padding-block: var(--space-8);
  animation: mushaf-fade-in 250ms ease;
}

@keyframes mushaf-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === Settling Moment — threshold into sacred space === */
.settling-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background-color: var(--color-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 600ms ease;
  cursor: pointer;
}

.settling-overlay.visible {
  opacity: 1;
}

.settling-overlay.fading {
  opacity: 0;
  transition: opacity 600ms ease;
}

.settling-content {
  text-align: center;
  animation: settling-breathe 3s ease-in-out;
}

.settling-dua {
  font-family: var(--font-arabic);
  font-size: 32px;
  color: var(--color-gold);
  line-height: 2;
  margin-block-end: var(--space-4);
}

.settling-trans {
  font-family: var(--font-display);
  font-size: var(--font-sm);
  color: var(--color-text-faint);
  font-style: italic;
  opacity: 0.6;
}

@keyframes settling-breathe {
  0% { opacity: 0; transform: scale(0.95); }
  30% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.8; transform: scale(1); }
}

/* === Ayah of the Day === */
.ayah-of-day {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  margin-block-end: var(--space-6);
  cursor: pointer;
  border-block-end: 1px solid var(--color-border);
  animation: mushaf-fade-in 500ms ease;
}

.aod-theme {
  font-size: var(--font-xs);
  color: var(--color-brass);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-block-end: var(--space-4);
  direction: ltr;
}

.aod-arabic {
  font-family: var(--font-arabic);
  font-size: 28px;
  color: var(--color-gold);
  line-height: 2.2;
  margin-block-end: var(--space-4);
}

.aod-translation {
  font-family: var(--font-body);
  font-size: var(--font-sm);
  color: var(--color-text-faint);
  font-style: italic;
  line-height: var(--line-height);
  max-width: 500px;
  margin-inline: auto;
  margin-block-end: var(--space-3);
  direction: ltr;
  opacity: 0.7;
}

.aod-ref {
  font-family: var(--font-display);
  font-size: var(--font-xs);
  color: var(--color-gold);
  opacity: 0.5;
  direction: ltr;
}

/* === Continue Bar — bookmark ribbon feel === */
.continue-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-canvas-raised);
  border-inline-start: 3px solid var(--color-gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-block-end: var(--space-6);
  cursor: pointer;
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  direction: ltr;
  transition: background-color var(--transition-fast);
}

.continue-bar:hover { background-color: var(--color-canvas-overlay); }
.continue-bar strong { font-family: var(--font-display); color: var(--color-text); }

/* === Surah Header === */
.surah-header {
  text-align: center;
  padding: var(--space-10) var(--space-4) var(--space-6);
}

.surah-ornament {
  color: var(--color-gold);
  display: flex;
  justify-content: center;
}

.surah-name-arabic {
  font-family: var(--font-arabic);
  font-size: 52px;
  color: var(--color-gold);
  line-height: 1.6;
  margin-block-end: var(--space-2);
}

.surah-name-english {
  font-family: var(--font-display);
  font-size: var(--font-xl);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-normal);
  direction: ltr;
}

.surah-meaning {
  font-family: var(--font-display);
  font-size: var(--font-sm);
  color: var(--color-gold);
  font-style: italic;
  margin-block-start: var(--space-1);
  direction: ltr;
  opacity: 0.7;
}

.surah-meta {
  font-size: var(--font-xs);
  color: var(--color-text-faint);
  margin-block-start: var(--space-1);
  direction: ltr;
  letter-spacing: 0.03em;
}

/* === Threshold Nav: About · Reflect · Flow === */
.threshold-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-block-end: var(--space-4);
  direction: ltr;
}

.threshold-tab {
  font-family: var(--font-display);
  font-size: var(--font-xs);
  color: var(--color-text-faint);
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--space-1) var(--space-2);
  letter-spacing: 0.04em;
  transition: color var(--transition-fast);
}

.threshold-tab:hover {
  color: var(--color-gold);
}

.threshold-tab.active {
  color: var(--color-gold);
}

.threshold-dot {
  color: var(--color-text-faint);
  opacity: 0.3;
  font-size: var(--font-xs);
  user-select: none;
}

/* === Threshold Panel (shared card for all tabs) === */
.threshold-panel {
  max-width: 600px;
  margin: 0 auto;
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), padding var(--transition-slow), opacity var(--transition-slow);
  padding: 0 var(--space-5);
  direction: ltr;
  text-align: center;
  opacity: 0;
}

.threshold-panel.expanded {
  max-height: 800px;
  padding: var(--space-4) var(--space-5) var(--space-6);
  opacity: 1;
}

/* About tab content */
.threshold-meaning {
  font-family: var(--font-display);
  font-size: var(--font-sm);
  color: var(--color-gold);
  font-style: italic;
  margin-block-end: var(--space-4);
}

.threshold-brief {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height);
  text-align: center;
}

/* Themes fallback (reused from old intro) */
.surah-intro-themes {
  list-style: none;
  padding: 0;
  margin-block-end: var(--space-3);
}

.surah-intro-themes li {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height);
  margin-block-end: var(--space-1);
  padding-inline-start: var(--space-3);
  position: relative;
}

.surah-intro-themes li::before {
  content: '\00b7';
  position: absolute;
  inset-inline-start: 0;
  color: var(--color-gold);
}

/* Reflect tab content */
.threshold-prompt-item {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height);
  padding: var(--space-3) 0;
  border-block-end: 1px solid var(--color-border-subtle);
  text-align: start;
  font-style: italic;
}

.threshold-prompt-item:last-child {
  border-block-end: none;
}

.prompt-type-label {
  display: inline-block;
  font-size: 9px;
  color: var(--color-gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
  margin-inline-end: var(--space-2);
  font-style: normal;
  font-weight: var(--font-weight-medium);
}

/* === Bismillah === */
.bismillah {
  text-align: center;
  font-family: var(--font-arabic);
  font-size: 30px;
  color: var(--color-text);
  padding: var(--space-6) 0;
  line-height: 2;
}

/* Item 7: Bismillah as threshold — crossing a doorway */
.bismillah-container {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-12) var(--space-8);
  margin-block-end: var(--space-16);
}

.bismillah-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to var(--line-dir, right),
    transparent,
    var(--color-gold-glow),
    transparent
  );
}

/* === Ayah === */
.ayah {
  padding: var(--space-8) var(--space-5);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
  position: relative;
  cursor: pointer;
  margin-block-end: var(--space-2);
}

/* Soft separator between ayat — barely there */
.ayah + .ayah::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline: var(--space-8);
  height: 1px;
  background: var(--color-border);
}

.ayah:hover {
  background-color: var(--color-canvas-raised);
}

.ayah.active {
  background-color: var(--color-canvas-raised);
}

/* Currently playing ayah — gold left border glow */
.ayah.audio-playing {
  border-inline-start: 3px solid var(--color-gold);
  background-color: rgba(128, 91, 17, 0.06);
}

/* === Arabic Text === */
.ayah-text {
  font-family: var(--font-arabic);
  font-size: var(--arabic-font-size);
  line-height: var(--line-height-arabic);
  color: var(--color-text);
  direction: rtl;
  text-align: right;
  font-feature-settings: "rlig" 1, "clig" 1, "calt" 1;
  word-spacing: 0.08em;
}

/* Ayah end marker — mushaf circle with Arabic-Indic numeral */
.ayah-end-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--color-gold);
  border-radius: var(--radius-full);
  color: var(--color-gold);
  font-family: var(--font-body);
  margin-inline-start: 0.3em;
  vertical-align: middle;
  direction: ltr;
  user-select: none;
  line-height: 1;
  opacity: 0.5;
  transition: opacity var(--transition-fast);
}

.ayah:hover .ayah-end-marker {
  opacity: 0.75;
}

.ayah-end-marker .ayah-num-arabic {
  font-size: 18px;
  line-height: 1;
}

.ayah-end-marker .ayah-num-sep,
.ayah-end-marker .ayah-num-western {
  display: none;
}

/* Western numeral — readable reference inside ayah, under separator */
.ayah-western-num {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  opacity: 0.6;
  user-select: none;
  direction: ltr;
  line-height: 1;
}

/* Tajweed data end marker */
.end {
  display: inline;
  color: var(--color-gold);
  font-family: var(--font-body);
  font-size: 0.55em;
  opacity: 0.5;
  margin-inline-start: 0.2em;
  vertical-align: middle;
}

/* === Sajdah === */
.ayah[data-sajdah]::after {
  content: '';
  position: absolute;
  inset-inline-start: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background-color: var(--color-gold);
  border-radius: var(--radius-full);
  opacity: 0.5;
}

.sajdah-tooltip {
  position: absolute;
  inset-inline-start: var(--space-3);
  top: calc(50% + 12px);
  background-color: var(--color-canvas-overlay);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  font-size: var(--font-xs);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  direction: ltr;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 5;
}

.ayah[data-sajdah]:hover .sajdah-tooltip,
.ayah[data-sajdah].show-tooltip .sajdah-tooltip {
  opacity: 1;
}

/* Re-reading honor — subtle brass dot for revisited verses */
.revisit-dot {
  position: absolute;
  inset-inline-end: 4px;
  top: var(--space-8);
  width: 4px;
  height: 4px;
  background-color: var(--color-brass);
  border-radius: var(--radius-full);
  opacity: 0.25;
}

/* === Per-verse quick actions — always visible, muted === */
.ayah-quick-actions {
  position: absolute;
  bottom: var(--space-2);
  inset-inline-end: var(--space-2);
  display: flex;
  gap: var(--space-1);
  direction: ltr;
}

.ayah-quick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  color: var(--color-text-faint);
  opacity: 0.3;
  cursor: pointer;
  transition: opacity var(--transition-fast), background-color var(--transition-fast);
  background: none;
  border: none;
}

.ayah-quick-btn:hover {
  opacity: 0.8;
  background-color: var(--color-canvas-raised);
}

.ayah-quick-btn.has-content {
  color: var(--color-brass);
  opacity: 0.6;
}

.ayah-quick-btn.has-content:hover {
  opacity: 1;
}

/* Reflection indicator — gold dot in margin for ayat with reflections */
.reflection-indicator {
  position: absolute;
  inset-inline-start: 6px;
  top: var(--space-8);
  width: 5px;
  height: 5px;
  background-color: var(--color-gold);
  border-radius: var(--radius-full);
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}

.ayah:hover .reflection-indicator {
  opacity: 1;
}

/* === Translation === */
/* Item 5: Translation — no border, hierarchy through typography alone */
.ayah-translation {
  font-family: var(--font-body);
  font-size: var(--translation-font-size);
  line-height: var(--line-height);
  color: var(--color-text-faint);
  opacity: 0.7;
  direction: ltr;
  text-align: left;
  margin-block-start: var(--space-4);
}

/* === Transliteration === */
.ayah-transliteration {
  font-family: var(--font-body);
  font-size: var(--font-sm);
  line-height: var(--line-height);
  color: var(--color-text-faint);
  direction: ltr;
  text-align: left;
  margin-block-start: var(--space-2);
  font-style: italic;
  opacity: 0.6;
}

/* === Word-by-Word === */
/* WBW — right-aligned (RTL natural flow) */
.ayah-wbw {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-5);
  direction: rtl;
  justify-content: flex-start;
  margin-block-start: var(--space-4);
  padding: var(--space-3) 0;
}

.wbw-word {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 48px;
}

.wbw-arabic {
  font-family: var(--font-arabic);
  font-size: calc(var(--arabic-font-size) * 0.82);
  line-height: 1.9;
  color: var(--color-text);
}

.wbw-english {
  font-family: var(--font-body);
  font-size: var(--wbw-font-size);
  color: var(--color-text-faint);
  direction: ltr;
  text-align: center;
  line-height: var(--line-height-tight);
  max-width: 90px;
}

.wbw-end {
  align-self: center;
}

/* Word highlight during audio playback */
.word-active {
  color: var(--color-gold) !important;
  text-shadow: 0 0 12px var(--color-gold-glow);
  transition: color var(--transition-fast), text-shadow var(--transition-fast);
}

/* === Ayah Action Bar === */
.ayah-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-block-start: var(--space-4);
  background-color: var(--color-canvas-raised);
  border-radius: var(--radius-full);
  direction: ltr;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ayah-actions::-webkit-scrollbar { display: none; }

.ayah.active .ayah-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.ayah-action-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-xs);
  color: var(--color-text-faint);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.ayah-action-btn:hover {
  background-color: var(--color-canvas-overlay);
  color: var(--color-text-muted);
}

.ayah-action-btn .icon {
  width: 14px;
  height: 14px;
}

/* === Verse Lingering — focused single-verse view === */
.verse-linger-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background-color: var(--color-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 400ms ease;
  cursor: pointer;
  padding: var(--space-8);
}

.verse-linger-overlay.visible {
  opacity: 1;
}

.verse-linger-content {
  text-align: center;
  max-width: 800px;
  cursor: default;
}

.verse-linger-arabic {
  font-family: var(--font-arabic);
  font-size: calc(var(--arabic-font-size) * 1.8);
  color: var(--color-gold);
  line-height: 2.4;
  margin-block-end: var(--space-8);
}

.verse-linger-trans {
  font-family: var(--font-body);
  font-size: var(--font-lg);
  color: var(--color-text-faint);
  line-height: var(--line-height);
  font-style: italic;
  opacity: 0.6;
  margin-block-end: var(--space-6);
  max-width: 600px;
  margin-inline: auto;
  direction: ltr;
}

.verse-linger-ref {
  font-family: var(--font-display);
  font-size: var(--font-sm);
  color: var(--color-gold);
  opacity: 0.4;
  margin-block-end: var(--space-6);
  direction: ltr;
}

.verse-linger-audio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  opacity: 0.5;
  background: none;
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.verse-linger-audio:hover {
  opacity: 1;
}

/* === Tadabbur Mode — guided reflection flow === */
.tadabbur-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  background-color: var(--color-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 400ms ease;
  padding: var(--space-6);
  overflow-y: auto;
}

.tadabbur-overlay.visible { opacity: 1; }

.tadabbur-container {
  max-width: 600px;
  width: 100%;
  text-align: center;
}

.tadabbur-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-block-end: var(--space-6);
}

.tadabbur-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  transition: all var(--transition-base);
}

.tadabbur-dot.active {
  background-color: var(--color-gold);
  transform: scale(1.3);
}

.tadabbur-dot.done {
  background-color: var(--color-brass);
}

.tadabbur-step-label {
  font-family: var(--font-display);
  font-size: var(--font-xs);
  color: var(--color-brass);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-block-end: var(--space-8);
}

.tadabbur-arabic {
  font-family: var(--font-arabic);
  font-size: 28px;
  color: var(--color-gold);
  line-height: 2.2;
  margin-block-end: var(--space-6);
}

.tadabbur-trans {
  font-size: var(--font-sm);
  color: var(--color-text-faint);
  font-style: italic;
  opacity: 0.7;
  line-height: var(--line-height);
  margin-block-end: var(--space-4);
  direction: ltr;
}

.tadabbur-ref {
  font-size: var(--font-xs);
  color: var(--color-gold);
  opacity: 0.4;
  margin-block-end: var(--space-6);
  direction: ltr;
}

.tadabbur-prompt {
  font-size: var(--font-base);
  color: var(--color-text-muted);
  line-height: var(--line-height);
  font-style: italic;
  padding: var(--space-6) var(--space-4);
  border-inline-start: 2px solid var(--color-gold);
  text-align: center;
  direction: ltr;
  margin-block-end: var(--space-6);
}

.tadabbur-respond-label {
  font-size: var(--font-sm);
  color: var(--color-text-faint);
  margin-block-end: var(--space-3);
  direction: ltr;
}

.tadabbur-textarea {
  width: 100%;
  min-height: 120px;
  padding: var(--space-4);
  background-color: var(--color-canvas-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-sm);
  line-height: var(--line-height);
  resize: vertical;
  direction: ltr;
}

.tadabbur-textarea:focus {
  border-color: var(--color-gold);
  outline: none;
}

.tadabbur-rest-text {
  font-family: var(--font-display);
  font-size: var(--font-lg);
  color: var(--color-text-faint);
  font-style: italic;
  text-align: center;
  margin-block-end: var(--space-8);
}

.tadabbur-rest-verse {
  font-family: var(--font-arabic);
  font-size: 22px;
  color: var(--color-gold);
  opacity: 0.3;
  line-height: 2.2;
  animation: settling-breathe 4s ease-in-out infinite;
}

/* Tadabbur Reflect step */
.tadabbur-reflect-ayah {
  font-family: var(--font-arabic);
  font-size: 22px;
  color: var(--color-gold);
  opacity: 0.5;
  line-height: 2;
  text-align: center;
  margin-block-end: var(--space-6);
}

.tadabbur-reflect-trans {
  font-size: var(--font-xs);
  color: var(--color-text-faint);
  opacity: 0.4;
  text-align: center;
  font-style: italic;
  margin-block-start: var(--space-4);
  max-width: 400px;
  margin-inline: auto;
}

/* Tadabbur Rest step */
.tadabbur-rest-bismillah {
  font-family: var(--font-arabic);
  font-size: 24px;
  color: var(--color-gold);
  opacity: 0.6;
  text-align: center;
  line-height: 2;
  margin-block-end: var(--space-6);
}

.tadabbur-nav {
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--space-8);
}

/* Tadabbur contemplation pause */
.tadabbur-breathing {
  animation: tadabbur-breath 1.2s ease;
}

@keyframes tadabbur-breath {
  0% { opacity: 1; }
  40% { opacity: 0.2; }
  100% { opacity: 0; }
}

/* Calendar suggestion + Ayah of Day: rendered on home state only, not in surah view */

/* Margin reflections — manuscript marginalia on wide screens */
@media (min-width: 1024px) {
  .ayah[data-has-reflection] {
    position: relative;
  }

  .reflection-margin-note {
    position: absolute;
    inset-inline-start: calc(100% + var(--space-6));
    top: var(--space-8);
    width: 200px;
    font-size: 11px;
    color: var(--color-text-faint);
    font-style: italic;
    line-height: 1.6;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    cursor: pointer;
    direction: ltr;
  }

  .ayah:hover .reflection-margin-note {
    opacity: 0.8;
  }

  .reflection-margin-date {
    font-size: 9px;
    color: var(--color-brass);
    opacity: 0.6;
    display: block;
    margin-block-end: 2px;
  }
}

/* === Root-word explorer popup === */
.word-popup {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-canvas-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  z-index: 20;
  white-space: nowrap;
  animation: mushaf-fade-in 200ms ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  min-width: 80px;
  text-align: center;
  direction: ltr;
}

.word-popup-root {
  font-family: var(--font-arabic);
  font-size: 18px;
  color: var(--color-gold);
  text-align: center;
  margin-block-end: var(--space-1);
  letter-spacing: 0.1em;
}

.word-popup-pos {
  font-size: 10px;
  color: var(--color-text-faint);
  text-align: center;
  text-transform: capitalize;
}

.word-popup-count {
  font-size: 10px;
  color: var(--color-text-faint);
  margin-block-start: var(--space-1);
  opacity: 0.7;
}

/* === Voice Reflection mic button === */
.reflection-mic-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.reflection-mic-btn.recording {
  animation: mic-pulse 1s ease infinite;
}

@keyframes mic-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Custom voice player */
.voice-player {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  margin-block-start: var(--space-1);
}

.voice-play-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-canvas-raised);
  border: 1px solid var(--color-border);
  color: var(--color-gold);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}

.voice-play-btn:hover {
  background: var(--color-canvas-overlay);
}

.voice-progress {
  flex: 1;
  height: 3px;
  background: var(--color-border);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.voice-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-gold);
  transform-origin: left;
  transform: scaleX(0);
}

.voice-progress.playing::after {
  animation: voice-fill linear forwards;
  animation-duration: inherit;
}

@keyframes voice-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.voice-duration {
  font-size: 10px;
  color: var(--color-text-faint);
  flex-shrink: 0;
  min-width: 24px;
}

/* === Return to This — gentle re-invitation === */
.return-to-this {
  text-align: center;
  padding: var(--space-6) var(--space-5);
  margin-block-end: var(--space-4);
  cursor: pointer;
  border-block-end: 1px solid var(--color-border-subtle);
  animation: mushaf-fade-in 600ms ease;
  direction: ltr;
  position: relative;
}

.return-dismiss {
  position: absolute;
  top: var(--space-2);
  inset-inline-end: var(--space-2);
  background: none;
  border: none;
  color: var(--color-text-faint);
  opacity: 0.3;
  cursor: pointer;
  padding: var(--space-1);
}

.return-dismiss:hover {
  opacity: 0.7;
}

.return-label {
  font-size: var(--font-xs);
  color: var(--color-brass);
  letter-spacing: 0.04em;
  margin-block-end: var(--space-2);
}

.return-ref {
  font-family: var(--font-display);
  font-size: var(--font-sm);
  color: var(--color-gold);
  margin-block-end: var(--space-2);
}

.return-text {
  font-size: var(--font-sm);
  color: var(--color-text-faint);
  font-style: italic;
  line-height: var(--line-height);
  max-width: 500px;
  margin-inline: auto;
}

/* Scroll-to-top button */
.scroll-to-top {
  position: fixed;
  bottom: calc(60px + var(--space-4));
  inset-inline-end: var(--space-4);
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-canvas-raised);
  border: 1px solid var(--color-border);
  color: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 50;
}

.scroll-to-top.visible {
  opacity: 0.7;
  pointer-events: auto;
}

.scroll-to-top:hover {
  opacity: 1;
}

/* Resources & Credits page */
.credits-page {
  max-width: 600px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4) var(--space-10);
}

.credits-header-arabic {
  font-family: var(--font-arabic);
  font-size: 28px;
  color: var(--color-gold);
  text-align: center;
  opacity: 0.5;
  margin-block-end: var(--space-4);
}

.credits-title {
  text-align: center;
  color: var(--color-text);
  font-size: var(--font-xl);
  margin-block-end: var(--space-3);
}

.credits-intro {
  text-align: center;
  font-size: var(--font-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height);
  margin-block-end: var(--space-8);
}

.credits-section-title {
  font-family: var(--font-display);
  font-size: var(--font-sm);
  color: var(--color-gold);
  margin-block-start: var(--space-6);
  margin-block-end: var(--space-2);
  padding-block-end: var(--space-1);
  border-block-end: 1px solid var(--color-border-subtle);
}

.credits-entry {
  padding: var(--space-2) 0;
}

.credits-name {
  font-family: var(--font-display);
  font-size: var(--font-sm);
  color: var(--color-text);
  margin-block-end: 2px;
}

.credits-detail {
  font-size: var(--font-xs);
  color: var(--color-text-faint);
  line-height: var(--line-height);
}

.credits-note {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height);
  margin-block-end: var(--space-3);
  font-style: italic;
}

.credits-divider {
  border: none;
  border-block-start: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

.credits-reciter-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0;
}

.credits-reciter-name {
  font-size: var(--font-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.credits-reciter-name::after {
  content: '\00b7';
  margin-inline-start: var(--space-3);
  color: var(--color-text-faint);
  opacity: 0.3;
}

.credits-reciter-name:last-child::after {
  display: none;
}

.credits-closing {
  font-family: var(--font-arabic);
  font-size: 22px;
  color: var(--color-gold);
  text-align: center;
  opacity: 0.6;
  margin-block-start: var(--space-8);
}

.credits-closing-trans {
  font-size: var(--font-xs);
  color: var(--color-text-faint);
  text-align: center;
  font-style: italic;
  margin-block-start: var(--space-1);
}

/* Root word directory */
.root-directory {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-4);
}

.root-header-arabic {
  font-family: var(--font-arabic);
  font-size: 42px;
  color: var(--color-gold);
  text-align: center;
  letter-spacing: 0.15em;
  margin-block-end: var(--space-2);
}

.root-stats {
  text-align: center;
  font-size: var(--font-xs);
  color: var(--color-text-faint);
  margin-block-end: var(--space-4);
}

.root-surah-filter {
  margin-block-end: var(--space-4);
}

.root-surah-group {
  margin-block-end: var(--space-4);
}

.root-surah-name {
  font-family: var(--font-display);
  font-size: var(--font-sm);
  color: var(--color-gold);
  margin-block-end: var(--space-2);
  padding-block-end: var(--space-1);
  border-block-end: 1px solid var(--color-border-subtle);
}

.root-ayah-card {
  padding: var(--space-3) 0;
  cursor: pointer;
  transition: background-color var(--transition-fast);
  border-radius: var(--radius-sm);
}

.root-ayah-card:hover {
  background-color: var(--color-canvas-raised);
}

.root-ayah-ref {
  font-size: 10px;
  color: var(--color-brass);
  opacity: 0.6;
  margin-block-end: var(--space-1);
}

.root-ayah-arabic {
  font-family: var(--font-arabic);
  font-size: 18px;
  color: var(--color-text);
  line-height: 2;
  margin-block-end: var(--space-1);
}

.root-ayah-trans {
  font-size: var(--font-xs);
  color: var(--color-text-faint);
  line-height: var(--line-height);
}

.word-popup-explore {
  font-size: 9px;
  color: var(--color-brass);
  cursor: pointer;
  margin-block-start: var(--space-1);
  padding-block-start: var(--space-1);
  border-block-start: 1px solid var(--color-border-subtle);
  text-align: center;
}

.word-popup-explore:hover {
  color: var(--color-gold);
}