/* A complete page stays within the device; text receives its natural height. */
#reader.active .stage .hx-prism>.screen,#reader.active.focus-reader .stage .hx-prism>.screen {
 display:flex!important;flex-direction:column!important;overflow:hidden!important;
 touch-action:pan-x pinch-zoom;overscroll-behavior:none;
}
#reader.active .stage .hx-prism>.screen>#page,body.interior #reader.active .stage .hx-prism>.screen>#page {
 flex:1 1 0!important;height:0!important;min-height:0!important;width:100%!important;
 aspect-ratio:auto!important;background-size:contain!important;background-position:center!important;
}
body #reader.active .stage .hx-prism #dialogue.comic-dialogue.show,
body[data-issue] #reader.active .stage .hx-prism #dialogue.hx-speaker-dialogue.show {
 display:block!important;flex:0 0 var(--hx-caption-height,140px)!important;height:var(--hx-caption-height,140px)!important;max-height:none!important;
 min-height:0!important;overflow:visible!important;padding:6px 12px!important;box-sizing:border-box!important;
 text-align:left!important;white-space:normal!important;
 font-size:var(--hx-fit-font,16px)!important;line-height:1.2!important;
}
#reader.active #dialogue .hx-speech-line,#reader.active #dialogue .hx-narration-line {
 margin:1px 0!important;padding-top:0!important;padding-bottom:0!important;
 white-space:normal!important;line-height:inherit!important;
}
#reader.active .stage .screen>#tapPrev,#reader.active .stage .screen>#tapNext {display:none!important}
@media(max-height:600px) and (orientation:landscape) and (pointer:coarse),
 (max-height:450px) and (orientation:landscape) and (max-width:1000px){
 #reader.active .stage .hx-prism>.screen:has(.comic-dialogue.show){
  display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr);
 }
 #reader.active .stage .hx-prism>.screen>#page,body.interior #reader.active .stage .hx-prism>.screen>#page {height:100%!important}
 body #reader.active .stage .hx-prism #dialogue.comic-dialogue.show {align-self:center!important;height:auto!important;border-top:0!important}
}
/* Keep three pyramid targets distinct, below a slim progress rail. */
#reader.active .hx-prism .hx-astra-nav {
 flex:0 0 64px!important;height:64px!important;min-height:64px!important;
 display:grid!important;grid-template-columns:44px minmax(0,1fr) 44px!important;
 grid-template-rows:20px 44px!important;gap:0!important;
}
#reader.active .hx-prism .hx-astra-nav .hx-astra-progress {
 grid-column:1 / -1;grid-row:1;position:relative!important;inset:auto!important;
 height:20px!important;min-height:20px!important;align-self:start;margin:0 7px;width:calc(100% - 14px)!important;
}
#reader.active .hx-prism .hx-astra-nav .hx-astra-prev {grid-column:1;grid-row:2}
#reader.active .hx-prism .hx-astra-nav .hx-astra-next {grid-column:3;grid-row:2}
#reader.active .hx-prism .hx-astra-nav .hx-astra-step {height:44px!important;min-height:44px!important}
#reader.active .hx-prism .hx-astra-nav .hx-reader-wake.hx-pyramid-control {
 position:relative!important;inset:auto!important;transform:none!important;
 grid-column:2;grid-row:2;justify-self:center;align-self:center;
 display:grid!important;place-items:center;width:44px!important;height:44px!important;min-height:44px!important;margin:0!important;padding:0!important;
}
@media(max-width:700px) and (orientation:portrait){
 #reader.active .stage,#reader.active.focus-reader .stage {--fit-top:calc(76px + env(safe-area-inset-top,0px))}
 #reader.active .hx-prism-crown{top:-25px;height:25px}
 #reader.active .hx-prism-crown svg{width:38px;height:29px}
}



/* Use the phone height for the picture, not an empty crown/header band. */
#reader.active .stage,#reader.active.focus-reader .stage {
 --fit-top:calc(8px + env(safe-area-inset-top,0px));
 --fit-bottom:calc(8px + env(safe-area-inset-bottom,0px));
}
#reader.active .hx-prism-crown{display:none!important}
#reader.active .hx-reader-header{background:#080d19f5!important}
/* A single 44px control row; the centre triangle has its own visible gap. */
#reader.active .hx-prism .hx-astra-nav {
 height:44px!important;min-height:44px!important;flex-basis:44px!important;
 grid-template-columns:44px minmax(0,1fr) 44px minmax(0,1fr) 44px!important;
 grid-template-rows:44px!important;
}
#reader.active .hx-prism .hx-astra-nav .hx-astra-progress {
 grid-column:2 / 5;grid-row:1;height:44px!important;min-height:44px!important;
 margin:0!important;width:100%!important;grid-template-columns:24px 1fr 24px;gap:4px;
}
#reader.active .hx-prism .hx-astra-nav .hx-astra-rail {
 mask-image:linear-gradient(to right,#000 calc(50% - 24px),transparent calc(50% - 24px),transparent calc(50% + 24px),#000 calc(50% + 24px));
 -webkit-mask-image:linear-gradient(to right,#000 calc(50% - 24px),transparent calc(50% - 24px),transparent calc(50% + 24px),#000 calc(50% + 24px));
}
#reader.active .hx-prism .hx-astra-nav .hx-astra-prev{grid-column:1;grid-row:1}
#reader.active .hx-prism .hx-astra-nav .hx-astra-next{grid-column:5;grid-row:1}
#reader.active .hx-prism .hx-astra-nav .hx-reader-wake.hx-pyramid-control{grid-column:3;grid-row:1;z-index:2;opacity:1!important}
/* Hidden measuring copy uses the same type and width as the fixed text panel. */
body[data-issue] #reader.active .stage .hx-prism #dialogue.hx-caption-measure.show {
 position:absolute!important;inset:0 auto auto 0!important;visibility:hidden!important;
 height:auto!important;flex:none!important;overflow:visible!important;pointer-events:none!important;
 font-size:14px!important;
}

/* Menu is summoned explicitly, so ordinary page turns never cover the art. */
#reader.active:not(.hx-tools-requested):not(.hx-issues-open) .hx-reader-header{visibility:hidden!important;pointer-events:none!important;opacity:0!important}
@media(max-height:600px) and (orientation:landscape) and (pointer:coarse), (max-height:450px) and (orientation:landscape) and (max-width:1000px){
 body[data-issue] #reader.active .stage .hx-prism #dialogue.hx-speaker-dialogue.show{height:100%!important;align-self:stretch!important;flex:none!important}
 body[data-issue] #reader.active .stage .hx-prism #dialogue.hx-caption-measure.show{height:auto!important}
}

/* Issue 1 uses the measured natural dialogue, with restrained editorial spacing. */
body[data-issue="1"] #reader.active .stage .hx-prism #dialogue.hx-natural-dialogue {
 padding:8px 12px!important;background:#090d16!important;border-top:1px solid #b9c8df26!important;
}
body[data-issue="1"] #reader.active #dialogue.hx-natural-dialogue .hx-speech-line {
 margin:2px 0!important;line-height:1.25!important;
}
body[data-issue="1"] #reader.active #dialogue.hx-natural-dialogue .hx-narration-line {
 margin:2px 0 4px!important;padding:0!important;line-height:1.25!important;
}
body[data-issue="1"] #reader.active #dialogue.hx-natural-dialogue .hx-speaker-cue {
 display:inline;font-size:max(12px,.78em);margin-right:.55em;letter-spacing:0;
}
@media(forced-colors:active){
 body[data-issue="1"] #reader.active #dialogue.hx-natural-dialogue .hx-speaker-cue{display:none}
}

/* Square inner page fitted to the complete artwork and current caption in every issue. */
body[data-issue] #reader.active .stage .hx-prism>.screen {
 border-radius:0!important;
}
body[data-issue] #reader.active .stage .hx-prism>.screen.hx-art-fitted {
 width:var(--hx-inner-width)!important;height:var(--hx-inner-height)!important;
 flex:0 0 auto!important;align-self:center!important;margin:auto 0!important;
 box-sizing:border-box!important;background:#090d16!important;
 box-shadow:0 0 0 1px #02030a!important;
}
body[data-issue] #reader.active .stage .hx-prism>.screen #page,
body[data-issue] #reader.active .stage .hx-prism>.screen #dialogue {
 border-radius:0!important;
}