/* The tale: a reading column with the woven words marked in the text and
   glossed in the margins. */

.tale {
  position: relative; /* anchors the tap popover */
  max-width: 42rem;
  margin-inline: auto;
  padding: 2rem 0;
}

.tale-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  margin-bottom: 0.25rem;
}

.tale-body {
  white-space: pre-wrap;
  line-height: 1.75;
  font-size: 1.05rem;
  margin-top: 1rem;
}

.tale-run {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: help;
}

.tale-busted {
  color: var(--bs-secondary-color);
  max-width: 36rem;
}

/* The tap popover: the gloss, right where the finger is. */
.tale-popover {
  position: absolute;
  z-index: 10;
  max-width: 16rem;
  padding: 0.4rem 0.65rem;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.12);
  font-size: 0.95rem;
}

.tale-popover-lemma {
  margin-right: 0.4rem;
}

.tale-popover-pronunciation {
  font-style: italic;
  color: var(--bs-secondary-color);
}

.tale-popover-gloss {
  display: block;
  color: var(--bs-secondary-color);
}

.tale-audio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.tale-audio audio {
  height: 2.25rem;
}

.tale-turtle {
  border: 1px solid var(--bs-border-color);
  border-radius: 1rem;
  background: transparent;
  color: var(--bs-secondary-color);
  font-size: 0.8rem;
  padding: 0.2rem 0.7rem;
}

.tale-turtle.is-slowed {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

/* The End, and the one honest instrument of having read. */
.tale-end {
  margin-top: 2.5rem;
  text-align: center;
}

.tale-end-mark {
  color: var(--bs-secondary-color);
  font-style: italic;
  margin-bottom: 0.75rem;
}

/* The sift, dealt in place once the tale is read. */
.tale-sift {
  margin-top: 2.5rem;
  text-align: center;
}

.tale-sift-lemma {
  font-weight: 600;
}

/* Said out loud beside the lemma, so the verdict is not made blind. Inline,
   which is what keeps it from reading as the example sentence below. */
.tale-sift-pronunciation {
  margin-left: 0.4rem;
  font-weight: 400;
  font-style: italic;
  color: var(--bs-secondary-color);
}

.tale-sift-sentence {
  margin-top: 0.75rem;
  color: var(--bs-secondary-color);
  font-style: italic;
}

.tale-glossary {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bs-border-color);
}

.tale-glossary-heading {
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bs-secondary-color);
}

.tale-glossary-entry {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.tale-glossary-lemma {
  font-weight: 600;
}

.tale-glossary-pronunciation {
  margin-left: 0.4rem;
  font-weight: 400;
  font-style: italic;
  color: var(--bs-secondary-color);
}

.tale-glossary-gloss {
  color: var(--bs-secondary-color);
  margin-bottom: 0;
}

.plunge-tales {
  margin-top: 1.5rem;
  max-width: 36rem;
}

.plunge-tales-heading {
  font-size: 1.1rem;
}

.plunge-tales-list {
  list-style: none;
  padding-left: 0;
  margin-top: 0.75rem;
}

.plunge-tales-item {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin-bottom: 0.35rem;
}

.plunge-tales-when,
.plunge-tales-busted {
  color: var(--bs-secondary-color);
  font-size: 0.9rem;
}