/* The note sheet and the verse box (verse-peek.js): the reader's, and the same box over the chat for a verse a message or
   a note cites (card #766; Larry: "the styling, functionality, and presentation are the same as in the Bible-reading
   area"). Loaded before bible.css wherever that is, so the reader's later rules (the side panel, the column's padding)
   still win; and by the chat (index.php), whose own placing of the box is in chat.css. */
/* The note sheet */
/* .b-peek: a verse a commentary cites, over the commentary (itself a .b-sheet): the same sheet. */
.b-sheet, .b-peek {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--b-sheet); color: var(--text);
  border-top: 1px solid var(--b-sheet-edge); border-radius: 14px 14px 0 0; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom));
  /* (The reader's rule color, or the divider where the page has none (Resources, My marks): a missing color drops the
     whole shadow, #767.) */
  box-shadow: 0 -1px 0 var(--b-rule, var(--divider)), 0 -10px 34px rgba(0,0,0,.28);
  max-height: 50dvh; overflow-y: auto;
  /* A drag that reaches the end of the sheet stops there instead of passing to the chapter behind,
     which on a phone rubber-bands the page and carries this pinned sheet along with it. */
  overscroll-behavior: contain;
}
/* The sheet sits over the chapter, so the join wants to be plain: a defined edge along the top,
   and a shadow deep enough to lift it off the text. */
.b-sheet, .b-peek { border-top: 2px solid var(--b-sheet-edge); }
.b-peek { z-index: 36; }            /* over the commentary and its player (35) */
/* No line of space below its last line (Larry, 2026-10-03): the foot as the player's. */
.b-peek { padding-bottom: calc(.55rem + env(safe-area-inset-bottom) / 2); }
.b-peek > :last-child { margin-bottom: 0; }
/* In the dark the page is nearly black and the old sheet only a shade lighter, with a top line
   darker than either: the sheet gets a surface a clear step up and an edge you can see. */
:root { --b-sheet: var(--panel); --b-sheet-edge: var(--divider); --b-sheet-rule: var(--divider); }
:root[data-theme="dark"] { --b-sheet: #2b2f36; --b-sheet-edge: #646b76; --b-sheet-rule: #41464e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --b-sheet: #2b2f36; --b-sheet-edge: #646b76; --b-sheet-rule: #41464e; }
}
:root[data-theme="dark"] .b-sheet, :root[data-theme="dark"] .b-peek { box-shadow: 0 -1px 0 rgba(255,255,255,.14), 0 -12px 36px rgba(0,0,0,.6); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .b-sheet, :root:not([data-theme="light"]) .b-peek { box-shadow: 0 -1px 0 rgba(255,255,255,.14), 0 -12px 36px rgba(0,0,0,.6); }
}
.b-sheet h3, .b-peek h3 { margin: 0 0 .4rem; font-size: .9rem; color: var(--muted); font-weight: 600; }
.b-sheet p, .b-peek p { margin: 0 0 .5rem; font-size: 1rem; line-height: 1.5; }
.b-loading { color: var(--muted); }

/* This sheet's theme colors, registered as colors so Day and Night's turn fades them (app.css, html.theme-fade; card #773). */
@property --b-sheet { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --b-sheet-edge { syntax: '<color>'; inherits: true; initial-value: transparent; }
@property --b-sheet-rule { syntax: '<color>'; inherits: true; initial-value: transparent; }