/* Respond to usable CSS viewport space, including browser zoom. */
:root{--gutter:clamp(16px,3vw,40px)}
.studio-header,.studio-nav{flex-wrap:wrap}
.brand,.studio-nav,.upload-panel>*,.reader-layout>*,.library-toolbar>*{min-width:0}
.brand-name{overflow-wrap:anywhere}
.studio-nav{display:flex;align-items:center;gap:clamp(12px,2vw,28px)}
.upload-panel{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);padding-block:clamp(24px,5vh,65px)}
.upload-card{padding:clamp(20px,2.5vw,32px)}
select,textarea{max-width:100%}
.library-page .books-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),291px))}
.library-page .books-grid.is-list{grid-template-columns:minmax(0,1fr)}
.library-usage{max-width:100%;flex-wrap:wrap;gap:12px}
.reader-heading,#reader-subtitle,.editor-entry,.share-section{overflow-wrap:anywhere}
.reader .book-viewport{min-width:0}
dialog{max-width:calc(100% - 24px);max-height:calc(100dvh - 24px);overscroll-behavior:contain}
.preview-dialog[open]{max-height:calc(100dvh - 24px)}
.publish-footer,.share-popup-footer,.preview-modal-footer{flex-wrap:wrap}
.editor-entry>*{min-width:0}
.editor-entry button{flex-shrink:0}
.editor-mode .reader .reader-heading{padding:10px 14px;min-height:0}
.editor-mode .reader .reader-heading h1{font-size:18px;line-height:1.35;margin:0}
.editor-mode .reader #reader-subtitle{font-size:14px;line-height:1.4;margin:4px 0 0}

@media(max-width:1100px){
 .editor-mode{--editor-header:100px}
 .editor-mode .studio-header{height:var(--editor-header);align-content:center;gap:8px 20px}
 .editor-mode .editor-sidebar{width:220px}
 .editor-mode main{margin-left:220px}
 .editor-mode .editor-nav{gap:12px}
 .editor-mode .editor-nav a{font-size:12px}
 .editor-mode .reader-heading{position:static;max-width:none;margin:0 0 8px;padding:8px 12px}
 .editor-mode .reader-heading h1{font-size:20px;margin:0}
 .editor-mode #reader-subtitle{font-size:14px}
 .editor-mode .reader .book-viewport{height:calc(100dvh - 230px);min-height:160px}
 .editor-mode #status-box{left:calc(50% + 110px)}
 .reader .view-controls{padding:5px;gap:2px}
 .library-toolbar{gap:10px}
 .library-usage{font-size:14px;padding:10px 14px}
}
@media(max-width:900px){
 .upload-panel{grid-template-columns:minmax(0,1fr);gap:28px;min-height:0;max-width:620px;margin:auto}
 .intro h1{font-size:clamp(34px,5.5vw,48px);margin:16px 0}
 .intro p{font-size:16px;margin:20px 0}
 .features{flex-direction:row;flex-wrap:wrap;gap:10px 18px;font-size:12px}
 .drop-zone{padding:22px 12px;margin-block:20px}
 .share-popup .share-body{padding:24px 18px;min-height:0}
}
@media(max-width:760px){
 .studio-header{padding:14px var(--gutter);gap:12px}
 .studio-header .brand img{width:56px;height:45px}
 .studio-header .brand-name{font-size:16px}
 .studio-nav{gap:10px 18px}
 .studio-link{font-size:12px}
 .studio-link span{margin-left:5px}
 .embedded-preview .reader-heading{padding:12px 16px;min-height:0;margin:0;max-width:100%}
 .embedded-preview .reader-heading h1{font-size:18px;line-height:1.4}
 .embedded-preview .reader-preview{padding-top:48px}
 .embedded-preview .reader .view-controls{top:6px;right:10px}
 .embedded-preview .reader .book-viewport{height:calc(100dvh - 170px);min-height:120px}
 .reader .reader-extras{max-width:85px}
 .reader .reader-extras details{max-width:85px;padding:6px;font-size:11px}
 .library-page .library-toolbar .search-field{flex:1 1 160px;max-width:none}
 .library-page .library-toolbar .filter-field{flex:1 1 130px;min-width:0}
 .library-page .library-toolbar .filter-field select{min-width:0;width:100%}
 .library-usage{margin-left:0}
}
@media(max-width:700px){
 .editor-mode .studio-header{position:sticky;top:0;height:auto;min-height:90px;flex:none}
 .editor-mode .editor-nav{margin-left:0;flex-wrap:wrap}
 .editor-mode .editor-sidebar{position:relative;top:auto;width:100%;margin-top:0;max-height:220px;flex:none}
 .editor-mode main{margin:0;width:100%}
 .editor-mode .reader-preview{padding-top:48px}
 .editor-mode .reader .view-controls{position:absolute;top:6px;right:10px}
 .editor-mode .reader .book-viewport{height:clamp(220px,55dvh,580px);min-height:0}
 .editor-mode #status-box{left:50%}
 .editor-dialog{padding:20px 16px}
 .library-main{padding-bottom:40px}
}
@media(max-width:420px){
 .studio-header .studio-nav{width:100%;justify-content:space-between}
 .upload-card{padding:20px 16px;border-radius:18px}
 .intro h1{font-size:34px}
 .library-page .books-grid{grid-template-columns:minmax(0,1fr)}
 .publish-fields{grid-template-columns:minmax(0,1fr);gap:8px;padding:18px 16px}
 .publish-fields label,.publish-fields .field-label{text-align:left}
 .preview-modal-footer button,.preview-modal-footer a{white-space:normal}
 .share-popup .share-popup-footer .share-action{white-space:normal}
}
@media(max-height:650px) and (min-width:701px){
 .editor-mode .reader .book-viewport{min-height:120px}
 .upload-panel{padding-block:24px}
 .share-popup .share-body{padding-block:24px;min-height:0}
 .share-popup .share-tabs{padding-block:10px}
 #password-fields{min-height:0}
 dialog.editor-dialog{max-height:calc(100dvh - 24px)}
}