/* Responsive screen layer. Reflow is a screen mode; all source styles and print rules remain intact. */
@media screen {
  html.reader-reflow #reading-area .kit-document {padding:12px;scrollbar-gutter:auto;scroll-padding-block:18px;}
  html.reader-reflow #reading-area .sheet {width:100%;max-width:860px;height:auto;min-height:0;overflow:visible;margin:0 auto 20px;}
  html.reader-reflow #reading-area .sheet .sheet-canvas,
  html.reader-reflow #reading-area .sheet .source-root,
  html.reader-reflow #reading-area .sheet .source-body,
  html.reader-reflow #reading-area .sheet .viewer,
  html.reader-reflow #reading-area .sheet .viewport {
    position:static!important;inset:auto!important;display:block!important;
    width:100%!important;height:auto!important;min-width:0!important;min-height:0!important;
    max-width:none!important;max-height:none!important;transform:none!important;zoom:1!important;
    margin:0!important;padding:0!important;overflow:visible!important;
  }
  html.reader-reflow #reading-area .sheet .source-root .source-body .page {
    position:relative!important;inset:auto!important;width:100%!important;height:auto!important;
    min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;
    transform:none!important;zoom:1!important;margin:0!important;padding:24px!important;
    overflow:visible!important;box-sizing:border-box!important;
  }
  html.reader-reflow #reading-area .sheet .source-root {--reader-body-size:22px;--reader-page-padding:24px;}
  html.reader-reflow #reading-area .source-root img {max-width:100%;height:auto;}
  html.reader-reflow #reading-area .source-root [id] {scroll-margin-block-start:18px;}
}
@media screen and (max-width:1100px) {
  html {height:100%;height:100dvh;overflow:hidden;}
  body {height:100%;height:100dvh;overflow:hidden;}
  .reader-header {padding-top:max(8px,env(safe-area-inset-top));padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right));gap:8px;}
  .reader-heading {min-width:0;}
  .reader-controls {flex-direction:column;gap:8px;padding:8px max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));}
  .document-switch {width:100%;max-width:520px;}
  .document-switch button {flex:1;min-width:0;min-height:44px;white-space:normal;padding:8px;}
  .page-controls {width:100%;max-width:520px;gap:6px;}
  .page-controls > button {min-width:44px;min-height:44px;}
  #switch-view {margin-left:auto;white-space:nowrap;}
  .options-panel {max-height:calc(100dvh - var(--header-height) - var(--controls-height) - 20px);overflow-y:auto;overscroll-behavior:contain;}
}
@media screen and (max-width:520px) {
  .reader-heading .book-title {font-size:22px;}
  #document-title {font-size:13px;line-height:1.25;}
  .reader-controls .document-switch button {font-size:14px;}
  .page-controls .direction-label {display:none;}
  .page-controls {gap:4px;justify-content:space-between;}
  .page-controls > button:not(#switch-view) {font-size:20px;}
  #switch-view {margin-left:4px;font-size:14px;}
  #page-number {width:60px;font-size:16px;}
  #page-total {font-size:13px;min-width:30px;}
  html.reader-reflow #reading-area .kit-document {padding:8px;}
  html.reader-reflow #reading-area .sheet .source-root .source-body .page {padding:20px 16px!important;}
  html.reader-reflow #reading-area .sheet .source-root {--reader-page-padding:16px;}
}
@media screen and (max-height:520px) and (min-width:521px) {
  .reader-controls {flex-direction:row;gap:16px;}
  .document-switch {width:auto;flex:1;}
  .page-controls {width:auto;flex:1;}
  .page-controls .direction-label {display:none;}
}