/* Global reading mode — toggled via body.a11y-reading (accessibility panel) */

html body.a11y-reading {
  --read-bg: #fdf6e3;
  --read-surface: #f8f0d8;
  --read-surface-2: #efe3c3;
  --read-border: #dcc9a0;
  --read-text: #3b2f0c;
  --read-text-muted: #6b5a3e;
  --read-text-dim: #8a7658;
  --read-green: #2d6a3e;
  --read-green-soft: #e3edd8;
  background: var(--read-bg) !important;
  color: var(--read-text) !important;
  line-height: 1.9;
  letter-spacing: 0.01em;
}

/* ── Tailwind / legacy pages ─────────────────────────────────────────────── */

body.a11y-reading [class~="bg-white"]      { background-color: var(--read-surface) !important; }
body.a11y-reading [class~="bg-gray-50"]    { background-color: var(--read-bg) !important; }
body.a11y-reading [class~="bg-gray-100"]   { background-color: var(--read-surface-2) !important; }
body.a11y-reading [class~="bg-gray-200"]   { background-color: #e8dcc0 !important; }

body.a11y-reading [class~="text-gray-900"],
body.a11y-reading [class~="text-gray-800"] { color: var(--read-text) !important; }
body.a11y-reading [class~="text-gray-700"],
body.a11y-reading [class~="text-gray-600"] { color: #4a3f2b !important; }
body.a11y-reading [class~="text-gray-500"],
body.a11y-reading [class~="text-gray-400"] { color: var(--read-text-muted) !important; }

body.a11y-reading [class~="border-gray-100"],
body.a11y-reading [class~="border-gray-200"],
body.a11y-reading [class~="border-gray-300"] { border-color: var(--read-border) !important; }

body.a11y-reading nav,
body.a11y-reading header,
body.a11y-reading .site-navbar,
body.a11y-reading .wird-navbar {
  background-color: #f4e5c0 !important;
  border-color: var(--read-border) !important;
  color: var(--read-text) !important;
}

body.a11y-reading footer,
body.a11y-reading .app-footer,
body.a11y-reading .public-footer,
body.a11y-reading .dashboard-footer,
body.a11y-reading .wird-footer {
  background-color: #efe3c3 !important;
  color: var(--read-text-muted) !important;
}

body.a11y-reading .site-card,
body.a11y-reading .site-panel,
body.a11y-reading [class~="rounded-2xl"],
body.a11y-reading [class~="rounded-xl"] {
  background-color: var(--read-surface) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text) !important;
}

body.a11y-reading input,
body.a11y-reading select,
body.a11y-reading textarea {
  background-color: var(--read-surface) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text) !important;
}

body.a11y-reading .app-wrapper,
body.a11y-reading .app-content,
body.a11y-reading main.container {
  background: var(--read-bg) !important;
  color: var(--read-text) !important;
}

/* ── Dashboard shell ─────────────────────────────────────────────────────── */

body.a11y-reading .wd-body,
body.a11y-reading .wd-body-home,
body.a11y-reading .wd-body-auth,
body.a11y-reading .wd-body-dashboard,
body.a11y-reading .wd-body-quran,
body.a11y-reading .wd-body-hifz,
body.a11y-reading .wd-body-tilawa,
body.a11y-reading .wd-body-translation {
  background: var(--read-bg) !important;
  color: var(--read-text) !important;
}

body.a11y-reading .wd-sidebar {
  background: var(--read-surface) !important;
  border-inline-end-color: var(--read-border) !important;
}

body.a11y-reading .wd-main,
body.a11y-reading .wd-main-quran,
body.a11y-reading .wd-main-hifz,
body.a11y-reading .wd-content,
body.a11y-reading .wd-content-quran,
body.a11y-reading .wd-content-hifz,
body.a11y-reading .wd-quran-layout,
body.a11y-reading .wd-hifz-layout,
body.a11y-reading .wd-hifz-viewport,
body.a11y-reading .wd-hifz-tools-top,
body.a11y-reading .wd-quran-tools-top,
body.a11y-reading .wd-home-minimal,
body.a11y-reading .wd-auth-content {
  background: var(--read-bg) !important;
  color: var(--read-text) !important;
}

body.a11y-reading .wd-sidebar-toggle,
body.a11y-reading .wd-quran-tools-toggle,
body.a11y-reading .wd-sidebar-close {
  background: var(--read-surface-2) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text) !important;
}

body.a11y-reading .wd-nav a {
  color: var(--read-text-muted) !important;
}

body.a11y-reading .wd-nav a:hover {
  background: var(--read-surface-2) !important;
  color: var(--read-text) !important;
}

body.a11y-reading .wd-nav a.is-active {
  background: var(--read-green-soft) !important;
  color: var(--read-green) !important;
}

body.a11y-reading .wd-sidebar-foot {
  border-top-color: var(--read-border) !important;
}

body.a11y-reading .wd-sidebar-foot > a {
  color: var(--read-text-muted) !important;
}

body.a11y-reading .wd-sidebar-foot > a:hover {
  background: var(--read-surface-2) !important;
  color: var(--read-text) !important;
}

body.a11y-reading .wd-sidebar-lang .wird-lang-button {
  background: transparent !important;
  color: var(--read-text-muted) !important;
}

body.a11y-reading .wd-sidebar-lang .wird-lang-button:hover {
  background: var(--read-surface-2) !important;
  color: var(--read-text) !important;
}

body.a11y-reading .wd-user {
  background: var(--read-surface-2) !important;
}

body.a11y-reading .wd-user strong {
  color: var(--read-text) !important;
}

body.a11y-reading .wd-user small {
  color: var(--read-text-muted) !important;
}

body.a11y-reading .wd-topbar {
  background: var(--read-surface) !important;
  border-bottom-color: var(--read-border) !important;
}

body.a11y-reading .wd-search {
  background: var(--read-surface-2) !important;
  border-color: transparent !important;
}

body.a11y-reading .wd-search:focus-within {
  background: var(--read-surface) !important;
  border-color: rgba(45, 106, 62, 0.35) !important;
}

body.a11y-reading .wd-search i,
body.a11y-reading .wd-search input {
  color: var(--read-text) !important;
}

body.a11y-reading .wd-search input::placeholder {
  color: var(--read-text-dim) !important;
}

body.a11y-reading .wd-icon-btn,
body.a11y-reading .wd-btn-main-site {
  background: var(--read-surface) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text-muted) !important;
}

body.a11y-reading .wd-icon-btn:hover,
body.a11y-reading .wd-btn-main-site:hover {
  background: var(--read-surface-2) !important;
  color: var(--read-green) !important;
}

body.a11y-reading .wd-icon-btn-logout {
  color: #b91c1c !important;
}

body.a11y-reading .wd-icon-btn-logout:hover {
  background: #f8e0e0 !important;
  color: #991b1b !important;
  border-color: rgba(185, 28, 28, 0.25) !important;
}

body.a11y-reading .wd-page-head h1,
body.a11y-reading .wd-page-head p,
body.a11y-reading .wd-chart-head h2,
body.a11y-reading .wd-table-section h2,
body.a11y-reading .wd-newsletter h2,
body.a11y-reading .wd-newsletter p {
  color: var(--read-text) !important;
}

body.a11y-reading .wd-stat,
body.a11y-reading .wd-chart-card,
body.a11y-reading .wd-newsletter,
body.a11y-reading .wd-table,
body.a11y-reading .wd-toast {
  background: var(--read-surface) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text) !important;
}

body.a11y-reading .wd-stat strong,
body.a11y-reading .wd-table-user strong {
  color: var(--read-text) !important;
}

body.a11y-reading .wd-stat small,
body.a11y-reading .wd-stat-top,
body.a11y-reading .wd-table-user small,
body.a11y-reading .wd-table-meta,
body.a11y-reading .wd-table-date,
body.a11y-reading .wd-empty {
  color: var(--read-text-muted) !important;
}

body.a11y-reading .wd-table-row {
  border-bottom-color: var(--read-border) !important;
}

body.a11y-reading .wd-pill {
  background: var(--read-surface-2) !important;
  color: var(--read-text-muted) !important;
}

body.a11y-reading .wd-newsletter input,
body.a11y-reading .wd-home-newsletter input {
  background: var(--read-surface) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text) !important;
}

/* ── Home page ───────────────────────────────────────────────────────────── */

body.a11y-reading .wd-home-techniques-title,
body.a11y-reading .wd-home-reciters-title,
body.a11y-reading .wd-home-footer-meta {
  color: var(--read-text-muted) !important;
}

body.a11y-reading .wd-home-technique,
body.a11y-reading .wd-home-stats .wd-stat,
body.a11y-reading .wd-home-app-card {
  background: var(--read-surface) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text) !important;
}

body.a11y-reading .wd-home-technique:hover {
  background: var(--read-surface-2) !important;
  border-color: rgba(45, 106, 62, 0.35) !important;
}

body.a11y-reading .wd-home-technique span,
body.a11y-reading .wd-home-reciter-name {
  color: var(--read-text) !important;
}

body.a11y-reading .wd-home-reciters-arrow {
  background: var(--read-surface) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text-muted) !important;
}

body.a11y-reading .wd-home-reciters-arrow:hover {
  background: var(--read-surface-2) !important;
  color: var(--read-green) !important;
}

body.a11y-reading .wd-home-reciter-fallback {
  background: var(--read-surface-2) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text-muted) !important;
}

body.a11y-reading .wd-home-app-btn {
  background: var(--read-surface) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text) !important;
}

body.a11y-reading .wd-home-footer-divider {
  background: var(--read-border) !important;
}

/* ── Auth ────────────────────────────────────────────────────────────────── */

body.a11y-reading .wd-auth-card {
  background: var(--read-surface) !important;
  border-color: var(--read-border) !important;
  box-shadow: 0 18px 48px rgba(59, 47, 12, 0.08) !important;
}

body.a11y-reading .wd-auth-title,
body.a11y-reading .wd-auth-label {
  color: var(--read-text) !important;
}

body.a11y-reading .wd-auth-tabs {
  background: var(--read-surface-2) !important;
}

body.a11y-reading .wd-auth-tab {
  color: var(--read-text-muted) !important;
}

body.a11y-reading .wd-auth-tab.is-active {
  background: var(--read-surface) !important;
  color: var(--read-green) !important;
}

body.a11y-reading .wd-auth-input,
body.a11y-reading .wd-auth-password {
  background: var(--read-surface) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text) !important;
}

body.a11y-reading .wd-auth-password .wd-auth-input {
  background: transparent !important;
}

/* ── Language modal ──────────────────────────────────────────────────────── */

body.a11y-reading #wirdLanguageDropdownRoot.wird-lang-modal-root {
  background: rgba(59, 47, 12, 0.35) !important;
}

body.a11y-reading #wirdLanguageDropdownRoot .wird-lang-modal,
body.a11y-reading .wird-lang-fallback-inner.wird-lang-modal {
  background: var(--read-surface) !important;
  border-color: var(--read-border) !important;
}

body.a11y-reading .wird-lang-modal-title {
  color: var(--read-text) !important;
}

body.a11y-reading .wird-lang-modal-close {
  background: var(--read-surface-2) !important;
  color: var(--read-text-muted) !important;
}

body.a11y-reading #wirdLanguageDropdownRoot .wird-lang-tile,
body.a11y-reading .wird-lang-fallback .wird-lang-tile {
  background: var(--read-surface-2) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text) !important;
}

body.a11y-reading #wirdLanguageDropdownRoot .wird-lang-tile.is-active,
body.a11y-reading .wird-lang-fallback .wird-lang-tile.is-active {
  background: var(--read-green-soft) !important;
  border-color: rgba(45, 106, 62, 0.4) !important;
  color: var(--read-green) !important;
}

/* ── Quran / translation / hifz / tilawa chrome ──────────────────────────── */

body.a11y-reading .quran-sel-trigger,
body.a11y-reading .quran-tool-chip,
body.a11y-reading .quran-tool-toggle,
body.a11y-reading .quran-fihris-tab,
body.a11y-reading .quran-sel-list-item,
body.a11y-reading .quran-sel-search,
body.a11y-reading .quran-index-tab,
body.a11y-reading .quran-sel-panel,
body.a11y-reading .wd-quran-info-panel,
body.a11y-reading .hifz-nav-btn,
body.a11y-reading .hifz-toolbar-pill-btn,
body.a11y-reading .hifz-inline-select,
body.a11y-reading .wd-tilawa-qari-card,
body.a11y-reading .wd-tilawa-player,
body.a11y-reading .wd-tilawa-player-btn,
body.a11y-reading .translation-lang-flags,
body.a11y-reading .trans-flag-btn,
body.a11y-reading .translation-book-shell,
body.a11y-reading .translation-book-toolbar,
body.a11y-reading .translation-book-btn,
body.a11y-reading .translation-page-scroll,
body.a11y-reading .translation-page-content {
  background: var(--read-surface) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text) !important;
}

body.a11y-reading .quran-sel-list-item:hover,
body.a11y-reading .quran-sel-list-item.is-active,
body.a11y-reading .quran-fihris-tab.is-active,
body.a11y-reading .trans-flag-btn.is-active {
  background: var(--read-surface-2) !important;
  color: var(--read-text) !important;
}

body.a11y-reading .wd-quran-viewport,
body.a11y-reading #mushafArea,
body.a11y-reading #tafsirArea,
body.a11y-reading #centerColumn {
  background: var(--read-bg) !important;
}

body.a11y-reading .translation-page-content .translation-text,
body.a11y-reading .translation-page-content .translation-line,
body.a11y-reading .tafsir-page-scroll,
body.a11y-reading .tafsir-text {
  color: var(--read-text) !important;
}

body.a11y-reading .wd-tilawa-qari-name,
body.a11y-reading .wd-tilawa-player-title {
  color: var(--read-text) !important;
}

/* ── Accessibility panel in reading mode ─────────────────────────────────── */

body.a11y-reading #a11yPanel {
  background: var(--read-surface) !important;
  border-color: var(--read-border) !important;
}

body.a11y-reading .a11y-font-label,
body.a11y-reading .a11y-toggle-label {
  color: var(--read-text) !important;
}

body.a11y-reading .a11y-font-btn {
  background: var(--read-surface-2) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text) !important;
}

body.a11y-reading .a11y-font-value {
  color: var(--read-text-muted) !important;
}

body.a11y-reading .a11y-toggle-row:hover {
  background: var(--read-surface-2) !important;
}

body.a11y-reading .a11y-reset-btn {
  background: var(--read-surface-2) !important;
  border-color: var(--read-border) !important;
  color: var(--read-text-muted) !important;
}

body.a11y-reading .a11y-font-row,
body.a11y-reading .a11y-reset-row {
  border-color: var(--read-border) !important;
}

/* Keep brand actions readable */
body.a11y-reading .wd-btn-green,
body.a11y-reading .quran-badge-chip,
body.a11y-reading #quranBadgeChip,
body.a11y-reading #tafsirBadgeChip {
  color: #fff !important;
}