/* Touch spacing applies to desktop book actions too. */
.detail-heading{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.detail-heading>.detail-back,.detail-heading>.volume-kicker{flex:1 0 100%}
.detail-heading>.reader-open,.detail-heading>.project-support-link,.detail-heading>.detail-favorite{margin:0!important;min-height:44px;box-sizing:border-box}
.detail-heading>.project-support-link{white-space:normal;text-align:center}
@media(max-width:719px){
 html{scroll-padding-top:12px}
 .screen-mode .header-inner{gap:8px;min-height:66px}
 .screen-mode .brand{min-width:0}.screen-mode .brand>span{min-width:0}
 .screen-mode .brand-title{font-size:14px;line-height:1.25}
 .screen-mode .menu-toggle{width:44px;height:44px}
 .screen-mode .language-control select{min-height:44px;font-size:13px}
 .screen-mode .main-nav{max-height:calc(100dvh - 80px);overflow-y:auto;overscroll-behavior:contain}
 .screen-mode .main-nav a{min-height:44px;display:flex;align-items:center;line-height:1.35;overflow-wrap:anywhere}
 .screen-mode .library-filters{display:flex;gap:10px;flex-wrap:wrap}
 .screen-mode .library-filters button{min-height:44px;font-size:13px;padding:9px 12px}
 .screen-mode .translation-overview{display:none}
 .screen-mode .volume-links{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
 .screen-mode .volume-links a{display:inline-flex;align-items:center;min-height:44px;margin:0;font-size:14px}
 .screen-mode .volume-card .volume-downloads{display:none!important}
 .screen-mode .detail-toolbar{gap:8px;flex-wrap:wrap}
 .screen-mode .detail-toolbar>.detail-back,.screen-mode .detail-toolbar>.reader-open{min-height:44px;display:inline-flex;align-items:center;font-size:13px}
 .screen-mode .detail-tabs button{min-height:44px;font-size:13px;padding:9px 12px}
 .screen-mode .detail-heading{gap:12px;padding:6px 0 14px;margin-bottom:14px}
 .screen-mode .detail-heading>.detail-favorite{flex:1 0 100%;min-height:46px}
 .screen-mode .detail-heading>.project-support-link{flex:1 1 140px;min-height:46px;font-size:14px;padding:10px 12px}
 .screen-mode .detail-copy .prose-window>p{font-size:16px;line-height:1.6}
 .screen-mode .footer-inner{gap:10px}
 .screen-mode .footer-inner a{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-size:12px;white-space:normal;text-align:center}
 .screen-mode .footer-inner .project-support-link{padding:8px 12px}
 .page-turner{gap:8px;padding-inline:12px}.page-turner button{min-height:44px}
 .account-shell{width:calc(100% - 28px)}.account-top{align-items:flex-start;gap:12px}.account-brand{font-size:19px;min-width:0}.account-brand span{overflow-wrap:anywhere}.account-brand img{width:38px;height:38px}
 .account-grid{grid-template-columns:minmax(0,1fr)}.account-item{min-width:0;padding:14px;gap:12px}.account-item>div{min-width:0}.account-item h3,.account-item p{overflow-wrap:anywhere}.account-actions{gap:12px}
 .support-main{padding-inline:16px}.support-header{padding:16px;gap:12px}.context{gap:12px}.context label{min-width:0;flex:1 1 140px}
 .support-main input,.support-main select,.support-main textarea{font-size:16px;min-height:44px}.support-main button{min-height:44px;margin:6px 12px 6px 0}.support-main article header{gap:10px}
 #filters label{min-width:0;flex:1 1 140px}#filters input,#filters select{max-width:100%;min-width:0;width:100%;font-size:16px}#filters button{flex:1 1 140px}
 .moderation-toolbar>label{min-width:0;flex:1 1 140px}.moderation-toolbar select{max-width:100%}.moderation-actions{gap:12px}.moderation-actions button{flex:1 1 140px;white-space:normal}
 body:has(> .reader-header){grid-template-rows:auto minmax(0,1fr)}
 .reader-header{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;min-height:112px;height:auto;align-items:center}
 .reader-header>.brand{grid-column:1/4;width:100%;min-width:0;max-width:none;gap:6px}
 .reader-header>.brand>span{min-width:0}.reader-header>.brand img{width:28px;height:28px;flex:none}
 .reader-header>.brand b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.reader-header>.brand small{display:none}
 .reader-header>.header-actions{grid-column:4/7;display:flex;justify-content:flex-end;gap:6px;min-width:0}
 .reader-header .header-actions button{min-width:40px;min-height:44px;padding:6px}
 .reader-header .header-actions select{width:78px;max-width:78px;min-height:44px;padding:6px 3px;font-size:13px}
 .reader-header>.project-support-link{grid-column:span 2;min-height:44px;min-width:0;max-width:none;margin:0!important;padding:7px 5px;font-size:12px;white-space:normal;overflow-wrap:anywhere;text-align:center}
 #contents{top:calc(112px + env(safe-area-inset-top,0px));width:min(340px,calc(100vw - 20px));max-width:100vw}
 .settings{top:calc(112px + env(safe-area-inset-top,0px));max-height:calc(100dvh - 130px);overflow:auto}
 .reading-desk{padding-inline:6px}.paper{padding:18px 17px}.reader-bottom{gap:8px}.reader-bottom button{min-height:44px;min-width:68px}
 #reading-content[dir=rtl] p[dir=ltr]{text-align:left;unicode-bidi:isolate}
}
@media(max-width:719px) and (min-height:600px){
 .screen-mode .volume-card,html[data-compact=true] .volume-card{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(100px,1fr) auto}
 .screen-mode .volume-card>.volume-art,html[data-compact=true] .volume-card>.volume-art{padding:10px 16px;border-inline-end:0;border-bottom:1px solid var(--line)}
 .screen-mode .volume-card .volume-body,html[data-compact=true] .volume-card .volume-body{padding:10px 14px}
 .screen-mode .volume-card h3,html[data-compact=true] .volume-card h3{font-size:clamp(17px,5vw,22px);line-height:1.22;-webkit-line-clamp:2;min-height:0;margin:5px 0}
 .screen-mode .volume-card .translation-status{font-size:12px;line-height:1.35;margin:5px 0}
 .screen-mode .volume-card .volume-pages{margin:3px 0;font-size:12px}
 .screen-mode .volume-card .volume-kicker{font-size:11px;gap:8px}
}
@media(max-width:359px){
 .reader-header>.brand{grid-column:1/3}.reader-header>.header-actions{grid-column:3/7}
 .reader-header>.brand img{display:none}.reader-header>.brand b{font-size:12px}
 .screen-mode .brand-title{font-size:12px}.screen-mode .language-control select{max-width:96px}
 .screen-mode .footer-inner{gap:8px}.screen-mode .footer-inner a{font-size:11px}.screen-mode .footer-inner .project-support-link{font-size:11px;padding-inline:8px}
 .screen-mode .detail-toolbar .detail-back{font-size:12px}.screen-mode .detail-tabs button{padding-inline:9px}
}

@media(max-width:719px){
 .screen-mode .volume-detail[data-detail-view="info"] .detail-copy{overflow-y:auto;overscroll-behavior:contain;display:block;min-height:0}
 .screen-mode .volume-detail[data-detail-view="info"] .prose-window{flex:none;overflow:visible;height:auto}
}

/* Whole cover is the catalogue link; retain the existing image fit. */
.catalogue-cover-link{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;width:100%;height:100%;text-decoration:none;cursor:pointer}
.catalogue-cover-link:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(max-width:1000px){
 body:has(>.reader-header){grid-template-rows:auto minmax(0,1fr)}
 .reader-header{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;min-height:112px;height:auto}
 .reader-header>.brand{grid-column:1/4;min-width:0;width:100%;max-width:none;gap:6px}
 .reader-header>.brand>span{min-width:0}.reader-header>.brand img{width:28px;height:28px;flex:none}
 .reader-header>.brand b{font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.reader-header>.brand small{display:none}
 .reader-header>.header-actions{grid-column:4/7;display:flex;justify-content:flex-end;gap:6px;min-width:0}
 .reader-header .header-actions button{min-width:44px;min-height:44px;padding:6px}
 .reader-header .header-actions select{width:78px;max-width:78px;min-height:44px;padding:6px 3px;font-size:13px}
 .reader-header>.project-support-link{grid-column:span 2;min-height:48px;min-width:0;max-width:none;margin:0!important;padding:7px 5px;font-size:12px;white-space:normal;overflow-wrap:anywhere;text-align:center}
 #contents,.settings{top:var(--reader-header-height,117px)}
 .settings{max-height:calc(100dvh - var(--reader-header-height,117px) - 8px);overflow:auto}
 #toc a{min-height:44px;display:flex;align-items:center}
 #contents .panel-title button,.settings .panel-title button{min-width:44px;min-height:44px}
 #reading-content .fb-stanza{break-inside:auto}
 #reading-content .fb-v{break-inside:avoid}
 .image-tools button{min-width:44px;min-height:44px}
 .image-dialog[open]{grid-template-rows:60px minmax(0,1fr)}
 .reader-bottom button{min-height:44px;min-width:76px}
 .reader-bottom{padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media(max-width:359px){.reader-header>.brand{grid-column:1/3}.reader-header>.header-actions{grid-column:3/7}.reader-header>.brand img{display:none}.reader-header>.brand b{font-size:12px}}
@media(max-width:1000px) and (max-height:450px){
 .reader-header{min-height:0;padding:4px 12px;gap:4px}
 .reader-header>.project-support-link{min-height:44px;padding:4px;font-size:11px}
 .reading-desk{grid-template-rows:0 minmax(0,1fr) 50px}.reader-bottom{gap:8px}.paper{padding:10px 16px}
}

/* The page columns remain LTR; Arabic text blocks choose their own writing direction. */
html[lang="ar"] #reading-content [dir="auto"]{text-align:start;unicode-bidi:plaintext}
html[lang="ar"] #reading-content [dir="ltr"],html[lang="ar"] #reading-content .notation{direction:ltr;text-align:left;unicode-bidi:isolate}
@media(max-width:719px){
 body:has(.volume-detail[data-detail-view="cover"]:not([hidden])) .site-footer{display:none}
 .screen-mode .volume-detail[data-detail-view="cover"]{padding:4px 0;gap:4px}
 .screen-mode .volume-detail[data-detail-view="cover"] .detail-layout{width:calc(100% - 12px)}
 .screen-mode .volume-detail[data-detail-view="cover"] .volume-art{padding:0;border:0;max-height:100%;height:100%;align-self:stretch;gap:0}
 .screen-mode .volume-detail[data-detail-view="cover"] .detail-cover-caption{display:none}
 .screen-mode .volume-detail[data-detail-view="cover"] .detail-cover-zoom{height:100%;width:100%;min-height:0}
 .screen-mode .volume-detail[data-detail-view="cover"] .detail-cover-zoom img{width:100%;height:100%;object-fit:contain}
 .screen-mode .volume-detail[data-detail-view="cover"] .detail-toolbar{gap:6px;width:calc(100% - 16px)!important}
 .screen-mode .volume-detail[data-detail-view="cover"] .detail-tabs button{min-height:44px;padding:6px 9px}
}

/* Keep the paper in row two when the chapter bar is hidden on short screens. */
.reading-desk>.paper{grid-row:2}.reading-desk>.reader-bottom{grid-row:3}