/* Read-aloud controls for the sidebar's patristic commentary.
   Behaviour lives in tb-commentary-audio.js. */

/* ::highlight() paints a Range without touching the document, so the sentence
   being spoken can be lit inside commentary that is full of footnote markers
   and linkified verse references. */
::highlight(tb-ca-sentence) {
  background-color: rgba(201, 162, 77, .3);
  color: #fff6dd;
}

/* The sentence under the pointer, lit before it is pressed so that a line
   reads as something you can press — the sidebar's answer to the reader's
   clickable verses. Deliberately fainter than the spoken sentence. */
::highlight(tb-ca-hover) {
  background-color: rgba(201, 162, 77, .11);
}

/* Pressing a sentence starts the voice there. */
.sidebar-full-commentary {
  cursor: pointer;
}

/* The item being spoken. The sentence highlight sits inside this, so the tint
   has to stay faint enough for the two to read as different things. */
.father-cite.tb-ca-speaking {
  background: rgba(201, 162, 77, .09);
  box-shadow: 0 0 0 .5rem rgba(201, 162, 77, .09);
}

.tb-ca-btn {
  background: transparent;
  color: var(--gold, #C9A24D);
  border: 1px solid rgba(201, 162, 77, .38);
  padding: .3rem .6rem;
  font-family: var(--cinzel, 'Cinzel', serif);
  font-size: .58rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.tb-ca-btn:hover,
.tb-ca-btn:focus-visible {
  background: rgba(201, 162, 77, .12);
  border-color: rgba(201, 162, 77, .7);
  color: #fff0bf;
  outline: none;
}

.tb-ca-listen {
  display: inline-block;
  margin: .1rem 0 .7rem;
}

/* The one control that reads every father shown, above the first of them. */
.tb-ca-listen-all {
  display: block;
  width: 100%;
  margin: 0 0 1.15rem;
  padding: .48rem .6rem;
  text-align: center;
  border-color: rgba(201, 162, 77, .5);
}

/* ------------------------------------------------------------------- bar */

.tb-ca-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  /* Over the reader's own floating controls (120) and, on the phone layout,
     over the commentary sheet (210). */
  z-index: 260;
  transform: translateX(-50%);
  display: flex;
  gap: .5rem;
  align-items: center;
  max-width: min(96vw, 880px);
  padding: .6rem .8rem;
  background: rgba(8, 8, 8, .97);
  border: 1px solid var(--gold-border, rgba(201, 162, 77, .2));
  box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .6);
  backdrop-filter: blur(10px);
}

.tb-ca-bar[hidden] { display: none; }

.tb-ca-bar .tb-ca-toggle {
  min-width: 2.6rem;
  font-size: .82rem;
}

.tb-ca-label {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-dim, #aaa18c);
  font-family: var(--cinzel, 'Cinzel', serif);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tb-ca-bar-error .tb-ca-label {
  color: #e2a0a0;
  text-transform: none;
  letter-spacing: .04em;
}

.tb-ca-select {
  background: #050505;
  color: var(--text, #eee7d9);
  border: 1px solid var(--gold-border, rgba(201, 162, 77, .2));
  padding: .3rem .35rem;
  font-family: var(--crimson, 'Crimson Text', serif);
  font-size: .82rem;
  outline: none;
}

/* The reader stacks its own round controls in the bottom-right corner. While
   the bar is up they are lifted clear of it, so neither covers the other at
   any width. */
body.tb-ca-active .sidebar-toggle-btn {
  bottom: calc(1.1rem + var(--tb-ca-bar-height, 64px) + .6rem);
}

body.tb-ca-active .tb-study-fab {
  bottom: calc(4.4rem + var(--tb-ca-bar-height, 64px) + .6rem);
}

@media (max-width: 960px) {
  .tb-ca-bar {
    left: .5rem;
    right: .5rem;
    transform: none;
    max-width: none;
    flex-wrap: wrap;
    gap: .4rem;
  }
  .tb-ca-label {
    order: 5;
    flex-basis: 100%;
    white-space: normal;
  }
  /* The drawer covers the page on this layout, so the bar stays out of it. */
  body.tb-nav-locked .tb-ca-bar { display: none; }
}

/* On the phone layout the commentary is a bottom sheet above the app's action
   bar. The player rides just above that action bar, and the sheet reserves the
   height it takes so the bar never covers the words being read. */
@media (max-width: 960px) {
  body.tb-bar-on .tb-ca-bar {
    bottom: calc(var(--tb-bar-h, 56px) + env(safe-area-inset-bottom) + .4rem);
  }
  body.tb-bar-on.tb-ca-active #page-scripture .scripture-layout.commentary-open .scripture-sidebar {
    padding-bottom: calc(var(--tb-ca-bar-height, 64px) + 1.4rem) !important;
  }
  body.tb-ca-active .tb-study-fab {
    bottom: calc(110px + env(safe-area-inset-bottom, 0px) + var(--tb-ca-bar-height, 64px));
  }
}