Remove the header's hidden scroll region: section pills become a fixed grid on mobile

The section nav (Plan/Bean/Machine/Log/After) was an overflow-x:auto
strip with hidden scrollbars — undiscoverable on touch. It now wraps on
desktop and renders as a fixed five-column grid of equal pills at
≤720px (labels shortened to fit 320px), and the actions row lets the
autosave chip shrink/ellipsize so nothing can force horizontal overflow.

Co-Authored-By: Claude Fable 5 <[email protected]>

.gitignore

@@ -5,3 +5,4 @@ data/
 .DS_Store
 dev-harness.mjs
 .scratch/
+.env

public/app.css

@@ -109,16 +109,15 @@ output {
 	color: var(--ink-3);
 }
 
+/* No overflow scrolling: below 1180px this row already sits on its own full-width line, and
+   at ≤720px it becomes a fixed five-column grid — a hidden horizontal scroll region in a
+   header is undiscoverable, especially on touch. */
 .section-nav {
 	display: flex;
 	align-items: center;
 	gap: 2px;
 	flex: 1 1 auto;
-	overflow-x: auto;
-	scrollbar-width: none;
-}
-.section-nav::-webkit-scrollbar {
-	display: none;
+	flex-wrap: wrap;
 }
 .section-nav a {
 	flex: 0 0 auto;
@@ -2593,13 +2592,19 @@ body.show-fids .field[data-fid]::after {
 	.section-nav {
 		width: 100%;
 		order: 2;
-		margin: 0 -2px;
+		margin: 0;
+		display: grid;
+		grid-template-columns: repeat(5, 1fr);
+		gap: 4px;
 	}
 	.section-nav a {
 		min-height: 40px;
 		display: inline-flex;
 		align-items: center;
-		padding: 7px 12px;
+		justify-content: center;
+		padding: 7px 2px;
+		font-size: 11.5px;
+		text-align: center;
 	}
 	.header-actions {
 		order: 3;
@@ -2607,10 +2612,19 @@ body.show-fids .field[data-fid]::after {
 		display: flex;
 		align-items: center;
 		gap: 8px;
+		min-width: 0;
 	}
+	/* The chip yields space to the buttons rather than forcing the row wide. */
 	.header-actions .autosave-chip {
-		flex: 1 1 auto;
+		flex: 1 1 0;
+		min-width: 0;
 		justify-content: center;
+		overflow: hidden;
+	}
+	.header-actions .autosave-text {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 	.header-actions #btn-print,
 	.header-actions #btn-expand-why {

public/index.html

@@ -65,8 +65,8 @@
           <nav class="section-nav" id="section-nav" aria-label="Plan sections">
             <a href="#sec-coffee">Plan</a>
             <a href="#sec-bean">Bean</a>
-            <a href="#sec-machine">Machine plan</a>
-            <a href="#sec-roastlog">Roast log</a>
+            <a href="#sec-machine">Machine</a>
+            <a href="#sec-roastlog">Log</a>
             <a href="#sec-after">After</a>
           </nav>