/* Settled ink is rendered at native browser resolution over bare 3D paper. */
.app-shell[data-stage] .book-page-controls{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;z-index:4;pointer-events:none}
.book-view-toggle{position:absolute;inset:60px 0 88px;width:100%;border:0;padding:0;background:transparent;z-index:1;cursor:zoom-in}
.app-shell[data-paper-focus="left"] .book-view-toggle,.app-shell[data-paper-focus="right"] .book-view-toggle{cursor:zoom-out}
.app-shell[data-paper-focus="left"] .book-page-controls,.app-shell[data-paper-focus="right"] .book-page-controls{display:block}
.app-shell .book-page-controls .book-arrow{top:calc(50dvh - 35px);width:40px;min-width:0;height:48px;padding:0;display:grid;place-items:center;pointer-events:auto;text-align:center}
.app-shell .book-page-controls .book-arrow-prev{left:0;right:auto}
.app-shell .book-page-controls .book-arrow-next{right:0;left:auto}
.app-shell[data-paper-focus="left"] .book-page-controls .book-arrow,.app-shell[data-paper-focus="right"] .book-page-controls .book-arrow{color:#866435}
.app-shell[data-paper-focus="left"] .book-page-controls .book-arrow span,.app-shell[data-paper-focus="right"] .book-page-controls .book-arrow span{filter:drop-shadow(0 1px 0 #fff6dc)}
.app-shell.world-page-moving .book-page-controls{visibility:hidden}
.bound-volume .paper-content{opacity:0}
.bound-volume.crisp-ink .paper-content{opacity:1;filter:none;will-change:auto;background:transparent;box-shadow:none;border:0}
.bound-volume.crisp-ink .paper-content img{image-rendering:auto;filter:none}
.bound-volume.crisp-ink .paper-content[inert]{opacity:0;pointer-events:none}
.world-page-moving .bound-volume.crisp-ink .paper-content{opacity:0}
.paper-content .spread-card img{border-radius:1px}
.paper-content[data-paper="right"] .spread-card{width:auto;height:22%;aspect-ratio:7/12}
.paper-content .spread-card:focus-visible{outline:1px solid #8e6d32;outline-offset:2px}

/* Full-size detail sheet shares the same original image assets. */
.app-shell[data-stage="spread"] .modal-backdrop{align-items:center;background:#070e20e8;animation:result-shade .22s ease-out}
.app-shell[data-stage="spread"] .detail-sheet{width:min(100%,430px);max-height:100dvh;padding:30px 28px;background:transparent;box-shadow:none;border-radius:0;text-align:center;color:#eee4d3;animation:result-detail .3s ease-out}
.app-shell[data-stage="spread"] .sheet-close{color:#d5c3a4;top:6px;right:20px;width:44px;height:44px}
.app-shell[data-stage="spread"] .detail-sheet>.overline{display:block;font-size:11px;color:#ceb17d;padding:12px 24px 0}
.app-shell[data-stage="spread"] .detail-body{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:24px}
.app-shell[data-stage="spread"] .detail-body img{width:190px;height:auto;aspect-ratio:7/12;filter:none;border-radius:4px;box-shadow:0 10px 24px #0005}
.app-shell[data-stage="spread"] .detail-body h2{font-size:25px;font-weight:500;color:#f0e5d1;margin:0 0 10px}
.app-shell[data-stage="spread"] .secondary-outline{border-color:#d7b57555;color:#dec79f;font-size:12px;margin-top:22px;padding:14px}
@keyframes result-shade{from{opacity:0}to{opacity:1}}
@keyframes result-detail{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-height:740px){
  .app-shell[data-stage="spread"] .detail-body img{width:155px}
  .app-shell[data-stage="spread"] .detail-body{gap:14px;margin-top:15px}
}
@media(prefers-reduced-motion:reduce){.app-shell[data-stage="spread"] .modal-backdrop,.app-shell[data-stage="spread"] .detail-sheet{animation:none}}

/* The final two openings: story / reflection, then rating / optional note. */
.story-leaf,.journal-leaf,.feedback-leaf{gap:6px}
.paper-content .chapter-title{flex:none;font-size:11px;line-height:1.5;margin:2px 0 1px;font-weight:600;overflow-wrap:anywhere}
.story-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a18a6266 transparent;padding-right:3px;cursor:text}
.story-scroll p{font-size:8px;line-height:1.95;margin:0 0 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.paper-content .story-scroll h2{font:600 11px/1.6 "Noto Serif KR",serif;color:#486571;margin:2px 0 9px;overflow-wrap:anywhere}
.story-scroll:focus-visible{outline:1px solid #a18a62;outline-offset:-1px}
.journal-prompt{flex:none;font-size:6.5px;line-height:1.8;margin:0;color:#897557;overflow-wrap:anywhere}
.journal-writing{display:flex;flex:1;min-height:0;border-top:1px solid #a0834a33}
.journal-writing textarea{display:block;resize:none;width:100%;height:100%;min-height:0;border:0;border-radius:0;padding:4px 0 0;outline:none;color:#453426;background:repeating-linear-gradient(transparent 0,transparent 15px,#a0834a30 15px,#a0834a30 15.5px);font:8px/15.5px "Noto Serif KR",serif;box-shadow:none;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a18a6266 transparent}
.journal-writing textarea::placeholder{color:#a49172;font-size:7px}
.journal-writing:focus-within{border-top-color:#58747c}
.journal-count{display:flex;flex:none;justify-content:space-between;gap:3px;font-size:5px;color:#8a795f}
.feedback-leaf{gap:4px}
.feedback-intro{display:flex;flex:1;min-height:0;flex-direction:column;justify-content:center;text-align:center;margin:0}
.feedback-intro>span{display:none}
.paper-content .feedback-intro h2{font-size:11px;line-height:1.5;margin:0}
.feedback-intro p{font-size:6.5px;color:#897557;margin:4px 0}
.rating-options{display:flex;flex:none;flex-direction:column;gap:4px}
.rating-options button{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;min-height:23px;padding:5px 6px;border:1px solid #58747c66;border-radius:3px;background:#58747c09;color:#465f69;font:7px/1.5 "Noto Serif KR",serif;transition:background .15s,color .15s,border-color .15s}
.rating-options button>span{width:10px;font-size:11px;line-height:1}
.rating-options button[aria-pressed="true"]{background:#486571;color:#fff1d7;border-color:#486571;box-shadow:inset 0 0 0 1px #d7be8733}
.rating-options button:focus-visible{outline:1px solid #486571;outline-offset:2px}
.rating-status{flex:none;font-size:5.5px;line-height:1.7;text-align:center;color:#8a795f;margin:0}
.reading-scene .paper-folio{font-size:6px}

/* Mark the consultation within the existing heading, without an extra row. */
.paper-heading.consultation-heading{display:flex;align-items:center;gap:4px;padding-bottom:5px;text-align:left;letter-spacing:0}
.consultation-mark{display:block;flex:none;width:2px;height:7px;background:#486571}
.consultation-chapter{flex:none;color:#486571;font:4.5px/1.5 Georgia,serif;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.consultation-section{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:5.5px/1.5 Georgia,serif;letter-spacing:.02em}
.consultation-page{flex:none;color:#7e8a85;font-size:4.5px;letter-spacing:.03em;font-variant-numeric:tabular-nums}

/* Give the space above the software keyboard to the editable book. */
.app-shell.keyboard-open{position:fixed;top:var(--keyboard-top,0px);left:50%;transform:translateX(-50%);margin:0;height:var(--keyboard-height);min-height:0}
.app-shell.keyboard-open .topbar,.app-shell.keyboard-open .bottom-bar,.app-shell.keyboard-open .book-page-controls,.app-shell.keyboard-open .book-view-toggle{display:none!important}
.app-shell.keyboard-open .table-screen{height:100%;padding:0;overflow:hidden}
.app-shell.keyboard-open .table-book-view{height:100%}
.app-shell.keyboard-open .journal-leaf .paper-folio,.app-shell.keyboard-open .journal-count{display:none}
