/* ==========================================================================
   QURAN SECTION — Surah grid + reader + footer.
   Minimal: tap surah → read → next/prev/back.
   ========================================================================== */

#section-quran {
  padding-block: 0;
  padding-inline: 0;
}

/* ─── Surah grid (4 columns) ────────────────────────────────────── */

.surah-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  padding: var(--space-3);
}

.surah-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-3) 4px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
  content-visibility: auto;
  contain-intrinsic-size: 1 96px;
}

.surah-card:hover { border-color: var(--accent-amber-muted); }
.surah-card:active { background: oklch(from var(--bg-surface) calc(l + 0.04) c h); }

.surah-card-num {
  position: relative;
  inline-size: 36px;
  block-size: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.surah-card-num svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.surah-card-num .octagon-frame {
  fill: none;
  stroke: var(--accent-amber);
  stroke-width: 2;
  transition: filter var(--dur-fast) var(--ease-out);
}
.surah-card:hover .surah-card-num .octagon-frame {
  filter: drop-shadow(0 0 4px oklch(75% 0.18 70 / 0.4));
}
.surah-card-num span {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: var(--text-ar-xs);
  font-weight: var(--weight-bold);
  color: var(--accent-amber);
  font-variant-numeric: tabular-nums;
}

.surah-card-name {
  font-family: var(--font-quran);
  font-size: var(--text-ar-sm);
  font-weight: var(--weight-bold);
  color: var(--fg-primary);
  text-align: center;
  line-height: 1.25;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.surah-card-meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* ─── Loading / empty ───────────────────────────────────────────── */

.quran-loading {
  padding: var(--space-8) var(--space-3);
  text-align: center;
  color: var(--fg-secondary);
  font-family: var(--font-body);
  font-size: var(--text-ar-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.quran-spinner {
  inline-size: 28px;
  block-size: 28px;
  border: 2px solid var(--border);
  border-top-color: var(--accent-amber);
  border-radius: 50%;
  animation: quran-spin 0.8s linear infinite;
}

@keyframes quran-spin { to { transform: rotate(360deg); } }

.reader-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 20px;
  border-radius: var(--radius-md);
  background: var(--accent-amber);
  color: var(--accent-amber-on);
  border: none;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

/* ─── Reader view ───────────────────────────────────────────────── */

#surahReaderView {
  display: none;
  padding-block: 0;
  padding-inline: 0;
  min-block-size: 100vh;
}
#surahReaderView.on { display: block; }
#surahListView.off { display: none; }

.reader-content {
  padding: var(--space-4) calc(env(safe-area-inset-left, 0px) + 16px) calc(var(--space-4) + 100px);
  padding-inline-end: calc(env(safe-area-inset-right, 0px) + 16px);
  font-family: var(--font-quran);
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.85rem);
  line-height: var(--leading-ar-quran);
  color: var(--fg-primary);
}

/* ─── Bismillah ─────────────────────────────────────────────────── */

.bismillah {
  text-align: center;
  font-family: var(--font-quran);
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  color: var(--accent-amber);
  margin-block-end: var(--space-3);
  padding-block: var(--space-3);
}

.bismillah-divider {
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
  margin-block-end: var(--space-4);
}

/* ─── Ayah spans (inline mushaf layout) ────────────────────────── */

.surah-para {
  text-align: justify;
  text-align-last: center;
  hyphens: auto;
}

.ayah { display: inline; }

.ayah-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.6em;
  block-size: 1.6em;
  margin-inline: 0.15em;
  border-radius: 50%;
  background: oklch(from var(--accent-amber) l c h / 0.15);
  color: var(--accent-amber);
  font-family: var(--font-mono);
  font-size: 0.45em;
  font-weight: var(--weight-bold);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ─── Surah footer (in-reader prev/next/back) ───────────────────── */

.surah-footer {
  position: fixed;
  inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 48px);
  inset-inline: 0;
  z-index: calc(var(--z-sticky, 100) - 1);
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: oklch(from var(--bg-deep) l c h / 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-block-start: 1px solid var(--border);
}

.sf-back, .sf-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  color: var(--fg-secondary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.sf-back:hover, .sf-nav:hover:not(:disabled) {
  background: oklch(from var(--accent-amber) l c h / 0.22);
  color: var(--accent-amber);
}
.sf-back:active, .sf-nav:active:not(:disabled) { transform: scale(0.92); }
.sf-nav:disabled { opacity: 0.3; cursor: not-allowed; }

.sf-info { flex: 1; text-align: center; min-inline-size: 0; }
.sf-name {
  font-family: var(--font-quran);
  font-size: var(--text-ar-md);
  font-weight: var(--weight-bold);
  color: var(--fg-primary);
}
.sf-meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

/* Compatibility stubs — referenced by JS but unused */
.quran-search-results,
.quran-actions,
.offline-btn,
.last-read-card,
.bookmarks-bar,
.bm-chip,
.quran-empty,
.quran-filters,
.search-input-wrap,
.surah-card-bm,
.surah-hl-btn,
.surah-card-time { display: none; }