/*
  Approved 12 October 2026 visual refresh: calm sage backdrop and readable Quranic content.
  This layer deliberately does not change text, surah identity colors, content data,
  RTL settings, game logic, scores, or questions.
  Loaded after the shared palette on all three page entries.
*/
:root {
  --palette-page: #E9EFEB;
  --palette-page-deep: #E1EAE4;
  --palette-cream: #FBFAF7;
  --palette-mint: #EDF5F1;
  --palette-white: #FFFFFF;
  --palette-teal: #0D5963;
  --palette-ink: #173C46;
  --palette-muted: #526C72;
  --palette-gold-soft: #F8E7BC;
  --palette-line: #D7E7E0;
  --palette-border: #AACAC3;
  --palette-shadow: 0 14px 38px rgba(23,60,70,.09);
}
html { color-scheme: light; }
body {
  background:var(--palette-page) !important;
  color:var(--palette-ink) !important;
}
/* Top navigation stays clean and visually separate from the tinted canvas. */
.topbar.site-header,
.mastery-header,
.top {background:rgba(255,255,255,.97) !important;
  border-bottom-color:var(--palette-line) !important;}
.topbar.site-header {box-shadow:0 5px 22px rgba(23,60,70,.065) !important;}

/* Homepage: clear white hero against sage, with warm copy and teal actions. */
#module-one-view .welcome.juz-home {
  background:var(--palette-white) !important;
  border-color:var(--palette-line) !important;
  box-shadow:var(--palette-shadow) !important;
}
#module-one-view .welcome.juz-home h1,
#module-one-view .juz-paths-heading h2,
#module-one-view .juz-learning-divider,
.section-heading h2 {color:var(--palette-ink) !important;}
#module-one-view .welcome.juz-home .welcome-quran-art {
  background:var(--palette-mint);
  border-radius:22px;
}
/* Three learning pathways are lightly tinted but distinctly raised cards. */
#module-one-view .juz-paths-grid .juz-path-card {
  background:var(--palette-mint) !important;
  border-color:#C7DDD3 !important;
  box-shadow:0 11px 28px rgba(23,60,70,.075) !important;
}
#module-one-view .juz-paths-grid .juz-path-icon,
#module-one-view .juz-paths-grid .juz-path-action {
  background:var(--palette-white) !important;
}
#module-one-view .juz-paths-grid .juz-path-card:hover {
  box-shadow:0 16px 35px rgba(23,60,70,.12) !important;
}
/* Feature blocks: alternate white surfaces and limited mint accents. */
#module-one-view .surah-guide,
#module-one-view .about-similarities,
#module-one-view .guided-lesson,
#module-one-view .toolbar,
#module-one-view .optional-discovery .juz-path-card {
  background:var(--palette-white) !important;
  border-color:var(--palette-line) !important;
  box-shadow:0 8px 25px rgba(23,60,70,.06);
}
#module-one-view .module-one-game-banner {
  background:var(--palette-page-deep) !important;
  border-color:#C9DCD2 !important;
}
#module-one-view .mastery-invite {
  background:var(--palette-mint) !important;
  border-color:#C6DBD0 !important;
}
/* Keep the memorisation cards readable, separate and clean. */
#module-one-view .item {
  background:var(--palette-white) !important;
  border-color:var(--palette-line);
  box-shadow:0 7px 24px rgba(23,60,70,.075);
}
#module-one-view .item.open {
  box-shadow:0 16px 34px rgba(23,60,70,.12);
}
#module-one-view .item .branch,
#module-one-view .item .verse {
  color:var(--palette-ink);
}
#module-one-view .item .branch {background:var(--palette-white);}
#module-one-view .item .verse {
  background:var(--palette-white);
  direction:rtl;
  unicode-bidi:plaintext;
}
#module-one-view .item .search-wrap,
#module-one-view .search-wrap {
  background:#F5F8F5 !important;
  border-color:var(--palette-line) !important;
}
/* Contrasting home feature header intentionally stays teal. */
#module-one-view .signature-header,
.game-palette-art {background:var(--palette-teal) !important;color:var(--palette-white) !important;}

/* Training game: match the learning palette but allow playful round indicators. */
body:has(.round-card) .panel,
body:has(.round-card) .round-card,
body:has(.round-card) .verse-shell,
body:has(.round-card) .review-list > li {
  background:var(--palette-white) !important;
  border-color:var(--palette-line);
}
body:has(.round-card) .panel {
  box-shadow:var(--palette-shadow);
}
body:has(.round-card) .round-card {
  box-shadow:0 7px 22px rgba(23,60,70,.07);
  border-right-color:var(--palette-teal);
}
body:has(.round-card) .round-card:hover {box-shadow:0 12px 26px rgba(23,60,70,.11);}
body:has(.round-card) .verse,
body:has(.round-card) .review-verse {
  color:var(--palette-ink) !important;
  direction:rtl;
  unicode-bidi:plaintext;
}
body:has(.round-card) .verse-shell {
  border-color:#C7D9D0;
}
/* Exam: the Arabic text stays on a white verse panel, never sage or dark. */
.mastery-wrap .card {
  background:var(--palette-white) !important;
  border-color:var(--palette-line) !important;
  box-shadow:var(--palette-shadow) !important;
}
.mastery-wrap .verse {
  background:var(--palette-white) !important;
  color:var(--palette-ink) !important;
  border:1.5px solid #B7D2C6 !important;
  box-shadow:inset 0 0 0 5px #F4F8F5;
  direction:rtl;
  unicode-bidi:plaintext;
}
.mastery-wrap .stat,
.mastery-wrap .feedback {
  background:var(--palette-mint);
}
/* All three pages: white interior cards and accessible visible focus indicators. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline:3px solid var(--palette-focus, #9A6518) !important;
  outline-offset:3px;
}
.copyright-footer {border-color:var(--palette-line) !important;}
@media(max-width:760px) {
  #module-one-view .welcome.juz-home {box-shadow:0 8px 23px rgba(23,60,70,.075) !important;}
  .mastery-wrap .card {box-shadow:0 7px 22px rgba(23,60,70,.065) !important;}
}
@media(prefers-contrast:more) {
  #module-one-view .item,
  .mastery-wrap .card,
  #module-one-view .welcome.juz-home {border-color:#87A8A0 !important;}
}


/* Quiet, permanently-visible verse count on each collapsed or expanded learning card. */
#module-one-view .item .ayah-count {
  display:inline-flex; align-items:center; white-space:nowrap;
  font-size:11px; font-weight:750; line-height:1.65;
  color:#315C62; background:#F1F6F3; border:1px solid #CADDD3;
  border-radius:8px; padding:2px 8px;
}
#module-one-view .item.same-surah .ayah-count {
  background:var(--accent-soft,#F1F6F3);
  color:var(--accent-dark,#315C62);
  border-color:var(--accent-border,#CADDD3);
}
#module-one-view .item .parent-top {display:flex; flex-wrap:wrap; gap:7px; align-items:center;}
#module-one-view .item .ayah-count {margin-inline-start:auto;}
@media(max-width:440px) {
  #module-one-view .item .parent-top {row-gap:8px;}
  #module-one-view .item .ayah-count {font-size:10.5px;}
}