/* At tablet/desktop widths the existing tools retain their original layout. */
.phone-tools-toggle,.phone-tools-close{display:none}
.reader-tool-panel{display:contents}
@media(max-width:600px){
 #reader .reader-header{min-height:56px;padding:6px 12px;z-index:20}
 #reader .reader-header .close{width:44px;height:44px;flex-basis:44px}
 #reader{scroll-padding-top:115px}
 #readerBody{padding:16px 18px 24px}
 #readerBody>h2{font-size:22px;line-height:1.6;margin:13px 0 16px}
 #reader .annotation-toolbar{position:sticky;top:56px;z-index:19;margin:12px 0 20px;padding:0;border:1px solid #dce3d3;border-radius:9px;min-height:44px;background:#fffef8}
 .phone-tools-toggle{width:100%;min-height:44px;display:flex;align-items:center;gap:8px;padding:10px 12px;background:#fffef8;color:#345a47;text-align:left;font-size:13px;border-radius:9px}
 .phone-tools-toggle>.ui-icon{width:17px;height:17px}
 .phone-tools-toggle>span:first-of-type{font-weight:500;white-space:nowrap}
 .phone-tools-toggle .phone-tools-caption{font-size:11px;color:#8b977d;margin-left:auto}
 .phone-tools-toggle>.ui-icon:last-child{width:13px;height:13px;transform:rotate(90deg);transition:transform .15s}
 .phone-tools-open .phone-tools-toggle>.ui-icon:last-child{transform:rotate(-90deg)}
 #reader .reader-tool-panel{display:none;position:absolute;top:calc(100% + 6px);left:-1px;right:-1px;padding:14px;background:#fffef8;border:1px solid #dce3d3;border-radius:10px;box-shadow:0 10px 25px #263e3620;max-height:min(52dvh,340px);overflow-y:auto;overscroll-behavior:contain}
 #reader .phone-tools-open .reader-tool-panel{display:block}
 #reader .reader-tool-panel .annotation-actions{gap:8px}
 #reader .reader-tool-panel .annotation-actions button{min-height:44px;padding:10px 12px;font-size:12px}
 #reader .reader-tool-panel #annotationStatus{font-size:11px;line-height:1.7;margin:12px 0}
 #reader .reader-tool-panel>details{margin:12px 0;max-height:150px}
 #reader .reader-tool-panel>details>summary{font-size:12px;min-height:40px;display:flex;align-items:center}
 #reader .reader-tool-panel #readerRecords{font-size:12px;padding:10px 12px;min-height:42px;margin:5px 8px 0 0}
 #reader .phone-tools-close{display:inline-flex;min-height:42px;padding:10px 12px;font-size:12px;margin-top:5px}
 #reader .annotation-row{flex-wrap:wrap;gap:8px;font-size:12px}
 #reader .annotation-row>span{width:100%}
 #reader .record-jump-target{scroll-margin-top:125px}
}