/* The Bible tab (BibleScreen) in João 1, played as a demo in the context section: the book's illustration draws itself,
   a verse is highlighted, another gets a note, and the version changes. Values from BibleScreen, BibleChapterHeading,
   DropCapVerse, VerseText, HighlightPalette, NoteComposer, BibleReadingOptions and BibleVersionPicker. */
.bb { background: #fff; overflow: hidden; }
.bb .finger { transition: opacity 200ms, transform 160ms; }
.bb .finger.is-down { transform: scale(.82); }

/* top fade over the status bar; the text scrolls under it */
.bb-topfade { position: absolute; z-index: 5; inset: 0 0 auto 0; height: 86px; background: linear-gradient(#fff 62px, rgba(255,255,255,0)); pointer-events: none; }
.bb-scroll { position: absolute; inset: 0; overflow: hidden; }
.bb-content { padding: 78px 24px 200px; transition: transform 1100ms cubic-bezier(.45,0,.2,1); will-change: transform; }

/* chapter 1 heading: the illustration (max 240 wide) and the book name */
.bb-head { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 24px 0 16px; }
.bb-ill { width: 240px; height: 212.5px; display: block; overflow: visible; }
.bb-name { margin: 0; font-family: var(--serif); font-size: 34px; font-weight: 500; letter-spacing: 4px; line-height: 1.25; color: #000; }
.bb-name, .bb-text { opacity: 0; transition: opacity 550ms ease-out; }
.bb.is-text .bb-name, .bb.is-text .bb-text { opacity: 1; }

/* verses: STIX 22, line pitch 35.5 (22 × 1.25 + 8), 12 between verses */
.bb-text { margin-top: 24px; font-family: var(--serif); font-size: 22px; line-height: 35.5px; color: #000; transition: opacity 550ms ease-out; }
.bb-text.is-loading { visibility: hidden; }
.bb-v { position: relative; margin: 0 0 12px; }
.bb-n { font-size: 17px; color: #7E7A72; position: relative; top: -6px; }
.bb-drop { float: left; font-size: 76px; line-height: 63px; height: 63px; margin: 4px 8px 0 0; color: #000; }
.bb-t { transition: background-color 360ms ease; border-radius: 4px; padding: 0 2px; margin: 0 -2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.bb-v.is-sel .bb-t { text-decoration: underline dotted 2px #000; text-underline-offset: 6px; }
.bb-v.hl .bb-t { background: linear-gradient(transparent 4px, var(--hl) 4px, var(--hl) calc(100% - 3px), transparent calc(100% - 3px)); }
.bb-v.hl .bb-n { color: #000; }
/* margin mark: text.bubble.fill, caption, text.accent, in the 24pt side margin */
.bb-mark { position: absolute; left: -24px; top: -8px; width: 24px; height: 33px; display: grid; place-items: center; color: #6F551D; opacity: 0; transform: scale(.6); transition: opacity 300ms, transform 400ms cubic-bezier(.2,1.4,.4,1); }
.bb-mark svg { width: 13px; height: 13px; }
.bb-v.has-note .bb-mark { opacity: 1; transform: none; }

/* loading skeleton with shimmer (BibleChapterText) */
.bb-skel { position: absolute; left: 24px; right: 24px; display: flex; flex-direction: column; gap: 16px; opacity: 0; transition: opacity 250ms; pointer-events: none; }
.bb-skel.is-on { opacity: 1; }
.bb-skel i { height: 16px; border-radius: 4px; background: #F0ECE5; position: relative; overflow: hidden; }
.bb-skel i::after { content: ""; position: absolute; inset: 0; width: 60%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0)); animation: bb-shimmer 1.4s linear infinite; }
@keyframes bb-shimmer { from { transform: translateX(-100%); } to { transform: translateX(270%); } }

/* bottom controls: arrows and the centered capsule, over a fade to white, above the tab bar */
.bb-bottom { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: 196px; background: linear-gradient(rgba(255,255,255,0), #fff 50%); pointer-events: none; }
.bb-ctrl { position: absolute; z-index: 7; left: 20px; right: 20px; bottom: 90px; height: 44px; }
.bb-arrow { position: absolute; top: 0; transition: opacity 300ms, transform 300ms; }
.bb-arrow.l { left: 0; } .bb-arrow.r { right: 0; }
.bb-arrow svg { width: 17px; height: 17px; }
.bb.is-opts .bb-arrow { opacity: 0; transform: scale(.9); }
.bb-cap { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: var(--cw, 162px); height: 44px; border-radius: 22px; overflow: hidden;
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 0 0 .6px rgba(0,0,0,.12), inset 0 1.5px 0 #fff, inset 0 0 12px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.08);
  transition: width 420ms cubic-bezier(.3,1.2,.4,1), height 420ms cubic-bezier(.3,1.2,.4,1), border-radius 420ms; }
.bb.is-opts .bb-cap { width: 288px; height: 189px; border-radius: 32px; }
.bb-cap-row { position: absolute; left: 0; right: 0; bottom: 0; height: 44px; display: flex; align-items: center; font-size: 17px; color: #000; white-space: nowrap; transition: opacity 200ms; }
.bb-seg { display: flex; align-items: center; gap: 6px; padding: 0 12px; height: 44px; }
.bb-seg img { width: 20px; height: 20px; }
.bb-seg svg { width: 20px; height: 20px; }
.bb-div { width: .5px; height: 20px; background: #CBC7BF; flex: none; }
.bb.is-opts .bb-cap-row.closed { opacity: 0; }
.bb-opts { position: absolute; left: 0; right: 0; bottom: 0; height: 189px; padding: 8px 0 0; opacity: 0; transition: opacity 200ms; pointer-events: none; }
.bb.is-opts .bb-opts { opacity: 1; transition-delay: 160ms; }
.bb-orow { height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 16px; font-size: 17px; color: #000; border-radius: 16px; margin: 0 4px; transition: background 150ms; }
.bb-orow svg, .bb-orow img { width: 24px; height: 24px; flex: none; }
.bb-orow.is-pressed { background: rgba(0,0,0,.06); }
.bb-ohair { height: .5px; background: rgba(0,0,0,.12); margin: 4px 16px; }

/* sheets: the passage actions (204pt), the note composer and the version picker (large) */
.bb-scrim { position: absolute; z-index: 8; inset: 0; background: rgba(0,0,0,.18); opacity: 0; transition: opacity 350ms; pointer-events: none; }
.bb.is-large .bb-scrim { opacity: 1; }
.bb-sheet { position: absolute; z-index: 9; left: 0; right: 0; bottom: 0; height: 204px; border-radius: 38px 38px 0 0; background: #fff; box-shadow: 0 -6px 30px rgba(0,0,0,.12);
  transform: translateY(105%); transition: transform 460ms cubic-bezier(.3,1,.35,1), height 460ms cubic-bezier(.3,1,.35,1); overflow: hidden; }
.bb-sheet.is-in { transform: none; }
.bb-sheet.is-large { height: 816px; }
.bb-sheet .grab { display: block; width: 36px; height: 5px; border-radius: 3px; background: #CBC7BF; margin: 6px auto 0; }
.bb-snav { position: relative; height: 44px; margin: 9px 16px 0; display: flex; align-items: center; justify-content: space-between; }
.bb-snav .ttl { position: absolute; left: 60px; right: 60px; text-align: center; font-size: 17px; font-weight: 600; color: #000; }
.bb-snav .gbtn svg { width: 16px; height: 16px; }
.bb-save { position: relative; height: 44px; padding: 0 16px; min-width: 76px; }
.bb-save .gcta { font-size: 15px; opacity: 1; transform: none; transition: filter 200ms; }
.bb-save.is-off .gcta { filter: grayscale(1) opacity(.45); }
.bb-pane { position: absolute; left: 0; right: 0; top: 59px; bottom: 0; transition: opacity 250ms, transform 360ms cubic-bezier(.3,1,.35,1); }
.bb-pane.is-gone { opacity: 0; pointer-events: none; }

/* action row: Cores, Salvar, Anotação, Copiar */
.bb-acts { position: absolute; left: 20px; right: 20px; top: 12px; height: 88px; }
.bb-blk { position: absolute; top: 0; height: 88px; width: 84.5px; border-radius: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-size: 15px; font-weight: 500; color: #000; background: #fff;
  box-shadow: inset 0 0 0 .6px rgba(0,0,0,.12), inset 0 0 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
  transition: left 360ms cubic-bezier(.3,1,.35,1), width 360ms cubic-bezier(.3,1,.35,1), opacity 260ms, transform 160ms; }
.bb-blk svg { width: 20px; height: 20px; }
.bb-blk.is-pressed { transform: scale(.95); }
.bb-blk.b0 { left: 0; } .bb-blk.b1 { left: 92.5px; } .bb-blk.b2 { left: 185px; } .bb-blk.b3 { left: 277.5px; }
.bb-dots { display: flex; }
.bb-dots i { width: 32px; height: 32px; border-radius: 50%; margin-left: -16px; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1); }
.bb-dots i:first-child { margin-left: 0; }
.bb-back { left: 0; width: 44px; opacity: 0; }
.bb-back svg { width: 17px; height: 17px; }
.bb-pal { display: none; gap: 4px; }
.bb-pal i { width: 54px; height: 54px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.1); display: grid; place-items: center; transition: transform 160ms; }
.bb-pal i.is-pressed { transform: scale(.9); }
.bb-acts.is-pal .bb-back { opacity: 1; }
.bb-acts.is-pal .b0 { left: 52px; width: 310px; }
.bb-acts.is-pal .b0 .bb-dots { display: none; }
.bb-acts.is-pal .b0 .bb-pal { display: flex; }
.bb-acts.is-pal .b1, .bb-acts.is-pal .b2, .bb-acts.is-pal .b3 { left: 420px; opacity: 0; }

/* note composer */
.bb-note { padding: 8px 20px 0; display: flex; flex-direction: column; gap: 12px; }
.bb-quote { padding: 0 4px; font-family: var(--serif); font-size: 17px; line-height: 1.25; color: #7E7A72; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bb-nhair { height: .5px; background: rgba(0,0,0,.08); }
.bb-field { min-height: 130px; font-size: 22px; line-height: 1.3; color: #000; }
.bb-field .ph { color: rgba(60,60,67,.3); }
.bb-field .caret { display: inline-block; width: 2px; height: 26px; margin-left: 1px; vertical-align: -5px; background: #F4B400; animation: bb-caret 1s steps(1) infinite; }
@keyframes bb-caret { 50% { opacity: 0; } }
.bb-nbar { position: absolute; left: 20px; right: 20px; bottom: 40px; display: flex; align-items: center; justify-content: space-between; }
.bb-count { font-size: 12px; color: #7E7A72; }
.bb-mic { position: relative; width: 56px; height: 56px; }
.bb-mic .gcta { opacity: 1; transform: none; border-radius: 50%; }

/* version picker */
.bb-vlist { padding: 4px 0 0; }
.bb-lang { padding: 10px 24px 6px; font-size: 15px; font-weight: 500; color: #615D56; }
.bb-vrow { position: relative; margin: 2px 8px; padding: 10px 16px; border-radius: 16px; display: flex; align-items: center; justify-content: space-between; transition: background 160ms; }
.bb-vrow b { display: block; font-size: 17px; font-weight: 400; color: #000; }
.bb-vrow small { display: block; margin-top: 2px; font-size: 13px; color: #615D56; }
.bb-vrow svg { width: 18px; height: 18px; color: #F4B400; opacity: 0; }
.bb-vrow.is-on { background: rgba(0,0,0,.05); }
.bb-vrow.is-on svg { opacity: 1; }
.bb-vrow.is-pressed { background: rgba(0,0,0,.09); }
.bb .h-tabbar { z-index: 7; }

/* glass without backdrop-filter (see styles.css): a little more opaque */
.bb-cap { background: rgba(255,255,255,.92); }