/* Help guides: a screenshot opened full size (static/js/help.js), on wildhoney.io/help/ and from the
   console's help panel. Both pages reset every element's margin (Tailwind's preflight), which also
   removes the margin:auto that centres a modal <dialog>; it's restored here. The console's Unfold
   also styles every <dialog> (28rem wide, moved up and left by half its size): undone here. */
dialog.help-lightbox {
  position: fixed; inset: 0; margin: auto; translate: none; width: fit-content; height: fit-content;
  padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible;
  max-width: calc(100vw - 2rem); max-height: calc(100dvh - 2rem); color: #fff;
}
dialog.help-lightbox[open] { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
dialog.help-lightbox::backdrop { background: rgb(15 15 15 / .82); }
.help-lightbox-frame { position: relative; display: block; }
dialog.help-lightbox img {
  display: block; width: auto; height: auto; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 7rem);
  border-radius: var(--radius-theme, 8px); background: #fff; box-shadow: 0 24px 64px -16px rgb(0 0 0 / .6);
}
dialog.help-lightbox p { margin: 0; max-width: min(60ch, calc(100vw - 2rem)); font-size: .875rem; line-height: 1.5; text-align: center; color: #fff; }
dialog.help-lightbox p:empty { display: none; }
dialog.help-lightbox .help-lightbox-close {
  position: absolute; top: -.75rem; right: -.75rem; display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border: 0; border-radius: 999px; background: #fff; color: #111;
  font-size: 1rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 12px rgb(0 0 0 / .35);
}
dialog.help-lightbox .help-lightbox-close:hover { background: #f1f1f1; }
dialog.help-lightbox .help-lightbox-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html:has(dialog.help-lightbox[open]) { overflow: hidden; }
@media (max-width: 40rem) {
  /* Phones: the ✕ sits inside the picture's corner so the 16px gutter stays clear. */
  dialog.help-lightbox .help-lightbox-close { top: .375rem; right: .375rem; }
}