Add sidebar section jump links with mark-done tracking

- Inject .step-subnav placeholder after active step link in sidebar
- After each step renders, scan h2 + Task/Step h3 headings from the
  markdown and build clickable jump links in the subnav
- Each jump link has a small mark-done button (○ / ✓) that:
  * Toggles done state per section per step
  * Persists to localStorage (cli-workshop-section-done:{stepId})
  * Restores on page load (checked state shown immediately)
- Clicking a link smooth-scrolls the content pane to that heading
- Completed sections show green ✓ and dimmed link text
- CSS: .step-subnav, .subnav-item, .subnav-h3, .subnav-done-btn in styles.css

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: jamesmontemagno

docs/step.html

@@ -96,11 +96,13 @@
   nav.innerHTML = STEPS.map(s => {
     const isCurrent = s.id === currentId;
     const isDone = done.includes(s.id) && !isCurrent;
-    return `<a href="${buildStepURL(s.id)}" class="step-link${isCurrent ? ' active' : ''}${isDone ? ' done' : ''}">
+    const link = `<a href="${buildStepURL(s.id)}" class="step-link${isCurrent ? ' active' : ''}${isDone ? ' done' : ''}">
       <span class="step-num">${isDone ? '✓' : s.number}</span>
       <span class="step-name">${s.title}</span>
       <span class="step-dur">${s.time}</span>
     </a>`;
+    const subnav = isCurrent ? `<div class="step-subnav" id="stepSubnav"></div>` : '';
+    return link + subnav;
   }).join('');
   const pct = Math.round(done.length / STEPS.length * 100);
   document.getElementById('progressFill').style.width = pct + '%';
@@ -191,6 +193,7 @@
     fixCheckboxes();
     rewriteLinks(stepId);
     initOsTabs();
+    buildSubnav(stepId);
     markDone(stepId);
     document.getElementById('mainContent').scrollTop = 0;
     buildSidebar(stepId); // refresh to show done
@@ -209,6 +212,82 @@
 }
 
 const OS_TAB_KEY = 'cli-workshop-os-tab';
+const SECTION_DONE_PREFIX = 'cli-workshop-section-done:';
+
+function getSectionDone(stepId) {
+  try { return JSON.parse(localStorage.getItem(SECTION_DONE_PREFIX + stepId) || '[]'); } catch { return []; }
+}
+
+function toggleSectionDone(stepId, anchor, btn) {
+  let done = getSectionDone(stepId);
+  const wasDone = done.includes(anchor);
+  if (wasDone) {
+    done = done.filter(a => a !== anchor);
+  } else {
+    done.push(anchor);
+  }
+  try { localStorage.setItem(SECTION_DONE_PREFIX + stepId, JSON.stringify(done)); } catch {}
+  const item = btn.closest('.subnav-item');
+  if (!wasDone) {
+    item.classList.add('done');
+    btn.classList.add('done');
+    btn.textContent = '✓';
+    btn.title = 'Mark undone';
+  } else {
+    item.classList.remove('done');
+    btn.classList.remove('done');
+    btn.textContent = '○';
+    btn.title = 'Mark done';
+  }
+}
+
+function scrollToSection(anchor) {
+  const el = document.getElementById(anchor);
+  const container = document.getElementById('mainContent');
+  if (el && container) {
+    const elTop = el.getBoundingClientRect().top;
+    const containerTop = container.getBoundingClientRect().top;
+    container.scrollBy({ top: elTop - containerTop - 80, behavior: 'smooth' });
+  }
+  return false;
+}
+
+function buildSubnav(stepId) {
+  const subnavEl = document.getElementById('stepSubnav');
+  if (!subnavEl) return;
+
+  const saved = getSectionDone(stepId);
+  const headings = [...document.querySelectorAll('.markdown h2, .markdown h3')];
+
+  const items = headings.filter(h => {
+    const text = h.textContent.trim();
+    if (text.startsWith('✅')) return false;
+    if (h.tagName === 'H2') return true;
+    if (h.tagName === 'H3' && /^(Task|Step)\s*\d+/i.test(text)) return true;
+    return false;
+  });
+
+  if (!items.length) { subnavEl.style.display = 'none'; return; }
+
+  items.forEach(h => {
+    if (!h.id) {
+      h.id = h.textContent.trim().toLowerCase().replace(/[^\w]+/g, '-').replace(/^-|-$/g, '');
+    }
+  });
+
+  subnavEl.innerHTML = items.map(h => {
+    const anchor = h.id;
+    const isH3 = h.tagName === 'H3';
+    const isDone = saved.includes(anchor);
+    const label = h.textContent.trim();
+    return `<div class="subnav-item${isH3 ? ' subnav-h3' : ''}${isDone ? ' done' : ''}">
+      <a onclick="return scrollToSection('${anchor}')" href="#">${label}</a>
+      <button class="subnav-done-btn${isDone ? ' done' : ''}"
+              onclick="toggleSectionDone('${stepId}','${anchor}',this)"
+              title="${isDone ? 'Mark undone' : 'Mark done'}">${isDone ? '✓' : '○'}</button>
+    </div>`;
+  }).join('');
+}
 
 function switchTab(btn, tabName) {
   const group = btn.closest('.tab-group');

docs/styles.css

@@ -384,6 +384,66 @@ footer {
 .step-link.done .step-num { background: var(--accent); border-color: var(--accent); color: #fff; }
 .step-name { flex: 1; }
 .step-dur { font-size: 11px; color: var(--text-subtle); font-family: var(--font-mono); }
+
+/* === Section jump subnav (shown under active step) === */
+.step-subnav {
+  margin: 0 0 6px 36px;
+  padding: 0;
+  border-left: 1px solid var(--border-subtle);
+}
+.subnav-item {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding-right: 8px;
+}
+.subnav-item > a {
+  flex: 1;
+  font-size: 11.5px;
+  color: var(--text-subtle);
+  text-decoration: none !important;
+  padding: 3px 0 3px 10px;
+  line-height: 1.3;
+  transition: color 0.15s;
+  cursor: pointer;
+  display: block;
+}
+.subnav-item > a:hover { color: var(--text); text-decoration: none !important; }
+.subnav-item.done > a {
+  color: var(--accent-light);
+  opacity: 0.65;
+}
+.subnav-h3 > a {
+  padding-left: 20px;
+  font-size: 11px;
+}
+.subnav-done-btn {
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  width: 18px; height: 18px;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 10px;
+  color: var(--text-subtle);
+  cursor: pointer;
+  flex-shrink: 0;
+  opacity: 0.4;
+  transition: all 0.15s;
+  padding: 0;
+  line-height: 1;
+  font-family: var(--font-mono);
+}
+.subnav-done-btn:hover {
+  opacity: 1;
+  border-color: var(--border);
+  color: var(--text);
+}
+.subnav-done-btn.done {
+  opacity: 1;
+  color: var(--accent-light);
+  border-color: var(--accent);
+  background: rgba(35,134,54,0.15);
+}
 .sidebar-footer {
   padding: 12px 16px;
   border-top: 1px solid var(--border);