/* book.css - RUNIVERSE-BOOK-HUD-1 (Decisions 561 + 562, Steve 2026-10-22 22:58Z).
   ONE Book button + a sheet with tabs by place (Map / Journal / Lore / Today), and ONE conversation sheet docked to the bottom 40%.
   ADDITIVE file: the tab bodies are the existing sheets re-parented into #book-body (class .bk-adopted resets their own fixed positioning); fonts come from the pixel-font tokens (fonts.css). */
.bk-root[hidden], #talk-sheet[hidden] { display: none !important; }
.bk-btn, .bk-root *, #talk-sheet, #talk-sheet * { box-sizing: border-box; }

/* ---- the ONE Book button: phones = directly ABOVE the 120x120 hop corner (same thumb column); right edge offset keeps its left edge at >= 80% of the width, i.e. outside the protected central 60% x 60%; desktop = bottom right ---- */
.bk-btn { position: fixed; right: max(8px, calc(20vw - 60px)); bottom: 128px; width: 56px; height: 56px; z-index: 250; border-radius: 12px; border: 2px solid rgba(14,175,155,0.75); background: rgba(9,7,27,0.82); display: grid; place-items: center; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.bk-btn img { height: 34px; width: auto; image-rendering: pixelated; pointer-events: none; }
.bk-btn:hover, .bk-btn[aria-pressed="true"] { background: rgba(14,175,155,0.28); }
body.bk-open .bk-btn, body.ts-open .bk-btn { visibility: hidden; }          /* no ghost of the button under an open sheet */
.bk-btn:focus-visible, .bk-root :focus-visible, #talk-sheet :focus-visible { outline: 2px solid #ffe68c; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .bk-btn { right: 24px; bottom: 32px; } }

/* ---- the Book sheet. #book-root is a zero-size fixed anchor; the backdrop and the sheet are fixed on their own ---- */
.bk-root { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 400; font-family: var(--rf-ui); color: #c7dcd0; -webkit-tap-highlight-color: transparent; }
.bk-backdrop { position: fixed; inset: 0; background: rgba(9,7,27,0.62); }
.bk-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-height: 70vh; max-height: 70dvh; display: flex; flex-direction: column; overflow: hidden; background: rgba(9,7,27,0.97); border-top: 2px solid #0eaf9b; border-radius: 14px 14px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); font: var(--rf-fs-ui)/var(--rf-lh) var(--rf-ui); }
.bk-sheet--full { top: 0; max-height: none; height: 100vh; height: 100dvh; border-top-width: 0; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
.bk-head { flex: 0 0 auto; display: flex; flex-direction: column; touch-action: none; }
.bk-grip { height: 14px; display: flex; align-items: center; justify-content: center; }
.bk-grip::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: #3b4a52; }
.bk-tabs { display: flex; gap: 6px; padding: 0 10px 8px; overflow-x: auto; }
.bk-tab { flex: 1 1 0; min-width: 72px; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1.5px solid #0eaf9b; background: rgba(14,175,155,0.12); color: #c7dcd0; font: var(--rf-fs-ui)/var(--rf-lh) var(--rf-ui); cursor: pointer; touch-action: manipulation; white-space: nowrap; }
.bk-tab:hover { background: rgba(14,175,155,0.24); }
.bk-tab.is-on { background: #0eaf9b; color: #04120f; }
.bk-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.bk-body > [hidden] { display: none !important; }
.bk-foot { flex: 0 0 auto; display: flex; justify-content: center; padding: 8px 10px; border-top: 1px solid #25304a; }
.bk-close { width: 100%; max-width: 420px; min-height: 48px; padding: 0 22px; border-radius: 10px; border: 2px solid #0eaf9b; background: rgba(14,175,155,0.2); color: #e6f2ec; font: var(--rf-fs-ui)/var(--rf-lh) var(--rf-ui); cursor: pointer; touch-action: manipulation; }
.bk-loading { padding: 18px 14px; color: #7f9d93; }
/* an existing sheet living inside the Book body: it keeps its own content, loses its own floating geometry and its own close row (the Book's Close is the one close) */
.bk-adopted { position: static !important; inset: auto !important; transform: none !important; translate: none !important; width: auto !important; max-width: none !important; max-height: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; z-index: auto !important; overflow: visible !important; }
#book-body #kelpie-journal .row, #book-body #colo-card .row { display: none !important; }
#book-body #kelpie-journal, #book-body #colo-card { padding: 12px 14px; }
#book-body #core-map { position: relative !important; width: 100% !important; height: 100% !important; min-height: 0; }
@media (min-width: 821px) and (min-height: 521px) {                    /* desktop / tablet: a centred panel */
  .bk-sheet { left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(920px, 94vw); height: min(620px, 90vh); max-height: none; border: 2px solid #0eaf9b; border-radius: 12px; padding-bottom: 0; }
  .bk-sheet--full { top: 50%; width: min(1180px, 96vw); height: min(800px, 94vh); border-width: 2px; border-radius: 12px; padding-top: 0; }
}
@media (max-height: 520px) {                                           /* phone landscape: the sheet takes the screen */
  .bk-sheet { top: 0; max-height: none; height: 100vh; height: 100dvh; border-top-width: 0; border-radius: 0; padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .bk-grip { height: 6px; }
  .bk-tabs { padding-bottom: 4px; }
  .bk-foot { padding: 4px 10px; }
}
@media (prefers-reduced-motion: no-preference) { .bk-tab, .bk-btn { transition: background 0.08s, border-color 0.08s; } }

/* ---- Lore tab = the Book of Magic sheet in PLAYER mode (Decision 563): only the pages the player found, one line each, no combat numbers ---- */
.sb-sheet.bk-adopted { display: grid !important; height: 100% !important; padding: 8px 12px !important; gap: 8px !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) auto !important; grid-template-areas: "head" "list" "dwrap" !important; }
.sb-sheet.bk-adopted .sb-close, .sb-sheet.bk-adopted .sb-foot, .sb-sheet.bk-adopted .sb-book { display: none !important; }
.sb-sheet.sb-lore.bk-adopted .sb-filters { display: none !important; }
.sb-sheet:not(.sb-lore).bk-adopted { grid-template-rows: auto auto minmax(0, 1fr) auto !important; grid-template-areas: "head" "filt" "list" "dwrap" !important; }
.sb-sheet.bk-adopted .sb-dwrap { max-height: 40vh; }
.sb-lore .sb-row-meta { white-space: normal; overflow: visible; text-overflow: clip; }
.sb-sheet.sb-lore .sb-count { display: block !important; margin-left: auto; color: #9babb2; }
.sb-lore .sb-row { align-items: flex-start; }
.sb-lore .sb-found { color: #ffe68c; }
.sb-lore .sb-line { font-size: var(--rf-fs-ui); line-height: var(--rf-lh); color: #e6f2ec; margin: 0 0 8px; }
@media (min-width: 821px) and (min-height: 521px) {
  .sb-sheet.sb-lore.bk-adopted { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; grid-template-areas: "head head" "list dwrap" !important; }
  .sb-sheet.sb-lore.bk-adopted .sb-dwrap { max-height: none; }
}
@media (max-height: 520px) {
  .sb-sheet.sb-lore.bk-adopted { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; grid-template-rows: auto minmax(0, 1fr) !important; grid-template-areas: "head head" "list dwrap" !important; }
  .sb-sheet.sb-lore.bk-adopted .sb-dwrap { max-height: none; }
}

/* ---- the ONE conversation sheet (Decision 562): docked to the bottom 40%, NPC talk / Kelpie residents / the herald all use it ---- */
#talk-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 410; max-height: 40vh; max-height: 40dvh; display: flex; flex-direction: column; padding: 0 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(9,7,27,0.97); color: #c7dcd0; border-top: 2px solid #0eaf9b; border-radius: 14px 14px 0 0; font: var(--rf-fs-ui)/var(--rf-lh) var(--rf-ui); overflow: hidden; }
.ts-grip { flex: 0 0 auto; height: 14px; display: flex; align-items: center; justify-content: center; touch-action: none; cursor: grab; }
.ts-grip::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: #3b4a52; }
.ts-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (hover: hover) and (pointer: fine) and (min-width: 821px) { #talk-sheet { left: 50%; right: auto; width: min(640px, 96vw); transform: translateX(-50%); bottom: 12px; border: 2px solid #0eaf9b; border-radius: 12px; } }
@media (prefers-reduced-motion: no-preference) { #talk-sheet:not([hidden]) { animation: tsup 0.16s ease-out; } @keyframes tsup { from { opacity: 0; } to { opacity: 1; } } }
/* the standard body (residents, the herald) - same look as the NPC bubble it replaces */
.ts-head, #talk-sheet .nl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; touch-action: none; }
.ts-name { color: #0eaf9b; font-size: var(--rf-fs-ui); }
.ts-tag { color: #9babb2; font-size: var(--rf-fs-ui); border: 1px solid #3b4a52; border-radius: 8px; padding: 0 6px; }
.ts-x { margin-left: auto; min-width: 44px; min-height: 44px; background: rgba(255,255,255,0.04); border: 1.5px solid #3b4a52; border-radius: 10px; color: #c7dcd0; font: var(--rf-fs-ui) var(--rf-ui); cursor: pointer; touch-action: manipulation; }
.ts-x:hover { background: rgba(14,175,155,0.2); }
.ts-std .ts-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name x" "tag tag"; align-items: center; column-gap: 8px; }
.ts-std .ts-name { grid-area: name; } .ts-std .ts-tag { grid-area: tag; justify-self: start; margin-bottom: 2px; } .ts-std .ts-x { grid-area: x; }
.ts-text { white-space: pre-wrap; word-break: break-word; min-height: 2em; }
.ts-src { color: #7f9d93; font-size: var(--rf-fs-ui); margin-top: 4px; }
.ts-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ts-chip { min-height: 44px; padding: 4px 14px; background: #12232a; color: #c7dcd0; border: 1px solid #0eaf9b; border-radius: 16px; font: var(--rf-fs-ui) var(--rf-ui); cursor: pointer; touch-action: manipulation; }
/* the NPC bubble's own nodes (npc-llm.js) living inside the sheet: neutralise its old floating-bubble geometry */
#talk-sheet #talk-npc { position: static; width: auto; max-width: none; z-index: auto; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
#talk-sheet #talk-npc:after { display: none; }
#talk-sheet #talk-npc .nl-text { max-height: none; }
#talk-sheet #talk-npc .nl-x { margin-top: 0; margin-right: 0; background: rgba(255,255,255,0.04); border: 1.5px solid #3b4a52; border-radius: 10px; color: #c7dcd0; font: var(--rf-fs-ui) var(--rf-ui); }
@media (max-height: 520px) {                                           /* phone landscape: 40% of the height is short, so text left, chips + input right */
  #talk-sheet #talk-npc, #talk-sheet .ts-std { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: 12px; align-items: start; }
  #talk-sheet .nl-head, #talk-sheet .ts-head { grid-column: 1 / -1; }
  #talk-sheet .nl-text, #talk-sheet .ts-text { grid-column: 1; grid-row: 2 / span 4; }
  #talk-sheet .ts-src { grid-column: 1; }
  #talk-sheet .nl-chips, #talk-sheet .nl-row, #talk-sheet .nl-memb, #talk-sheet .ts-chips { grid-column: 2; margin-top: 4px; }
  #talk-sheet .nl-mem { grid-column: 1 / -1; }
}

/* a late-arriving fixed HUD control (the Submit-art chip, z-index 99960, bottom-left) must never sit over an open sheet's Close / chips: it steps aside while a sheet is open (hud-overlays control-vs-control gate) */
body.bk-open #art-submit-btn, body.ts-open #art-submit-btn { visibility: hidden; pointer-events: none; }

/* HUD stack (BOOK-HUD-1, parent steer: no two HUD boxes intersect at 390x844 / 844x390 / 1440x900). The Map button is gone (it is a Book tab), so the right column is Players pill -> Wide view -> zoom rail, and the thumb column is the Book above the 120x120 hop corner. */
@media (pointer: coarse) {
  html .rz-root { bottom: 208px; }   /* portrait phones: the rail ends 24 px above the Book button (the Book's top edge is 184 px above the bottom) */
}
@media (pointer: coarse) and (max-height: 500px) {   /* landscape phones: Wide view (52 px above the rail) sits under the Players pill, the rail stays above the hop corner */
  html .rz-root { bottom: 160px; height: 136px; }
}
html body div#ui { max-width: calc(100vw - 160px); }   /* the scene title wraps before it can run under Wide view / the Players pill (fonts.css pins html body #ui at 144px: this is the more specific later cap) */

/* Prompts (BOOK-HUD-1, pairwise rule): a prompt never sits over an open sheet's Close (it would intercept the tap) and, on landscape phones, never covers the Submit-art chip (bottom-left, 8..252 px) */
body.bk-open #colo-near, body.bk-open #kelpie-hud, body.ts-open #colo-near, body.ts-open #kelpie-hud { visibility: hidden; pointer-events: none; }
@media (max-height: 500px) {
  html body #colo-near, html body #kelpie-hud { left: 260px; transform: none; max-width: min(calc(100vw - 390px), 440px); }
}