/*
 * The term buttons and their popover.
 *
 * Separated out of css/treatise.css on 19 August 2026, because „Der Obstpfarrer"
 * needs the same buttons and biography/ cannot load the chapter styles of the
 * treatise without losing its own setting. One file, four pages: treatise/,
 * today/, narrative/, biography/.
 *
 * A native `popover`: light dismiss, escape and focus come from the platform, no
 * JavaScript.
 */

/* ------------------------------------------------------ The term buttons */

button.word {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  border-bottom: 1px dotted var(--verdigris);
  text-underline-offset: .2em;
}
button.word:hover,
button.word:focus-visible {
  background: color-mix(in srgb, var(--verdigris) 10%, transparent);
  border-bottom-style: solid;
}
button.word::after {
  content: "°";
  color: var(--verdigris);
  font-size: .85em;
  vertical-align: super;
  line-height: 0;
}

/* The popover. On a wide screen a card in the middle, on a narrow one a sheet
   from below; both in CSS, nothing switched in the code. */
.glossary {
  border: 1px solid var(--rule);
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--work);
  font-size: .94rem;
  line-height: 1.55;
  box-shadow: 0 1.2rem 3rem rgb(32 28 24 / .22);
  padding: calc(var(--air) * 1.1) 1.6rem 1.2rem;
}
.glossary::backdrop {
  background: rgb(32 28 24 / .34);
}
.glossary p { margin: 0 0 .7rem; }
.glossary-figure {
  margin: 1rem 0;
}
.glossary-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(15rem, 35vh);
  object-fit: contain;
}
.glossary-figure figcaption {
  margin-top: .45rem;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--ink-quiet);
}
.glossary-mark {
  font-family: var(--apparatus);
  font-size: .7rem !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}
.glossary-locus {
  margin-top: 1rem !important;
  padding-top: .7rem;
  border-top: 1px solid var(--rule-fine);
  font-family: var(--apparatus);
  font-size: .78rem;
}
.glossary-locus a { color: var(--verdigris); }
.glossary a { color: var(--verdigris); }
.glossary-close {
  font-family: var(--apparatus);
  font-size: .76rem;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: .35rem .9rem;
  color: var(--ink-quiet);
  cursor: pointer;
}
.glossary-close:hover { border-color: var(--ink-far); color: var(--ink); }

@media (min-width: 701px) {
  .glossary {
    max-width: 27rem;
    /* Subtract the vertical padding, borders and one rem of room on each side. */
    max-height: calc(100dvh - (var(--air) * 1.1) - 3.2rem - 2px);
    overflow-y: auto;
    margin: auto;
    border-radius: 3px;
  }
}
@media (max-width: 700px) {
  .glossary {
    box-sizing: border-box;
    margin: auto auto 0;
    width: 100%;
    max-width: none;
    max-height: 78vh;
    overflow-y: auto;
    border-radius: 8px 8px 0 0;
    border-bottom: 0;
  }
}