/* Translator comments: a superscript after the line opens the comment as a popover. */

/* Undo Pico's button styling so the marker reads as a small superscript number.
   button[type=button] outranks Pico's own button selectors whatever the load order. */
button[type=button].comment-ref {
  all: unset;
  display: inline;
  cursor: pointer;
  /* Take the translator's colour from authorcolors.css, which is set for both
     light and dark themes, so the number is as legible as the line it follows. */
  color: inherit;
  font-weight: bold;
  font-size: 0.7em;
  line-height: 0;
  vertical-align: super;
  padding: 0 0.15em;
  margin: 0;
  width: auto;
  border: 0;
  background: none;
  box-shadow: none;
}

button[type=button].comment-ref:hover,
button[type=button].comment-ref:focus-visible {
  text-decoration: underline;
}

button[type=button].comment-ref:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 1px;
}

/* The button already carries the size and the raise; the <sup> only marks it up. */
.comment-ref sup {
  font-size: 1em;
  vertical-align: baseline;
  line-height: 0;
}

.comment-popover {
  /* the verse spans are pre-line; the comment is ordinary prose */
  white-space: normal;
  max-width: min(36rem, 90vw);
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.9em;
  line-height: 1.5;
  color: var(--pico-color);
  background: var(--pico-card-background-color, var(--pico-background-color));
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-card-box-shadow);
  cursor: pointer;
}

.comment-popover a {
  cursor: pointer;
}

/* Where the browser can anchor the popover, drop it just below the superscript
   that opened it. */
@supports (position-area: bottom) {
  .comment-popover {
    position-area: bottom span-right;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
    margin: 0.25rem 0;
  }
}

/* Elsewhere, pin it near the bottom of the viewport. */
@supports not (position-area: bottom) {
  .comment-popover {
    position: fixed;
    inset: auto 0 1.5rem 0;
    margin: 0 auto;
  }
}

@media print {
  .comment-ref {
    display: none;
  }
}