Fix colorbar visibility, tutorial z-index, and arrow positioning on mobile

- Colorbar: raise z-index from 15 to 25 (above panels at 20-21), detect
  bottom drawer vs sidebar by actual layout width instead of viewport size,
  position above drawer pull when panel is closed on mobile
- Tutorial: add body.tutorial-active class to raise panels/pulls (z-10000)
  above tutorial modal (z-9999), highlights at z-10002, arrows at z-10003
- Arrow: detect hidden targets (zero dimensions) and fall back to parent
  panel, fixing video panel arrow appearing at top-left on mobile
- Arrow refresh: start interval for arrow-only steps (not just highlight
  steps), so arrows follow elements that move during drawer transitions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: jeremymanning

src/ui/tutorial.css

@@ -16,14 +16,25 @@
 /* Highlight ring on targeted elements */
 .tutorial-highlight {
   position: relative;
-  z-index: 9999;
+  z-index: 10002 !important;
   outline: 2px solid var(--tutorial-accent);
   outline-offset: 4px;
   border-radius: inherit;
   box-shadow: 0 0 0 9999px rgba(0,0,0,0.45), 0 0 8px 2px rgba(0, 105, 62, 0.4);
   animation: tutorialPulse 1.5s ease-in-out infinite;
 }
 
+/* During tutorial, raise drawers and pulls above the tutorial modal (z-index 9999) */
+body.tutorial-active #quiz-panel,
+body.tutorial-active #video-panel {
+  z-index: 10000 !important;
+}
+body.tutorial-active .quiz-toggle-btn,
+body.tutorial-active .video-toggle-btn,
+body.tutorial-active .drawer-pull {
+  z-index: 10001 !important;
+}
+
 /* Arrow bounce animations for each direction */
 @keyframes tutorialArrowBounce {
   0%, 100% { transform: translateX(0); }
@@ -83,8 +94,8 @@
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   .tutorial-highlight {
-    animation: none;
-    box-shadow: 0 0 0 9999px rgba(0,0,0,0.45), 0 0 8px 2px rgba(0, 105, 62, 0.3);
+    animation: none !important;
+    box-shadow: 0 0 0 9999px rgba(0,0,0,0.45), 0 0 8px 2px rgba(0, 105, 62, 0.3) !important;
   }
   #tutorial-modal { transition: none !important; }
   #tutorial-overlay { transition: none !important; }

src/ui/tutorial.js

@@ -425,7 +425,7 @@ function showDismissConfirmation() {
   const overlay = document.createElement('div');
   overlay.id = 'tutorial-dismiss-confirm';
   Object.assign(overlay.style, {
-    position: 'fixed', inset: '0', zIndex: '10001',
+    position: 'fixed', inset: '0', zIndex: '10005',
     background: 'rgba(0,0,0,0.5)',
     display: 'flex', alignItems: 'center', justifyContent: 'center',
   });
@@ -479,6 +479,7 @@ export function dismissTutorial() {
   saveState();
   removeOverlay();
   stopHighlightRefresh();
+  document.body.classList.remove('tutorial-active');
 }
 
 export function resetTutorial() {
@@ -549,6 +550,7 @@ function completeTutorial() {
   saveState();
   removeOverlay();
   stopHighlightRefresh();
+  document.body.classList.remove('tutorial-active');
 
   // Re-select "All (General)" domain and zoom fully out
   const allOption = document.querySelector('.custom-select-option[data-value="all"]');
@@ -692,6 +694,7 @@ function showWelcomePrompt() {
 // ── Rendering ───────────────────────────────────────────────────────
 
 function renderCurrentStep() {
+  document.body.classList.add('tutorial-active');
   const stepDef = getStepDef(state.step);
   if (!stepDef) { completeTutorial(); return; }
   // Skip top-level steps marked skipOnMobile on render (e.g. resumed state)
@@ -900,13 +903,16 @@ function executeOnEnter(action) {
 
 function startHighlightRefresh() {
   stopHighlightRefresh();
-  if (!_currentHighlightSelector) return;
+
+  // Start refresh if there's a highlight OR an active arrow (arrow-only steps need repositioning too)
+  const hasArrow = !!document.getElementById('tutorial-arrow');
+  if (!_currentHighlightSelector && !hasArrow) return;
 
   _highlightInterval = setInterval(() => {
-    if (!_currentHighlightSelector) { stopHighlightRefresh(); return; }
+    const arrowEl = document.getElementById('tutorial-arrow');
+    if (!_currentHighlightSelector && !arrowEl) { stopHighlightRefresh(); return; }
 
     // Reposition arrow (panels may animate after onEnter)
-    const arrowEl = document.getElementById('tutorial-arrow');
     if (arrowEl && arrowEl._targetSelector) {
       const target = queryFirst(arrowEl._targetSelector);
       if (target) repositionArrow(arrowEl, target, arrowEl._side);
@@ -923,9 +929,7 @@ function stopHighlightRefresh() {
 }
 
 function _onResizeHighlight() {
-  if (!_currentHighlightSelector) return;
-
-  // Reposition arrow
+  // Reposition arrow on resize (works for both highlight and arrow-only steps)
   const arrowEl = document.getElementById('tutorial-arrow');
   if (arrowEl && arrowEl._targetSelector) {
     const target = queryFirst(arrowEl._targetSelector);
@@ -974,7 +978,7 @@ function renderArrow(targetEl, side = 'left') {
 
   Object.assign(arrow.style, {
     position: 'fixed',
-    zIndex: '10000',
+    zIndex: '10003',
     width: '32px',
     height: '32px',
     pointerEvents: 'none',
@@ -1027,7 +1031,20 @@ function renderArrow(targetEl, side = 'left') {
 }
 
 function repositionArrow(arrow, targetEl, side) {
-  const rect = targetEl.getBoundingClientRect();
+  let rect = targetEl.getBoundingClientRect();
+
+  // If target is hidden (zero dimensions), try its parent panel as fallback
+  if (rect.width === 0 && rect.height === 0) {
+    const panel = targetEl.closest('#video-panel, #quiz-panel');
+    if (panel) rect = panel.getBoundingClientRect();
+    // Still zero? Hide arrow
+    if (rect.width === 0 && rect.height === 0) {
+      arrow.style.display = 'none';
+      return;
+    }
+  }
+  arrow.style.display = '';
+
   const size = 32;
   let top, left;
 

src/viz/renderer.js

@@ -138,7 +138,7 @@ export class Renderer {
     this._colorbarEl = document.createElement('div');
     this._colorbarEl.className = 'map-colorbar';
     this._colorbarEl.style.cssText =
-      'position:absolute;bottom:16px;right:16px;z-index:15;' +
+      'position:absolute;bottom:16px;right:16px;z-index:25;' +
       'width:12px;height:120px;border-radius:6px;cursor:grab;' +
       'background:linear-gradient(to bottom, rgb(0,105,62), rgb(245,220,105) 50%, rgb(157,22,46));' +
       'box-shadow:0 2px 8px rgba(0,0,0,0.15);border:1px solid rgba(0,0,0,0.1);' +
@@ -808,25 +808,38 @@ export class Renderer {
       }
       if (this._colorbarUserDragged) return;
 
-      if (panelOpen && isMobile) {
-        // Mobile: panel is a bottom drawer — move colorbar above it
+      if (panelOpen) {
         const panelRect = quizPanel.getBoundingClientRect();
         const containerRect = this._container.getBoundingClientRect();
-        const panelTopRelative = panelRect.top - containerRect.top;
-        const newBottom = containerRect.height - panelTopRelative + 8;
+        const isBottomDrawer = panelRect.width > containerRect.width * 0.8;
+
+        if (isBottomDrawer) {
+          // Bottom drawer (mobile portrait): move colorbar above the panel
+          const panelTopRelative = panelRect.top - containerRect.top;
+          const newBottom = containerRect.height - panelTopRelative + 8;
+          this._colorbarEl.style.bottom = newBottom + 'px';
+          this._colorbarEl.style.right = '16px';
+          this._colorbarEl.style.left = 'auto';
+          this._colorbarEl.style.top = 'auto';
+        } else {
+          // Right sidebar (desktop or landscape): move colorbar left of the panel
+          const panelLeftRelative = panelRect.left - containerRect.left;
+          this._colorbarEl.style.left = (panelLeftRelative - 30) + 'px';
+          this._colorbarEl.style.bottom = '16px';
+          this._colorbarEl.style.right = 'auto';
+          this._colorbarEl.style.top = 'auto';
+        }
+      } else if (isMobile) {
+        // Panel closed on mobile — position above the drawer pull area
+        const panelRect = quizPanel.getBoundingClientRect();
+        const containerRect = this._container.getBoundingClientRect();
+        const newBottom = containerRect.height - (panelRect.top - containerRect.top) + 8;
         this._colorbarEl.style.bottom = newBottom + 'px';
         this._colorbarEl.style.right = '16px';
         this._colorbarEl.style.left = 'auto';
         this._colorbarEl.style.top = 'auto';
-      } else if (panelOpen && !isMobile) {
-        // Desktop: panel is a right sidebar — move colorbar left of it
-        const panelWidth = quizPanel.offsetWidth;
-        this._colorbarEl.style.right = (panelWidth + 24) + 'px';
-        this._colorbarEl.style.bottom = '16px';
-        this._colorbarEl.style.left = 'auto';
-        this._colorbarEl.style.top = 'auto';
       } else {
-        // Panel closed — return to default
+        // Panel closed on desktop — return to default
         this._colorbarEl.style.right = '16px';
         this._colorbarEl.style.bottom = '16px';
         this._colorbarEl.style.left = 'auto';