/* css.slopped.site exhibit: Tooltips that know where they are. From css/exhibits/tooltip.mjs. */
.x-tooltip .passage { max-width: 34ch; margin: 30px auto 60px; font-size: clamp(20px, 2.6vw, 30px); line-height: 1.9; }
.x-tooltip .term { padding: 0 2px; border: 0; border-bottom: 2.5px dotted currentColor; background: none; color: inherit; font: inherit; line-height: 1.2; cursor: help; }
.x-tooltip .term:hover, .x-tooltip .term:focus-visible { background: var(--acid); color: var(--on-acid); }
.x-tooltip .tip { width: max-content; max-width: min(260px, calc(100vw - 40px)); padding: 10px 14px; border-radius: 10px; background: var(--ink); color: var(--paper); font-size: 15px; line-height: 1.4; pointer-events: none; }
/* key */
/* hidden until its word is hovered or focused */
.x-tooltip .tip { display: none; }
.x-tooltip .term:is(:hover, :focus-visible) + .tip { display: block; }

/* anchor positioning: above the word, centred; flipped below if it would leave the screen */
@supports (anchor-name: --a) {
  .x-tooltip .tip {
    position: fixed;               /* escapes any box that clips it */
    position-area: top;            /* the anchor is named in the HTML: style="position-anchor: --stapler" */
    margin-bottom: 8px;
    position-try-fallbacks: flip-block;
  }
}
/* without it: the old way, above the whole passage rather than the word, and no flipping */
@supports not (anchor-name: --a) {
  .x-tooltip .passage { position: relative; }
  .x-tooltip .tip { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 2; max-width: 100%; }
}
/* /key */

/* live support notes (built from css/exhibits.js) */
.sup-anchor .sup-no { display: none; }
@supports not (anchor-name: --a) { .sup-anchor .sup-yes { display: none; } .sup-anchor .sup-no { display: inline; } .sup-anchor { --sup: var(--no); } }
.sup-has .sup-no { display: none; }
@supports not selector(:has(*)) { .sup-has .sup-yes { display: none; } .sup-has .sup-no { display: inline; } .sup-has { --sup: var(--no); } }