/* Shared phone ergonomics: Android and iPhone. */
:root{--focus-ring:#967334}
html[data-theme=dark]{--focus-ring:#dfcb90}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}
.settings-gear svg{color:inherit}
button,a,input,select{-webkit-tap-highlight-color:transparent}
@media(max-width:780px){
 .workspace header{padding-top:4px;padding-bottom:8px}
 main{padding-top:18px;padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
 .page-heading{margin-bottom:22px}
 .page-heading p{font-size:14px;line-height:1.65}
 .page-heading .eyebrow{font-size:10px;letter-spacing:1.6px;margin-bottom:10px}
 .workspace header strong{font-size:12px;line-height:1.5}
 .donate-link,.settings-gear{min-height:48px}
 .settings-gear{width:48px;flex-basis:48px}
 #nav{bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:5px;border-radius:25px}
 #nav a{min-height:54px;font-size:11px;font-weight:600;gap:5px}
 :is(.btn,.text-button,.filters button,.donation-switch button,.quran-view-switch a){min-height:48px}
 .text-button{display:inline-flex;align-items:center;justify-content:center}
 input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px;min-height:48px;max-width:100%}
 .fine{font-size:12px;line-height:1.7}
 .prayer-table-head{font-size:11px;letter-spacing:1px}
 .prayer-row{min-height:64px}
 .prayer-spotlight{padding:26px 24px;background:linear-gradient(125deg,#154c3e,#22624d)}
 .prayer-spotlight h2{font-weight:500}
 .class-session{padding-top:22px;padding-bottom:22px}
 .surah-card{min-height:80px}
 .mushaf-tools{align-items:center}
}
@media(prefers-reduced-motion:no-preference){
 #nav a,.btn,.donate-link{transition:background-color .18s ease,color .18s ease}
}

.giving-shortcuts{display:flex;gap:8px}.giving-shortcuts .donate-link{white-space:nowrap}@media(max-width:780px){.workspace>header{flex-wrap:wrap}.workspace>header>div:first-child{flex-basis:100%;max-width:none;margin-bottom:6px}.workspace>header strong{max-width:none}.giving-shortcuts{flex:1}.giving-shortcuts .donate-link{flex:1}.settings-gear{margin-left:auto}}

/* Compact phone giving: keep the provider checkout intact and remove duplicate chrome. */
@media(max-width:600px){
 .donation-embedded-heading{padding:8px 12px;flex-direction:row;justify-content:flex-end;gap:0;min-height:44px}
 .donation-embedded-heading>div{display:none}
 .donation-embedded-heading a{display:inline-flex;align-items:center;min-height:28px;font-size:12px;margin:0}
 .donation-switch button{min-height:44px;padding:8px 12px;font-size:14px}
 .donation-embedded{border-radius:14px}
}

@media(max-width:600px){
 body:has(.donation-frame) .workspace>header{display:none}
 body:has(.donation-frame) .sidebar{padding-top:12px;padding-bottom:8px}
 main:has(.donation-frame){padding-top:8px}
 main:has(.donation-frame) .page-heading{margin-bottom:12px}
 main:has(.donation-frame) .page-heading .eyebrow,main:has(.donation-frame) .page-heading p{display:none}
 main:has(.donation-frame) .page-heading h1{font-size:26px;margin:0;line-height:1.2}
 main:has(.donation-frame) .donation-switch{margin:0 0 12px;padding:4px;gap:4px}
}

/* Reserve a separate viewport lane for navigation during embedded checkout. */
@media(max-width:780px){
 body:has(.donation-frame){overflow:hidden}
 body:has(.donation-frame) .app{min-height:0;height:calc(100dvh - 90px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior-y:contain;scroll-padding-bottom:20px}
 body:has(.donation-frame) main{padding-bottom:24px}
 body:has(.donation-frame) footer{padding-bottom:24px}
}

@media(max-width:780px){
 body:has(.donation-frame) .app{height:calc(var(--checkout-visible-height,100dvh) - 90px - env(safe-area-inset-bottom,0px))}
 body.checkout-keyboard:has(.donation-frame) .app{position:relative;top:var(--checkout-offset,0px);height:var(--checkout-visible-height,100dvh);scroll-padding-bottom:24px}
 body.checkout-keyboard #nav{display:none}
}

/* Logical alignment for the Arabic interface; scripture retains its own direction. */
html[dir=rtl] .setting-row,html[dir=rtl] .page-heading{text-align:right}
html[dir=rtl] .brand-wordmark{direction:ltr;text-align:left}
html[dir=rtl] .settings-gear{margin-left:0;margin-right:auto}
html[dir=rtl] :is(input[type=number],input[type=email],input[type=tel]){direction:ltr}
html[dir=rtl] body{font-family:Tahoma,'Arial',sans-serif}
@media(max-width:780px){html[dir=rtl] .settings-gear{margin:0;flex-shrink:0}html[dir=rtl] .giving-shortcuts{min-width:0}html[dir=rtl] .giving-shortcuts .donate-link{min-width:0;padding-inline:12px}}

/* Shared giving colors for the website reader. */
/* Shared by the iPhone and Android app: distinct giving actions, named in text. */
html .giving-shortcuts .donate-link[href="#donate/masjid"]{background:#165445;border-color:#165445;color:#fffaf0}
html .giving-shortcuts .donate-link[href="#donate/zakat"]{background:#d9bc72;border-color:#9a7b36;color:#173e32}
html[data-theme=dark] .giving-shortcuts .donate-link[href="#donate/masjid"]{background:#b9d7b9;border-color:#b9d7b9;color:#102b24}
html[data-theme=dark] .giving-shortcuts .donate-link[href="#donate/zakat"]{background:#d9bc72;border-color:#d9bc72;color:#173e32}
.giving-shortcuts .donate-link:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(hover:hover){.giving-shortcuts .donate-link:hover{box-shadow:inset 0 0 0 2px currentColor}}
.giving-shortcuts .donate-link:active{box-shadow:inset 0 0 0 2px currentColor}
@media(forced-colors:active){html .giving-shortcuts .donate-link{border:2px solid ButtonText;color:ButtonText;background:ButtonFace}}