/* Motion Bay — the Help Explorer block.
   Loaded by /help/, /help/<family>/, /help/<family>/<crop>/, every
   /<locale>/help/<family>/, and the homepage (the Support sheet injects these
   pages into the dialog).

   SELF-CONTAINED ON PURPOSE. The block renders on three different page themes
   — the feature theme (feature.css), the Help theme (help.css, body.help) and
   inside the homepage's legal modal — so it carries its own tokens and never
   inherits a colour it cannot predict. Everything is scoped under
   .help-explorer; nothing here can reach any other part of a page.

   Mobile-first: one column everywhere, the four family toggles wrap, and every
   interactive thing is at least a 44px target — including the smallest region
   on the frame, which is 11.8% of a 2796px-wide screenshot (~41px at 390px
   viewport) and so gets a centred 44px hit area that does not change the
   outline it draws. */

.help-explorer {
  --he-fc: #8fe0f5;              /* the selected family's colour, set inline */
  --he-bg: #0a0a0f;
  --he-card: rgba(255, 255, 255, 0.035);
  --he-border: rgba(255, 255, 255, 0.09);
  --he-text: #f0f0f5;
  --he-dim: rgba(255, 255, 255, 0.62);
  --he-muted: rgba(255, 255, 255, 0.38);
  --he-radius: 18px;

  display: block;
  width: 100%;
  margin: 0 0 28px;
  font: 400 16px/1.55 -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  color: var(--he-text);
  -webkit-text-size-adjust: 100%;
}

/* `hidden` has to beat the display: flex rules below, or a mono-view family
   would still show its mode row. */
.help-explorer [hidden] { display: none !important; }

/* Carried into the accessible name, never onto the screen: the count is drawn
   as a numeral (aria-hidden) and spoken as " — 6". */
.help-explorer .he-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- 1+2. row 1 groups (buttons), row 2 items (links) --------------------
   Arvy, 2026-09-15. Row 1: six groups in gray, the one being browsed brighter
   and underlined. Row 2: that group's items in the group's colour, the selected
   item underlined. Row 2 wraps (some labels are long); the bar reserves two
   item lines so short and long groups keep the frame in the same place. */
.help-explorer .he-bar {
  margin: 0 0 20px;  /* row 2's last line -> frame top: 20px */
}
.help-explorer .he-groups {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  row-gap: 2px;
}
.help-explorer .he-items {
  display: flex;
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 0;
  margin-top: 4px;
  min-height: 52px;
  align-content: flex-start;
}
.help-explorer .he-group,
.help-explorer .he-item {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  text-decoration: none;
  text-underline-offset: 4px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.help-explorer .he-group {
  font-size: 17px;
  line-height: 26px;
  font-weight: 500;
  text-transform: lowercase;
  color: var(--he-muted);
}
.help-explorer .he-group[aria-pressed='true'] {
  color: var(--he-text);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.help-explorer .he-item {
  font-size: 15px;
  line-height: 26px;
  color: var(--gc);
}
.help-explorer .he-item[aria-current='true'],
.help-explorer .he-item[aria-pressed='true'] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.help-explorer .he-group:hover { color: var(--he-text); }
.help-explorer .he-item:hover { text-decoration: underline; }
.help-explorer .he-group:focus-visible,
.help-explorer .he-item:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }
/* ---- 2. the frame, as a loop, with the region map over it --------------- */
.help-explorer .he-frame {
  position: relative;
  width: 100%;
  margin: 0 0 18px;
  border-radius: var(--he-radius);
  overflow: hidden;
  background: #05070a;
  line-height: 0;
}
/* Two slots stacked in the same box; only [data-active] is seen. The hidden one
   loads the next loop and takes over on its first decoded frame — see
   swapSlot() in src/scripts/help-explorer.ts for the measurement behind it. */
.help-explorer .he-frame-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.help-explorer .he-frame-video:not([data-active]) { opacity: 0; pointer-events: none; }
/* The shade: one traced shape, soft-edged, half-strength (Arvy, 2026-09-15:
   "low alpha, let's try 0.5"). Blurred as a whole element so the edge is the
   same 6 CSS px at any frame size. Not interactive — row 2 is the control. */
.help-explorer .he-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  filter: blur(6px);
  pointer-events: none;
  overflow: visible;
}

/* The shape itself takes the pointer (hover / tap for the close-up); the blurred
   svg box around it stays click-through. */
.help-explorer .he-shade path { pointer-events: visiblePainted; cursor: zoom-in; }
.help-explorer .he-zoom {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
  z-index: 2;
  /* OWN LAYER, OR SAFARI BURIES IT INSIDE THE SHEET (measured 2026-09-15,
     Safari on motionbay.app: no amber outline in the homepage Support sheet,
     correct in Chrome — and correct in Safari on the standalone /support/ page,
     so it is the <dialog> that makes the difference, not the browser alone).
     The canvas BITMAP was right all along: sampled amber at both the outer and
     the inner ring rows of the compass shape while nothing was on screen. In
     the dialog's top layer WebKit composites the two promoted <video> slots
     above a painted-but-unpromoted sibling, whatever its z-index says — setting
     an explicit z-index on the videos changed nothing (tested), hiding the
     videos brought the outline straight back, and promoting the canvas fixes it
     with the videos in place. */
  transform: translateZ(0);
}

/* ---- 3 + 4. the cards --------------------------------------------------- */
.help-explorer .he-card {
  margin: 0 0 18px;
  padding: 20px;
  border: 1px solid var(--he-border);
  border-radius: var(--he-radius);
  background: var(--he-card);
}
.help-explorer .he-card-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font: 650 22px/1.2 inherit;
  letter-spacing: -0.01em;
  color: var(--he-text);
}
.help-explorer .he-badge {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--he-fc);
  color: #07070b;
  font: 600 11px/20px ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
  text-align: center;
}
/* Sharp corners on the crop: a square window reads as a cut out of something
   larger, which is exactly what it is. Soft container, hard aperture. */
.help-explorer .he-shot {
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  line-height: 0;
  background: none;
}
/* THE CROP AT ITS OWN ASPECT. width/height attributes carry the crop's pixel
   size, so `height: auto` gives a 12:1 ribbon strip its 12:1 box and a dial its
   square one — no forced 3:2, and no band either side, because the dark ground
   is on the video, not the figure. The only exception is a strip so thin its
   natural height would be under 72px: min-height holds it at 72px and
   object-fit: contain letterboxes it top and bottom on that dark ground. At its
   natural size contain is a no-op, so the rule costs nothing elsewhere. */
.help-explorer .he-crop-video {
  display: block;
  width: 100%;
  height: auto;
  min-height: 72px;
  object-fit: contain;
  background: #0b0f0e;
}
/* The hidden slot loads the next crop out of layout and out of sight. */
.help-explorer .he-crop-video:not([data-active]) {
  position: absolute;
  inset: 0;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.help-explorer .he-meaning {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--he-dim);
  max-width: 62ch;
}
.help-explorer .he-detail {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--he-muted);
  max-width: 62ch;
}
.help-explorer .he-detail:empty { display: none; }


.help-explorer .he-faq { padding: 4px 20px; }
.help-explorer .he-faq details {
  border-bottom: 1px solid var(--he-border);
  padding: 15px 0;
}
.help-explorer .he-faq details:last-child { border-bottom: 0; }
.help-explorer .he-faq summary {
  cursor: pointer;
  list-style: none;
  min-height: 28px;
  font: 600 16px/1.4 inherit;
  color: var(--he-text);
}
.help-explorer .he-faq summary::-webkit-details-marker { display: none; }
.help-explorer .he-faq summary::before {
  content: '+';
  display: inline-block;
  width: 1.1em;
  color: var(--he-muted);
  font-weight: 400;
}
.help-explorer .he-faq details[open] summary::before { content: '−'; }
.help-explorer .he-faq summary:hover { color: var(--he-fc); }
.help-explorer .he-faq details p {
  margin: 10px 0 2px 1.1em;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--he-dim);
  max-width: 66ch;
}

/* The crop's long-form article, below the card it belongs to. */
.help-explorer-page .he-body {
  margin: 6px 0 34px;
  max-width: 66ch;
  color: var(--text-dim, rgba(255, 255, 255, 0.62));
  font-size: 17px;
  line-height: 1.7;
}
.help-explorer-page .he-body h2 {
  margin: 30px 0 10px;
  font-size: 21px;
  font-weight: 650;
  color: var(--text, #f0f0f5);
}
.help-explorer-page .he-body h3 {
  margin: 24px 0 8px;
  font-size: 17.5px;
  font-weight: 650;
  color: var(--text, #f0f0f5);
}
.help-explorer-page .he-body p { margin: 0 0 16px; }
.help-explorer-page .he-body ul,
.help-explorer-page .he-body ol { margin: 0 0 16px; padding-inline-start: 1.3em; }
.help-explorer-page .he-body li { margin: 0 0 7px; }
.help-explorer-page .he-body a { color: var(--accent, #4f8fff); }

/* On the Help index the block sits inside .wrap, which already has the page's
   own rhythm; keep it from doubling the gap above the article list. */
body.help .help-explorer { margin-bottom: 34px; }

@media (min-width: 700px) {
  .help-explorer .he-card { padding: 22px 24px; }
  .help-explorer .he-faq { padding: 6px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .help-explorer .he-group,
  .help-explorer .he-item { transition: none; }
}



/* color-mix is 2023+ Safari/Chrome; older engines get the plain outline, which
   still reads — the selected state is also carried by the inset bar and by
   aria-pressed. */
@supports not (color: color-mix(in srgb, red 50%, transparent)) {
  .help-explorer .he-region[aria-pressed='true'] { background: rgba(255, 255, 255, 0.18); }
}

/* Inside a text page (Support), the explorer is a section after prose: give it a section gap. */
.doc .help-explorer { margin-top: 1.2rem; margin-bottom: 2.4rem; }

/* Arvy, 2026-09-13 16:25: the crop viewport is SMALLER than the frame viewport —
   up to 72% of the card, centred — so the frame reads as the map and the crop as
   the detail. Phones keep it full width; the card is already narrow there.
   The 72% is on the FIGURE, not the video: sized on the video it left the
   figure's own ground showing as a band either side of the crop. */
.help-explorer .he-shot { width: 72%; max-width: 72%; margin-inline: auto; }
@media (max-width: 600px) { .help-explorer .he-shot { width: 100%; max-width: 100%; } }

/* Arvy, 2026-09-14: the crop card is a FIXED 400px tall, whatever the crop.
   Heading and words take what they need; the crop loop gets the rest and
   scales down inside it at its own aspect (contain), centred. On a phone where
   the words alone outgrow the card, the card scrolls rather than cutting them. */
.help-explorer .he-crop-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 200px;     /* was 400px with the crop loop; words only now (Arvy, 2026-09-15: half) */
  overflow-y: auto;
}
.help-explorer .he-crop-card > :not(.he-shot) { flex: 0 0 auto; }
/* At 200px the longest card (compass) ran 4px over and scrolled; the heading's gap pays for it. */
.help-explorer .he-crop-card .he-card-h { margin-bottom: 8px; }
.help-explorer .he-crop-card .he-shot {
  flex: 1 1 0;
  min-height: 72px;
  background: transparent !important;   /* a page-level figure ground showed as a band beside a narrow crop */
  display: flex;
  align-items: center;
  justify-content: center;
}
.help-explorer .he-crop-card .he-crop-video[data-active] {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
}