/* Larger, browser-width reading with consistent native-select chevrons. */
:root{font-size:17px;--context-width:400px;--book-gap:24px;--select-placement:right 16px center;--select-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23b4c6c2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
select,.language-label select,body.is-reading .language-label select,.toolbar-primary select,.context-body .field select{appearance:none;-webkit-appearance:none;background-image:var(--select-chevron);background-repeat:no-repeat;background-size:16px 16px;background-position:var(--select-placement);padding-inline:16px 48px;min-height:48px;line-height:1.45}
html[dir=rtl]{--select-placement:left 16px center}
select{font-size:16px}.field{font-size:15px}.source{font-size:13px;line-height:1.7}.language-label select{width:144px;min-width:144px;max-width:160px;font-size:15px}.top nav a{font-size:14px;min-height:44px}.header-actions{gap:14px}
dialog{font-size:17px}.dialog-head h2{font-size:28px}.check{font-size:15px;line-height:1.7}.check input{width:20px;height:20px}.dialog-head{gap:20px}
body.is-reading main{max-width:none;padding:24px 32px}.reader-heading{margin-bottom:20px;min-height:58px}.reader-heading h1{font-size:32px;line-height:1.25}.reader-heading p{font-size:15px;line-height:1.6}.reader-heading .back-link{font-size:14px}.reader-heading>button{font-size:15px;padding:12px 18px;min-height:48px}
.reader-toolbar{gap:16px;margin-bottom:20px;padding:6px 0 18px}.toolbar-primary{flex:1 1 360px;gap:14px}.toolbar-primary label{font-size:14px}.toolbar-primary select{font-size:16px;width:clamp(220px,18vw,340px);max-width:340px;min-width:200px;min-height:52px}.toolbar-primary button,.toolbar-actions button{font-size:15px;min-height:48px;padding:12px 16px}.toolbar-actions{gap:10px}.reader-more>summary{font-size:15px;min-height:48px;padding:12px 16px}.reader-menu{width:280px}.reader-menu button,.reader-menu a{font-size:15px}.reader-toolbar>.mode-switch{gap:6px}.reader-toolbar>.mode-switch button{font-size:14px;min-width:90px;min-height:46px;padding:10px 14px}
body.is-reading .reader-workspace{gap:24px;--reader-leaf-width:600px}.reader-workspace.has-context{grid-template-columns:minmax(0,1fr) var(--context-width)}.reader-center{max-width:none}.reader-paper.mode-mushaf{max-width:calc(var(--reader-leaf-width) * 2 + var(--book-gap));gap:var(--book-gap)}.reader-paper.mode-mushaf:not(.spread){max-width:var(--reader-leaf-width)}.mushaf-sheet{padding:24px 18px 18px}.page-navigation{max-width:calc(var(--reader-leaf-width) * 2 + var(--book-gap));gap:16px;margin-top:20px}.page-navigation button{font-size:15px;min-height:48px;padding:12px 18px}.reader-hint{max-width:1000px;font-size:13px}
#verse-context{max-height:calc(100dvh - 40px)}.context-head{padding:24px;gap:16px}.context-head .eyebrow{font-size:12px}.context-head h2{font-size:24px;line-height:1.4}.context-page-label{font-size:14px;margin-top:6px}.context-body{padding:24px}.context-verse .arabic{font-size:30px;line-height:2}.context-verse .translation{font-size:18px;line-height:1.85}.context-verse .source{font-size:13px}.context-commentary{font-size:18px;line-height:1.85}.context-commentary h2,.context-commentary h3,.context-commentary h4{font-size:21px}.context-scope{padding:14px 18px 8px;gap:8px}.context-scope button{font-size:13px;min-height:42px;padding:10px 12px}.context-tabs{padding-inline:20px;gap:22px}.context-tabs button{font-size:16px;min-height:48px}.context-footer{padding:14px 18px}.context-footer button,.context-more>summary{font-size:13px;min-height:44px;padding:10px 12px}.context-more a{font-size:14px}.context-body .field,.context-body .field select{font-size:15px}.context-ref,.context-source-ref{font-size:14px}
@media(min-width:1700px){body.is-reading .reader-workspace[data-reading-mode=mushaf],body.is-reading .reader-workspace[data-reading-mode=mushaf].has-context{grid-template-columns:minmax(0,1fr) var(--context-width)}body.is-reading .reader-workspace[data-reading-mode=mushaf]>.reader-center{grid-column:1;grid-row:1}body.is-reading .reader-workspace[data-reading-mode=mushaf]>#verse-context,body.is-reading .reader-workspace[data-reading-mode=mushaf].has-context>#verse-context{grid-column:2;grid-row:1;width:var(--context-width);justify-self:stretch}}
@media(max-width:1000px){body.is-reading main{padding:22px 24px}.reader-workspace.has-context{grid-template-columns:minmax(0,1fr)}#verse-context{width:auto;height:64dvh;max-height:64dvh}#verse-context.context-expanded{height:90dvh;max-height:90dvh}.context-head{padding:0 22px 18px}.reader-heading h1{font-size:28px}.reader-toolbar{gap:12px}.toolbar-primary{flex-basis:320px}.toolbar-primary select{min-width:180px;max-width:260px}.toolbar-primary button,.toolbar-actions button,.reader-more>summary{font-size:14px}.context-grip{min-height:30px;height:30px}}
@media(max-width:580px){body.is-reading .top{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:12px 14px;gap:10px 12px}body.is-reading .top .brand>span{display:block;font-size:23px}body.is-reading .top .brand .preview{display:none}body.is-reading .top .brand img{width:32px;height:32px}body.is-reading .top nav{grid-column:1/-1;grid-row:2;width:100%;justify-content:center}body.is-reading .top nav a{font-size:13px;min-height:42px;min-width:70px;flex:1}body.is-reading .header-actions{gap:8px}body.is-reading .language-label select,.language-label select{font-size:14px;width:128px;min-width:128px;max-width:144px;padding-inline:14px 44px;min-height:46px}body.is-reading main{padding:18px 14px}.reader-heading{gap:10px;min-height:50px;margin-bottom:14px}.reader-heading h1{font-size:25px}.reader-heading p{font-size:12px}.reader-heading .back-link{font-size:12px}.reader-heading>button{max-width:100px;font-size:12px;padding:8px 10px;min-height:46px}.reader-toolbar{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 8px;margin-bottom:16px;padding:4px 0 14px}.toolbar-primary{width:auto;flex-basis:auto;gap:6px}.toolbar-primary label{display:none}.toolbar-primary button{font-size:13px;padding:10px;min-height:46px;white-space:nowrap}.toolbar-actions{gap:6px;justify-content:flex-end;flex-wrap:wrap}.toolbar-actions button{font-size:13px;padding:10px;min-height:46px}.toolbar-actions>button:first-child{width:42px;padding:9px}.reader-more>summary{font-size:13px;padding:12px 10px;min-height:46px}.reader-toolbar>.mode-switch{width:100%;gap:6px}.reader-toolbar>.mode-switch button{font-size:13px;min-width:0;flex:1;min-height:42px;padding:9px 12px}.mushaf-sheet{padding:20px 12px 16px}.page-navigation{gap:6px}.page-navigation button{font-size:12px;padding:10px 8px;min-height:44px}.reader-hint{font-size:12px}.context-head h2{font-size:22px}.context-head .eyebrow{font-size:11px}.context-page-label{font-size:12px}.context-body{padding:20px}.context-verse .arabic{font-size:28px}.context-verse .translation,.context-commentary{font-size:17px}.context-scope button{font-size:12px}.context-footer button,.context-more>summary{font-size:12px}dialog{font-size:16px}.dialog-head h2{font-size:24px}}
@media(max-width:580px){.top{column-gap:8px}.header-actions{gap:6px}.language-label select{width:124px;min-width:124px;max-width:124px}}
@media(max-width:360px){.top .brand>span{font-size:22px}body.is-reading .top .brand>span{display:none}.toolbar-primary button,.toolbar-actions button,.reader-more>summary{font-size:12px}.reader-heading h1{font-size:22px}.reader-heading .back-link{font-size:11px}.reader-heading>button{max-width:88px;font-size:11px}.page-navigation button{font-size:11px}}
@media(forced-colors:active){select,.language-label select,body.is-reading .language-label select,.toolbar-primary select,.context-body .field select{appearance:auto;background-image:none;padding-inline-end:12px}}