/* The one "i" (assets/js/info.js, tools/pages/_info.py): a small round button, its words in a flat box under it.
   44 px to tap from a 22 px circle: the button's padding is the tap room, the margin gives it back to the line. */
.info { position: relative; display: inline-block; vertical-align: baseline; }
.info-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin: -12px -11px -12px -7px; padding: 0;
  border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; vertical-align: middle;
}
.info-button::before {
  content: "i"; display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: 1.5px solid currentColor; border-radius: 50%;
  font-family: Georgia, "Times New Roman", serif; font-size: 13px; font-style: italic; font-weight: 700; line-height: 1;
}
.info-button { font-size: 0; }
.info-button[aria-expanded="true"]::before { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.band-dark .info-button[aria-expanded="true"]::before { color: #1d1d1f; }
.info-button:focus-visible { outline: 2px solid var(--ink); outline-offset: -9px; border-radius: 50%; }
.info-pop {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(320px, calc(100vw - 24px));
  padding: 10px 12px; border-radius: 6px; background: #1d1d1f; color: #f5f5f7;
  font-size: 14px; font-weight: 400; font-style: normal; line-height: 20px; letter-spacing: 0; text-align: left; white-space: normal;
  text-wrap: pretty; -webkit-font-smoothing: antialiased;
}
.info-pop[hidden] { display: none; }
.band-dark .info-pop { background: #f5f5f7; color: #1d1d1f; -webkit-font-smoothing: auto; }
.info-pop a { color: inherit; }
/* A longer one (the method page's months, with its sources) scrolls inside its box. */
.info-pop:has(.info-more) { max-width: min(420px, calc(100vw - 24px)); max-height: 60vh; overflow-y: auto; }
.info-more > span { display: block; }
.info-more > span + span { margin-top: 8px; }