/* A focused reading layout, limited to the Charter and Municipal Code page viewer. */
:root body .document-reader .document-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:8px;margin:0 0 4px}
:root body .document-reader .document-toolbar h1{font-size:18px;line-height:1.2;margin:0;min-width:0;letter-spacing:0;word-spacing:normal}
:root body .document-reader :is(.document-toolbar,.reader-controls,.reader-details) .btn{height:44px!important;min-height:44px!important;font-size:13px!important;padding:6px 8px;line-height:1.2}
:root body .document-reader .reader-details{margin:0 0 4px;padding:0;max-height:35dvh;overflow:auto;border:0}
:root body .document-reader .reader-details>summary{font-size:12px;padding:4px 0;cursor:pointer}
:root body .document-reader>.wrap>details>summary{font-size:12px!important;line-height:1.3;padding:4px 0}
:root body .document-reader .reader-details p{font-size:12px;margin:4px 0 8px}
:root body .document-reader .reader-controls{display:grid;grid-template-columns:44px minmax(0,1fr) 44px 44px;gap:4px;padding:4px}
:root body .document-reader .reader-controls>.btn{width:100%;max-width:none;min-width:0;justify-self:stretch}
:root body .document-reader #prevPage{grid-column:1;grid-row:1}
:root body .document-reader .reader-controls>label{grid-column:2;grid-row:1;justify-content:center;gap:3px;font-size:12px;min-width:0}
:root body .document-reader #pageNumber{width:46px;height:40px;min-height:40px;font-size:14px;padding:3px;box-sizing:border-box}
:root body .document-reader #goPage{grid-column:3;grid-row:1}
:root body .document-reader #nextPage{grid-column:4;grid-row:1}
:root body .document-reader #readAloud{grid-column:1 / 4;grid-row:2}
:root body .document-reader #readAloud:has(+[hidden]){grid-column:1 / -1}
:root body .document-reader #stopReading{grid-column:4;grid-row:2}
/* Arrow and stop icons keep the touch targets clear without long button labels. */
:root body .document-reader :is(#prevPage,#nextPage,#goPage,#stopReading){font-size:0!important;padding:0}
:root body .document-reader :is(#prevPage,#nextPage,#goPage,#stopReading)>.site-icon{margin:0;flex-basis:20px;width:20px;height:20px}
:root body .document-reader :is(#prevPage,#nextPage,#goPage,#stopReading)>.site-icon>svg{width:20px;height:20px}
:root body .document-reader #goPage{font-size:13px!important}
:root body .document-reader #goPage>.site-icon{display:none}
:root body .document-reader .page-status{font-size:12px;line-height:1.3;padding:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:root body .document-reader .audio-status{font-size:12px;line-height:1.3;margin-bottom:3px}
:root body .document-reader .code-source-note{font-size:12px;line-height:1.3;margin:0 0 4px}
:root body .document-reader .scanned-page{padding:2px;scrollbar-gutter:auto}
@media(max-width:900px){
  body:has(.document-reader){padding-top:0}
  body:has(.document-reader)>.site-header-block{display:none}
  :root body .document-reader{padding:4px 0 0}
  :root body .document-reader>.wrap{padding-left:6px;padding-right:6px}
}
@media(min-width:620px) and (max-width:900px) and (max-height:500px){
  :root body .document-reader .page-status{display:none}
  :root body .document-reader .reader-controls{grid-template-columns:44px minmax(110px,1fr) 44px 44px minmax(110px,1fr) 44px}
  :root body .document-reader #readAloud{grid-column:5;grid-row:1}
  :root body .document-reader #readAloud:has(+[hidden]){grid-column:5 / -1}
  :root body .document-reader #stopReading{grid-column:6;grid-row:1}
}