/* Shared with COMPACT_READER_QUERY in reading-viewport.js. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media screen and (max-width:900px), screen and (pointer:coarse) and (max-width:1100px){
  :root{--reading-edge-space:max(72px,calc((100svh - 214px)/2 - 20px))}
  header{
    height:auto;min-height:124px;display:grid;grid-template-columns:minmax(0,1fr) auto;
    gap:2px 12px;padding:calc(8px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 4px max(16px,env(safe-area-inset-left));
    background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .brand{min-width:0;gap:3px}
  .brand h1{font-size:1.125rem;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
  .brand span{font-size:.75rem;white-space:normal}
  .page-controls{grid-column:2;grid-row:1;gap:4px}
  .icon-btn{width:44px;height:44px;font-size:.875rem;touch-action:manipulation}
  .section-progress{grid-column:1/-1;grid-row:2;width:100%;max-width:none;min-width:0}
  .progress-caption{gap:8px;min-width:0}
  .chapter-select{flex:1;width:0;min-width:0;max-width:100%;min-height:44px;font-size:1rem;padding:6px 4px 6px 0}
  .position-label{font-size:.75rem;flex-shrink:0}
  .progress-track{height:20px;gap:3px}
  .progress-segment{min-width:0;padding:7px 0}
  .workspace{display:block;padding:0;max-width:100%;overflow-x:clip}
  .reading{width:100%;min-width:0}
  .section-label{display:none}
  .side-tools{
    position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;max-height:40svh;overflow-y:auto;
    margin:0;padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    border-top:1px solid var(--line);background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .scope-tabs{flex-direction:row;gap:2px;justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
  .scope-tabs::-webkit-scrollbar{display:none}
  .scope-tabs button{flex:1 0 auto;min-height:44px;padding:8px 3px;text-align:center;font-size:.875rem;touch-action:manipulation}
  .reading-span{flex-direction:row;align-items:center;gap:8px;margin:4px 4px 0;font-size:.875rem}
  .reading-span span{flex-shrink:0}
  .reading-span select{flex:1;width:0;max-width:none;min-height:44px;font-size:1rem;padding:6px 0}
  .reader-body{
    max-width:680px;padding:var(--reading-edge-space) max(22px,env(safe-area-inset-right)) max(var(--reading-edge-space),calc(160px + env(safe-area-inset-bottom))) max(52px,calc(16px + env(safe-area-inset-left)));
  }
  .passage{--text-leading:1.85}
  .paragraph-block{margin-bottom:32px}
  .paragraph-block.is-focused .passage{--note-space:32px}
  .pnum{left:-46px;width:40px;min-height:44px;font-size:.75rem;top:calc(var(--note-space)/2);touch-action:manipulation}
  .reading-note{font-size:1rem;line-height:1.65;min-width:0;max-width:100%}
  .note-copy{padding-left:10px}
  .inline-citation{display:inline-flex;min-width:32px;min-height:32px;align-items:center;justify-content:center;vertical-align:middle}
  .bottom-nav{flex-wrap:wrap}
  .text-btn{min-height:44px;font-size:.875rem;touch-action:manipulation}
  .keyboard-hint{display:none}
  .footer-coverage{font-size:.875rem}
  body.section-overview #text{grid-template-columns:minmax(0,1fr);gap:28px}
  .section-overview .reader-body,.paragraph-overview .reader-body{
    padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right));
  }
  /* Thousands of miniature source words behind the summaries are expensive on
     phones. Keep the source in the document, with the same colored paper. */
  .section-overview .section-source,.paragraph-overview .paragraph-block .passage{display:none}
  .section-overview .episode-section,.paragraph-overview .paragraph-block{overflow-clip-margin:0}
  .section-summary,.paragraph-summary{padding:20px 14px;filter:none;opacity:max(.35,var(--overview-opacity,1))}
  .summary-copy,.paragraph-summary .summary-copy{font-size:1rem;line-height:1.8}
  .summary-heading{font-size:.875rem}
  .section-summary::before,.paragraph-summary::before{
    inset:0;border-radius:26px;filter:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .paragraph-block::after,.section-overview .episode-section::after{display:none!important}
  .reading-focused .paragraph-block:not(.is-focused) .passage{opacity:.42;filter:none}
  .paragraph-block .passage{transition:opacity .2s ease}
  .reading-scrolling.reading-focused .paragraph-block:not(.is-focused) .passage{opacity:.85}
  .macro-note-slot::before{inset:-24px -12px;filter:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .paragraph-focus-wave{display:none}
}
@media screen and (max-height:500px) and (max-width:1100px) and (pointer:coarse){
  header{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) auto;min-height:72px;gap:8px;padding-top:calc(4px + env(safe-area-inset-top))}
  .brand span{display:none}
  .section-progress{grid-column:2;grid-row:1}
  .page-controls{grid-column:3}
  .progress-caption{gap:6px}
  .position-label{display:none}
  .side-tools{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}
}
@media(hover:none){
  .word:hover:not(.selected):not(.in-phrase):not(.in-sentence){background:transparent;color:inherit}
  .phrase-group:hover:not(.phrase-active){background:transparent;border-color:#c1a5eb}
  .phrase-group:hover .word:not(.selected):not(.in-phrase){color:inherit;background:transparent}
  .scope-tabs button:hover:not([aria-selected=true]){background:transparent}
}