/* ---- Help tooltips ("?" button + bubble) ------------------------------------------------
   One pattern site-wide: the tip() Jinja global (web/tooltips.py) draws the markup, the words
   come from web/help_text.py, web/static/tooltips.js shows and places the bubble. Paste this
   block at the end of the site's main stylesheet (or load it after it) and point the --tip-*
   tokens at the theme's own tokens. Colours are tokens only, so the dark theme follows.

   Alignment (the "?" must sit on its text's line, never float):
   * INLINE (default): the mark is the last thing inside the element it explains -- a heading,
     a <th>, a <legend>, a figure label, a <figcaption>. vertical-align: middle centres the
     circle on the text's lower-case letters at every font size, and the word joiner the
     global emits keeps the mark on the same line as the last word.
   * ANCHOR (form labels, and any flex or grid row): wrap the label and the mark in
     <span class="tip-anchor">; the row aligns on the first baseline, so the circle sits on the
     label's first line however the label wraps.
   * Never a "?" on a row of its own, never a direct child of a space-between flex row.
   Author: Jeremiah Buttler
   ------------------------------------------------------------------------------------------ */
:root {
  --tip-ink: var(--fg, CanvasText);
  --tip-muted: var(--fg-dim, GrayText);
  --tip-face: var(--surface, Canvas);
  --tip-bubble: var(--surface-raised, Canvas);
  --tip-rule: var(--fg-dim, GrayText);
  --tip-accent: var(--accent, LinkText);
  --tip-shadow: 0 6px 18px rgb(0 0 0 / 0.5);   /* the site is dark by default */
}
/* Dark shadow, always: the explicit theme switch (data-theme="dark"). Every project keeps this rule. */
:root[data-theme="dark"] { --tip-shadow: 0 6px 18px rgb(0 0 0 / 0.5); }

.tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;          /* INLINE: centre on the text's x-height ... */
  top: -0.08em;                    /* ... lifted onto the middle of the letters */
  margin-inline-start: 0.35em;
  margin-block: -0.2rem;           /* never makes a tight row (a table header) taller */
  line-height: 1;
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
}
/* A mark can wrap onto a line of its own when the text just fills the line (no character stops
   that before an inline box). Where the alignment check finds one, keep the last word with it:
   Last <span class="tip-keep">seen + the tip() call</span> (see the skill). */
.tip-keep { white-space: nowrap; }
.tip-anchor {                       /* ANCHOR: the label, then the mark, in one row */
  display: inline-flex;
  align-items: baseline;
  max-inline-size: 100%;
}
.tip-anchor--block { display: flex; }   /* a block heading row: <div class="tip-anchor tip-anchor--block"> */
.tip-anchor > :first-child { min-inline-size: 0; }
.tip-anchor > .tip { align-self: baseline; flex: none; margin-block: 0; }

.tip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.15rem;
  block-size: 1.15rem;
  padding: 0;
  border: 1px solid var(--tip-rule);
  border-radius: 50%;
  background: var(--tip-face);
  color: var(--tip-muted);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  flex: none;
}
/* A larger touch target than the drawn circle (about 32px), without moving the layout. */
.tip-btn::after {
  content: "";
  position: absolute;
  inset: -0.45rem;
}
.tip-btn:hover,
.tip.is-open .tip-btn {
  color: var(--tip-ink);
  border-color: var(--tip-accent);
}
.tip-btn:focus-visible {
  outline: 2px solid var(--tip-accent);
  outline-offset: 2px;
}

.tip-body {
  position: absolute;
  z-index: 1000;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  transform: translateX(-50%);
  inline-size: max-content;
  max-inline-size: min(20rem, calc(100vw - 1rem));
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--tip-rule);
  border-radius: 6px;
  background: var(--tip-bubble);
  color: var(--tip-ink);
  box-shadow: var(--tip-shadow);
  font-size: 0.8125rem;
  font-weight: 400;
  font-style: normal;
  line-height: 1.45;
  text-align: start;
  white-space: normal;
  text-transform: none;
  letter-spacing: normal;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.tip-line { display: block; }
.tip-line + .tip-line, .tip-line + .tip-list, .tip-list + .tip-line { margin-block-start: 0.35rem; }
.tip-list { margin: 0.35rem 0 0; padding-inline-start: 1.1rem; list-style: disc; }
.tip-list li + li { margin-block-start: 0.15rem; }
.tip-body--below { bottom: auto; top: calc(100% + 0.5rem); }
/* Placed by the script: fixed to the viewport so an overflow: hidden tile cannot clip it. */
.tip-body--fixed { position: fixed; bottom: auto; transform: none; }
.tip.is-open .tip-body {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
/* No script: hover and keyboard focus still show the bubble in place. */
:root:not(.tips-ready) .tip:hover .tip-body,
:root:not(.tips-ready) .tip:focus-within .tip-body {
  visibility: visible;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) { .tip-body { transition: none; } }
@media (forced-colors: active) { .tip-btn, .tip-body { border-color: CanvasText; } }
@media print { .tip { display: none; } }