feat: add header level pill on desktop, use native details/summary for sidebar

- Add lesson indicator pill to header (visible on desktop only)
- Logo stays centered, pill on left with burger menu
- Replace emoji arrows with CSS triangles for iOS compatibility
- Use native <details>/<summary> for expand/collapse
- Update tests for new implementation

src/index.html

@@ -15,9 +15,12 @@
 		<a href="#main-content" class="skip-link" data-i18n="skipLink">Skip to main content</a>
 		<div class="app-container">
 			<header class="header">
-				<button id="menu-btn" class="menu-toggle" data-i18n-aria-label="menuOpen" aria-label="Open menu">
-					<span class="hamburger-icon"></span>
-				</button>
+				<div class="header-left">
+					<button id="menu-btn" class="menu-toggle" data-i18n-aria-label="menuOpen" aria-label="Open menu">
+						<span class="hamburger-icon"></span>
+					</button>
+					<span class="header-level-pill" id="header-level-pill"></span>
+				</div>
 				<a href="#" id="logo-link" class="logo">
 					<img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" />
 					<h1><span class="code-text">CODE</span><span class="crispies-text">CRISPIES</span></h1>