/* Each screen owns its content. This file replaces the old absolute-position
   alternate-page composition; the player/transport retains its own layout. */
body [hidden] {display:none!important}
#page-tools[hidden],#map-context[hidden],#alternate-view[hidden],#reader-drawer[hidden] {display:none!important}
#main :is(button,input,select),#dialog :is(button,input,select),#reader-drawer button {touch-action:manipulation}
body[data-view=chronicle] #main,body[data-view=voices] #main {
 display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:max-content max-content max-content minmax(0,1fr);
 gap:0;padding:18px 24px 12px!important;overflow:hidden!important;
 background:linear-gradient(#08141bec,#08141bf5),url('assets/nebula.webp') center/cover;
}
body:is([data-view=chronicle],[data-view=voices]) .map-heading {
 position:static!important;inset:auto!important;grid-row:1;grid-column:1;min-width:0;height:auto!important;pointer-events:auto;padding:0 0 8px;
}
body:is([data-view=chronicle],[data-view=voices]) .map-heading h1 {font-size:30px!important;line-height:1.15!important;margin:5px 0!important;letter-spacing:-.6px!important}
body:is([data-view=chronicle],[data-view=voices]) .map-heading :is(p,.series-path) {display:none!important}
body:is([data-view=chronicle],[data-view=voices]) #current-book-label {font-size:11px;letter-spacing:.6px;line-height:1.5}
#page-tools {grid-row:2;grid-column:1;min-width:0;padding-bottom:8px}
.page-listening {display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;color:var(--muted);font-size:12px}
.page-listening>span {min-width:0;overflow-wrap:anywhere}
.page-listening button {display:flex;align-items:center;gap:6px;min-height:44px;color:var(--gold);font-size:12px;padding:4px 0;flex-shrink:0}
.page-listening svg {width:16px;height:16px}
#timeline-page-actions {display:flex;gap:8px;flex-wrap:wrap}
#timeline-page-actions button {min-height:44px;border:1px solid var(--line);padding:6px 12px;border-radius:5px;font-size:12px}
#bob-search-label {display:block;font-size:12px;color:var(--muted);margin:0}
#bob-search {display:block;width:100%;min-height:44px;margin:4px 0 0;border:1px solid var(--line);border-radius:5px;background:#12222c;color:var(--text);padding:8px 12px;font-size:16px}
body:is([data-view=chronicle],[data-view=voices]) #alternate-view {
 grid-row:4;grid-column:1;position:relative!important;inset:auto!important;width:100%;height:100%!important;min-height:0!important;
 overflow:auto!important;overscroll-behavior:contain;touch-action:pan-y;scroll-padding-block:78px 16px;
 padding:0!important;border:0!important;border-radius:0;background:transparent!important;box-shadow:none;backdrop-filter:none;
}
body[data-view=chronicle] .journey-lower {position:static!important;grid-row:3;grid-column:1;display:block;min-height:0;height:auto!important;margin:0;padding:0 0 10px}
body[data-view=chronicle] #timeline {position:static!important;inset:auto!important;width:100%!important;min-height:0!important;height:auto!important;padding:10px 12px;background:#10232b;border:1px solid var(--line);border-radius:6px;box-shadow:none}
body[data-view=chronicle] #story-date {font-size:16px;line-height:1.3}
body[data-view=chronicle] #time-state {display:block;font-size:11px;line-height:1.5}
body[data-view=chronicle] #timeline .eyebrow,body[data-view=chronicle] #timeline .time-footer {display:none!important}
body[data-view=chronicle] #timeline .time-head {display:flex;align-items:center;justify-content:space-between;gap:8px}
body[data-view=chronicle] #back-to-present {min-height:44px;font-size:12px;white-space:normal;max-width:110px}
body[data-view=chronicle] #timeline .timeline-track {height:44px!important;margin:0!important}
body[data-view=chronicle] #story-range {height:44px!important;min-height:44px!important;top:0!important}
body[data-view=chronicle] .chronicle-toolbar {position:sticky!important;top:0;z-index:3;display:block!important;padding:0 0 8px!important;background:#091820!important;border-bottom:1px solid var(--line);margin:0!important;backdrop-filter:none}
body[data-view=chronicle] .timeline-modes {display:flex;width:100%;gap:0;border-bottom:1px solid var(--line)}
body[data-view=chronicle] .timeline-modes button {flex:1;min-height:44px;font-size:12px;letter-spacing:.5px;padding:8px 4px;white-space:normal}
body[data-view=chronicle] .timeline-lens-label {font-size:11px;line-height:1.4;letter-spacing:0;color:var(--muted);margin:8px 0 0}
body[data-view=chronicle] .chronicle-row {display:grid!important;grid-template-columns:100px 12px minmax(0,1fr) 100px;gap:8px 12px;padding:18px 6px;margin:0;border-bottom:1px solid var(--line);min-width:0}
body[data-view=chronicle] .chronicle-row>* {min-width:0;overflow-wrap:anywhere}
body[data-view=chronicle] .chronicle-row time {font:12px/1.5 var(--font);color:var(--muted)}
body[data-view=chronicle] .chronicle-row strong {display:block;font:500 15px/1.5 var(--font)}
body[data-view=chronicle] .chronicle-row p {font-size:13px;line-height:1.55;margin:6px 0;color:var(--muted)}
body[data-view=chronicle] .chronicle-row>button {min-height:44px;font-size:12px;padding:4px;text-align:right;align-self:start}
body[data-view=chronicle] .chronicle-dot {margin-top:7px}
body[data-view=chronicle] .timeline-moments {margin-top:8px}
body[data-view=chronicle] .timeline-moments button {display:flex;align-items:center;min-height:44px;gap:8px;padding:5px 0;text-align:left;line-height:1.5;font-size:12px;width:100%;white-space:normal}
body[data-view=chronicle] .now-chapter {background:#d6b46d0a;box-shadow:inset 2px 0 var(--gold)}
body[data-view=chronicle] .now-tag {display:block;width:fit-content;margin:5px 0;font-size:9px;line-height:1.5;font-style:normal}
body[data-view=chronicle] .chronicle-group {font-size:12px;line-height:1.5;padding:14px 6px;overflow-wrap:anywhere}
body[data-view=voices] .voices-grid {display:grid!important;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px;padding:0 0 12px;margin:0}
body[data-view=voices] .voice-card {display:grid;grid-template-columns:40px minmax(0,1fr) 20px;grid-template-rows:max-content max-content max-content;gap:2px 12px;padding:14px 12px!important;margin:0;min-width:0;min-height:94px;text-align:left;border:1px solid var(--line);border-radius:6px;background:#0e202a}
body[data-view=voices] .voice-card[hidden] {display:none!important}
body[data-view=voices] .voice-card .avatar {grid-row:1/4;grid-column:1;align-self:center;width:38px;height:38px;margin:0}
.voice-name {grid-column:2;grid-row:1;font-size:15px;font-weight:600;overflow-wrap:anywhere}
body[data-view=voices] .voice-card p {grid-column:2;grid-row:2;font-size:13px;line-height:1.5;margin:0;color:var(--muted);overflow-wrap:anywhere}
body[data-view=voices] .voice-card small {grid-column:2;grid-row:3;font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.voice-open {grid-column:3;grid-row:1/4;align-self:center;color:var(--gold)}
/* Dedicated Atlas canvas with a permanently visible orientation reference. */
body[data-view=atlas] #main {display:grid!important;grid-template-columns:220px minmax(0,1fr) 260px;grid-template-rows:max-content minmax(0,1fr) 44px;gap:8px 16px;padding:12px 20px 4px!important;overflow:hidden!important}
#map-context {grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;padding-bottom:8px;border-bottom:1px solid var(--line);min-width:0}
.map-position-copy {min-width:0}
#map-position-mode {font-size:9px;letter-spacing:.8px;line-height:1.6}
#map-position-title {display:block;font:500 20px/1.35 var(--font);overflow-wrap:anywhere}
#map-position-date {display:block;font-size:12px;line-height:1.5;color:var(--muted)}
.map-current-button {display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid #ddbc7388;border-radius:5px;color:var(--gold);background:#21302c;font-size:12px}
.map-current-button svg {width:19px;min-width:19px}
#map-selection {grid-column:1/-1;font-size:11px;line-height:1.5;color:var(--muted);margin:0;min-height:17px}
body[data-view=atlas] #space {grid-row:2;grid-column:2;position:relative!important;inset:auto!important;min-width:0;min-height:0;isolation:isolate}
body[data-view=atlas] #space .world {top:54px!important;bottom:4px!important;left:4px!important;right:4px!important}
body[data-view=atlas] .dense-map-controls {top:0!important;left:0!important;right:0!important;width:auto!important;flex-wrap:nowrap;gap:5px}
body[data-view=atlas] .dense-map-controls .dense-map-zoom {order:0;margin-left:auto}
body[data-view=atlas] .dense-map-controls .map-listen-button {width:auto;min-width:56px}
body[data-view=atlas] .dense-map-controls .map-places-button {width:auto;min-width:72px}
body[data-view=atlas] .roster,body[data-view=atlas] .inspector {position:relative!important;inset:auto!important;width:100%!important;height:100%;max-height:none!important;min-height:0;grid-row:2;margin:0}
body[data-view=atlas] .roster {grid-column:1}
body[data-view=atlas] .inspector {grid-column:3}
body[data-view=atlas] .journey-lower {display:none!important}
body[data-view=atlas] .map-footnote {position:static!important;grid-row:3;grid-column:1/-1;inset:auto!important;width:auto!important;max-width:none;min-height:44px;display:flex;align-items:center;justify-content:flex-end}
body[data-view=atlas] .atlas-schematic {min-height:44px;font-size:10px;line-height:1.4;max-width:none;text-align:right}
#space[data-map-layout] .star-node.selected .star-core:before {border:2px solid var(--gold);box-shadow:0 0 0 5px #e2be7520}
#space[data-map-layout] .star-node.selected .star-label {font-weight:600;border:1px solid #e2be75b3;background:#172822;color:#f4ddad}
#space[data-map-layout] .star-node.focused:not(.selected) {outline:1px dashed #aacbd7;outline-offset:-2px;border-radius:50%}
/* Dialogs share one native scroll surface. Keep close/action targets reachable. */
#dialog {padding:0;overflow:auto;overscroll-behavior:contain;scroll-padding:76px 18px}
#dialog .dialog-content {min-width:0}
#dialog .dialog-header {position:sticky;top:0;z-index:4;background:#0c1b25;align-items:center;gap:12px}
#dialog .dialog-header h2 {font-size:28px;line-height:1.2;overflow-wrap:anywhere}
#dialog .dialog-header .icon-btn {width:44px;height:44px;min-width:44px}
#dialog :is(button,input,select) {min-height:44px}
#dialog input[type=checkbox] {min-height:22px;min-width:22px;width:22px;height:22px;flex-shrink:0}
#dialog :is(p,small,strong,em,label,span) {overflow-wrap:anywhere}
#dialog :is(input:not([type=checkbox]),select,textarea) {max-width:100%;min-width:0;font-size:16px}
#dialog .dialog-actions {display:flex;flex-wrap:wrap;gap:8px}
#dialog .dialog-actions button {white-space:normal;line-height:1.4}
#dialog .settings-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,1fr);gap:10px;align-items:center}
#dialog .settings-row button {white-space:normal;line-height:1.4;padding:8px;font-size:13px;text-align:right}
#dialog[data-screen=more] .dialog-actions {display:grid;grid-template-columns:1fr 1fr}
#dialog[data-screen=more] .dialog-actions button {text-align:left;padding:12px}
#dialog .field-row {grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
#dialog .field-row>div {min-width:0}
#dialog .media-row {grid-template-columns:24px minmax(0,1fr) auto auto;gap:8px}
#dialog .media-row>div {min-width:0}
#dialog .media-row small {white-space:normal;word-break:break-word;max-width:100%}
#dialog .media-row .small-button {white-space:normal;line-height:1.35;text-align:center;max-width:110px;font-size:12px}
#dialog .library-book-head {min-width:0;gap:10px}
#dialog .library-book-head>div {min-width:0}
#dialog .library-book-head h3 {overflow-wrap:anywhere}
#dialog .book-actions {flex-wrap:wrap;gap:8px}
#dialog .scene-evidence dd {min-width:0;overflow-wrap:anywhere}
#dialog .chapter-list {overscroll-behavior:contain;scroll-padding:10px}
#dialog .chapter-item {min-height:56px;gap:8px}
#dialog .chapter-item>span {min-width:0}
#dialog .search-item {min-height:48px;gap:10px;padding:10px 0}
#dialog .bookmark-item {min-width:0;gap:8px}
#dialog .bookmark-item .jump-bookmark {min-width:0;white-space:normal}
#dialog .dialog-context-beat {grid-template-columns:24px minmax(0,1fr)}
#dialog .dialog-context-beat>button {grid-column:2}
/* The reading drawer is its own screen on compact devices, not a narrow overlay. */
@media(max-width:1180px) {
 body[data-view=atlas] #main {grid-template-columns:minmax(0,1fr);gap:6px;padding:8px 12px 0!important}
 body[data-view=atlas] #space {grid-column:1}
 body[data-view=atlas] :is(.roster,.inspector) {display:none!important}
 #reader-drawer {position:fixed!important;left:var(--rail)!important;right:0!important;top:calc(var(--top) + 44px)!important;bottom:var(--player)!important;width:auto!important;height:auto!important;z-index:18;display:flex;flex-direction:column;min-height:0;overflow:hidden}
 #reader-drawer .reader-head {flex-shrink:0;min-height:56px;padding:8px 16px;gap:12px}
 #reader-drawer .reader-head>div {min-width:0}
 #reader-drawer .reader-head .icon-btn {width:44px;height:44px}
 #reader-drawer .reader-tools {flex-shrink:0;min-height:48px;height:auto;flex-wrap:wrap;padding:4px 12px;gap:4px 10px}
 #reader-drawer .reader-tools button {min-height:44px;font-size:12px}
 #reader-drawer .reader-tools>div {display:flex}
 #reader-drawer .reader-text {min-height:0;flex:1;overflow:auto;padding:18px 20px;overscroll-behavior:contain}
 #reader-drawer .reader-footer {flex-shrink:0;display:flex;flex-wrap:wrap;gap:4px 8px;padding:4px 12px;min-height:44px}
 #reader-drawer .reader-footer button {min-height:44px;max-width:100%;white-space:normal}
 #reader-drawer .reader-footer>span {font-size:11px}
 #reader-drawer .empty-reader {padding:12px 0}
}
@media(max-width:760px) {
 body:is([data-view=chronicle],[data-view=voices]) #main {padding:10px 14px 4px!important}
 body:is([data-view=chronicle],[data-view=voices]) .map-heading h1 {font-size:27px!important}
 body[data-view=chronicle] .chronicle-row {grid-template-columns:76px 10px minmax(0,1fr);gap:6px 8px;padding:14px 2px}
 body[data-view=chronicle] .chronicle-row>button {grid-column:3;text-align:left;justify-self:start}
 body[data-view=voices] .voices-grid {grid-template-columns:minmax(0,1fr)}
 #map-position-title {font-size:16px;line-height:1.4}
 #map-position-date {font-size:11px}
 .map-current-button {padding:6px 8px;max-width:105px;font-size:11px;line-height:1.4}
 .map-current-button span {white-space:normal}
 #dialog {width:calc(100vw - 16px);max-width:640px;max-height:calc(100dvh - var(--safe-top) - var(--safe-bottom) - 16px);margin:auto}
 #dialog .dialog-content {padding:0 16px 20px}
 #dialog .dialog-header {margin:0 -16px 12px;padding:14px 16px}
 #dialog .dialog-header .eyebrow {font-size:10px}
 #dialog .dialog-header h2 {font-size:26px;margin:3px 0}
 #dialog .dialog-copy {font-size:14px;line-height:1.6}
 #dialog .field-row {display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
 #dialog .media-row {grid-template-columns:24px minmax(0,1fr) 44px;padding:10px 0}
 #dialog .media-row .small-button {grid-row:2;grid-column:2;max-width:none;justify-self:start;padding:8px 12px}
 #dialog .media-row .icon-btn {grid-row:1/3;grid-column:3;align-self:center}
 #dialog .library-book-head {grid-template-columns:28px minmax(0,1fr) 14px!important;padding:12px 0}
 #dialog .library-book-head .book-status {display:none}
 #dialog .library-book-head h3 {font-size:16px;line-height:1.35}
 #dialog .library-book-body {padding:0 4px 12px}
 #dialog .library-number {font-size:17px}
 #dialog .book-actions>span {width:100%;font-size:11px}
 #dialog .scene-evidence>div {grid-template-columns:minmax(0,1fr);gap:4px}
 #dialog .scene-evidence dt {font-size:11px}
 #dialog .scene-evidence dd {margin:0;font-size:13px;line-height:1.5}
 #reader-drawer {left:0!important;top:calc(88px + var(--safe-top))!important}
}
@media(max-height:540px) and (orientation:landscape) {
 body:is([data-view=chronicle],[data-view=voices]) #main {padding:4px 12px!important;grid-template-columns:150px minmax(0,1fr);grid-template-rows:max-content minmax(0,1fr);gap:4px 12px}
 body:is([data-view=chronicle],[data-view=voices]) .map-heading {grid-column:1;grid-row:1;padding:0}
 body:is([data-view=chronicle],[data-view=voices]) .map-heading h1 {font-size:22px!important}
 body:is([data-view=chronicle],[data-view=voices]) #page-tools {grid-column:1;grid-row:2;min-height:0;overflow:auto}
 body:is([data-view=chronicle],[data-view=voices]) #alternate-view {grid-column:2;grid-row:1/3}
 #page-tools .page-listening {flex-wrap:wrap;gap:0}
 #page-tools .page-listening button {font-size:11px}
 body[data-view=chronicle] #page-tools .journey-lower:not([hidden]) {position:static!important;display:block;padding:8px 0 0;margin:0}
 body[data-view=chronicle] #page-tools #timeline .time-head {display:block}
 body[data-view=chronicle] #page-tools #timeline {padding:8px}
 body[data-view=chronicle] #page-tools #story-date {font-size:13px}
 #reader-drawer {left:0!important;top:calc(44px + var(--safe-top))!important}
 body[data-view=atlas] #main {grid-template-columns:150px minmax(0,1fr);grid-template-rows:minmax(0,1fr) 44px;gap:4px 12px}
 body[data-view=atlas] #map-context {grid-row:1;grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;overflow:auto;padding:0;border:0}
 body[data-view=atlas] #space {grid-row:1/3;grid-column:2}
 body[data-view=atlas] #space .world {top:50px!important;bottom:4px!important;left:4px!important;right:4px!important}
 body[data-view=atlas] .map-footnote {grid-column:1;grid-row:2;min-height:0}
 body[data-view=atlas] .atlas-schematic {font-size:9px;min-height:44px;text-align:left}
}

@media(max-height:540px) and (orientation:landscape){:root{--rail:0px}.rail{display:none!important}#main,.player{left:0!important}}

@media(max-height:540px) and (orientation:landscape) {
 #reader-drawer {display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-rows:56px minmax(0,1fr) auto}
 #reader-drawer .reader-head {grid-column:1;grid-row:1;padding:4px 8px}
 #reader-drawer .reader-head p {display:none}
 #reader-drawer .reader-head strong {font-size:12px}
 #reader-drawer .reader-tools {grid-column:1;grid-row:2;overflow:auto;align-content:flex-start;min-height:0}
 #reader-drawer .reader-text {grid-column:2;grid-row:1/4}
 #reader-drawer .reader-footer {grid-column:1;grid-row:3;padding:2px 8px;font-size:10px}
 #reader-drawer .reader-footer>span {display:none}
}