/* A framed sheet on large screens; a full-page reading room on compact screens. */
.reader-close-label{display:none}
.reader-content{word-break:keep-all}
.reader .poem-text{overflow-wrap:break-word}
.reader-voice-settings{margin:0 25px 20px;border-top:1px solid var(--line);padding-top:16px;font-size:12px;color:var(--muted)}
.reader-voice-settings summary{cursor:pointer;min-height:32px;line-height:2}
.reader-voice-settings>div{display:flex;flex-wrap:wrap;gap:16px;margin:12px 0}
.reader-voice-settings label{display:flex;flex:1;min-width:180px;flex-direction:column;gap:8px}
.reader-voice-settings select{font:inherit;font-size:14px;max-width:100%;min-height:44px;padding:8px;background:var(--paper-light);color:var(--text);border:1px solid var(--line)}
.reader-voice-settings p{line-height:1.8}
@media screen and (max-width:960px){
  .reader{position:fixed;inset:0;width:100%;max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;background:var(--paper);overflow-y:auto;overflow-x:hidden}
  .reader::backdrop{background:var(--paper);backdrop-filter:none}
  .reader-toolbar{padding:calc(10px + env(safe-area-inset-top,0px)) max(7%,env(safe-area-inset-right,0px)) 10px max(7%,env(safe-area-inset-left,0px));background:var(--paper)}
  .reader-content{padding:clamp(32px,6vw,56px) max(7%,env(safe-area-inset-right,0px)) 38px max(7%,env(safe-area-inset-left,0px))}
  .reader h2{font-size:clamp(28px,4.2vw,36px);line-height:1.65}
  .reader .poem-text{font-size:clamp(16px,2.25vw,18px);line-height:2.25;margin:36px 0 40px}
  .reader .icon-button{display:flex;align-items:center;justify-content:flex-end;gap:10px;width:auto;min-width:44px;padding:0}
  .reader-close-label{display:inline;font-size:12px;letter-spacing:.02em}
  .reader-bottom{padding:20px 7%;background:var(--paper);flex-wrap:wrap}
  .reader-voice-settings{margin-right:7%;margin-left:7%}
  .reader-bottom button{min-height:44px}
  .reader .speech-status{padding:0 7% calc(22px + env(safe-area-inset-bottom,0px))}
}
@media screen and (max-width:380px){
  .reader-bottom{gap:8px;padding-left:5%;padding-right:5%}
  .reader-bottom button{font-size:12px;padding:12px 8px}
}