/* Decoration has its own preference, independent of the chapter layout. */
html[data-quran-decorations="on"]{background:#3f4542!important}
html[data-quran-decorations="on"]::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url("../images/home-geometric-tile.svg?v=20261009-1") repeat center top;
  background-size:clamp(320px,32vw,520px) clamp(320px,32vw,520px);
  opacity:.055;
}
html[data-quran-decorations="on"] body,
html[data-quran-decorations="on"] body :is(main,.shell,.paper,.page,.page-shell,.content,.content-wrap,.container,.section,.placeholder,.surah-shell,.illuminated-page,.surah-nav,.auth-shell,.topbar,.main-nav,.brand-cluster,.head,.hero-head,.closing,.qv-heading,.qr-heading,.actions,.site-footer,.footer-inner),
html[data-quran-decorations="on"] body :is(#home,#homeQuickActions,#surahs,#surahGrid,.section-heading,#qr-library,#qr-saved,#qr-cards){background:transparent!important}
/* The whole reading surface stays plain, including translations and gaps. */
html[data-quran-decorations="on"] body :is(.quran-verses-panel,.qv-verse-body,.ayah-list){background:#3f4542!important;background-image:none!important}
html body .brand-cluster .brand-title,
html body [data-header-basmala]{color:#ffe59a!important;text-shadow:0 0 12px rgba(255,215,92,.33),0 0 26px rgba(255,215,92,.14)!important}
html body .surah-toolbar{margin-bottom:clamp(32px,4vw,48px)!important;padding-bottom:10px!important}
html body .surah-nav [hidden]{display:none!important}
@media print{html[data-quran-decorations="on"]::before{display:none}}

/* Collapse decorative artwork only; navigation and Quran content remain. */
html[data-quran-decorations="off"][data-quran-page="home"] body .hero,
html[data-quran-decorations="off"] body .surah-crown{display:none!important}
html body #surahs #decorationToggle{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;
  width:44px;height:44px;padding:7px;border-radius:10px;cursor:pointer;
  color:#dbc48f!important;background:#3f4542!important;border:1px solid rgba(219,196,143,.28)!important;
  box-shadow:4px 5px 12px rgba(0,0,0,.22),-2px -2px 6px rgba(255,255,255,.045);
  transition:border-color .15s,box-shadow .15s;
}
html body #surahs #decorationToggle svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:15;opacity:.56}
html body #surahs #decorationToggle[aria-pressed="true"]{
  color:#ffe59a!important;border-color:#dbc48f!important;
  box-shadow:inset 0 0 13px rgba(219,196,143,.13),0 0 0 1px rgba(219,196,143,.14),4px 5px 12px rgba(0,0,0,.22);
}
html body #surahs #decorationToggle[aria-pressed="true"] svg{opacity:1}
html body #surahs #decorationToggle:focus-visible{outline:2px solid #ffe59a;outline-offset:3px}
/* Keep the list button beside decoration in either writing direction. */
html[dir="ltr"] body #surahs .view-switch{flex-direction:row-reverse}
html body #surahs .section-controls{flex-wrap:nowrap!important;gap:8px;min-width:0}
html body #surahs #orderToggle{min-width:0;flex-shrink:1}
html body #surahs #orderLabel{min-width:0;overflow:hidden;text-overflow:ellipsis}
html body #surahs #orderToggle .order-icon{flex-shrink:0}
@media(max-width:420px){html body #surahs{padding-inline:16px!important}}
#appearanceNotice{
  position:fixed;z-index:10000;bottom:24px;inset-inline:16px;margin-inline:auto;
  width:fit-content;max-width:min(520px,calc(100% - 32px));padding:12px 18px;
  border:1px solid rgba(219,196,143,.5);border-radius:12px;background:#303b34;color:#fff4d4;
  font:inherit;font-size:14px;line-height:1.8;text-align:center;box-shadow:0 8px 28px rgba(0,0,0,.28);pointer-events:none;
}
#appearanceNotice[hidden]{display:none}
@media(prefers-reduced-motion:reduce){html body #surahs #decorationToggle{transition:none}}