/* The help lightbox (help-lightbox.js): a guide's screenshot full screen, over everything (a modal <dialog>
   is in the top layer, above the help panel too). Dark in both themes, as a picture viewer is, so the
   screenshot's own colours read the same either way. The figure's link keeps the picture's layout: it is a
   block the size of the picture, so wrapping the picture in it moves nothing. */

.help-figure .help-zoom { display: block; width: fit-content; max-width: 100%; border-radius: 12px; cursor: zoom-in; }
.help-figure .help-zoom:focus-visible { outline: 3px solid var(--accent, #6e5af0); outline-offset: 3px; }
.help-figure .help-zoom img { display: block; }

.help-lightbox {
  --lb-ink: #f4f2fa;
  --lb-muted: #c3bfd2;
  --lb-line: rgba(255, 255, 255, .18);
  --lb-button: rgba(255, 255, 255, .1);
  --lb-button-hover: rgba(255, 255, 255, .2);
  --lb-focus: #a99bff;
  color-scheme: dark;
  position: fixed; inset: 0;
  width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: #0c0a12; color: var(--lb-ink);
  overscroll-behavior: contain;
}
.help-lightbox::backdrop { background: rgba(10, 8, 16, .6); backdrop-filter: none; }
.help-lightbox[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }

.help-lightbox-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
.help-lightbox-count { flex: 1; margin: 0; padding-left: 4px; color: var(--lb-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.help-lightbox-btn, .help-lightbox-nav {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border: 1px solid var(--lb-line); border-radius: 10px;
  background: var(--lb-button); color: var(--lb-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.help-lightbox-btn:hover, .help-lightbox-nav:hover { background: var(--lb-button-hover); }
.help-lightbox-btn[aria-pressed="true"] { background: var(--lb-ink); color: #15121d; border-color: var(--lb-ink); }
.help-lightbox :focus-visible { outline: 3px solid var(--lb-focus); outline-offset: 2px; }
.help-lightbox svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.help-lightbox-stage { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); align-items: center; gap: 8px; min-height: 0; padding: 0 12px; }
.help-lightbox-nav { width: 48px; height: 48px; padding: 0; border-radius: 50%; }
.help-lightbox.is-single .help-lightbox-nav { visibility: hidden; }

/* Fit: as large as the frame allows, never past the picture's own pixels. Actual size: every pixel, and the
   frame scrolls (auto margins keep a smaller picture centred without hiding any overflow). */
.help-lightbox-frame { display: flex; align-self: stretch; min-width: 0; min-height: 0; overflow: hidden; }
.help-lightbox-img { display: block; margin: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; background: #fff; }
.help-lightbox.is-actual .help-lightbox-frame { overflow: auto; }
.help-lightbox.is-actual .help-lightbox-img { flex: none; max-width: none; max-height: none; border-radius: 0; }

.help-lightbox-text { padding: 10px 16px 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); text-align: center; }
.help-lightbox-caption { margin: 0 auto; max-width: 72ch; font-size: 15px; line-height: 1.45; }
.help-lightbox-alt { margin: 4px auto 0; max-width: 72ch; color: var(--lb-muted); font-size: 13px; line-height: 1.45; }

/* A phone: the arrows sit over the picture's edges, so the picture keeps the width. */
@media (max-width: 640px) {
  .help-lightbox-stage { grid-template-columns: minmax(0, 1fr); padding: 0 6px; }
  .help-lightbox-frame { grid-column: 1; grid-row: 1; }
  .help-lightbox-nav { position: absolute; top: 50%; z-index: 1; width: 44px; height: 44px; transform: translateY(-50%); background: rgba(10, 8, 16, .7); }
  .help-lightbox-prev { left: 8px; }
  .help-lightbox-next { right: 8px; }
  .help-lightbox-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .help-lightbox-btn:has(span) { padding: 0 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .help-lightbox[open] { animation: help-lightbox-in .14s ease-out; }
  @keyframes help-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
}