From 9e8b9bc3896c35c7c4f9b3ee4cec3a9504906aa0 Mon Sep 17 00:00:00 2001
From: Paul Bakaus <paul.bakaus@gmail.com>
Date: Wed, 12 Aug 2026 23:29:14 -0400
Subject: [PATCH] Build-path toggle aligns with the headline row

Same line as the round's title rather than the brand mark: the control
reads as part of the round it configures, and the brand row stays clean.

Written with AI assistance (Claude Code).

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 skill/scripts/serve-question.mjs | 29 +++++++++++++----------------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/skill/scripts/serve-question.mjs b/skill/scripts/serve-question.mjs
index 807c2b68f..db47ae466 100644
--- a/skill/scripts/serve-question.mjs
+++ b/skill/scripts/serve-question.mjs
@@ -602,11 +602,10 @@ function page() {
   #lightbox.open { opacity: 1; }
   #lightbox img { max-width: 94vw; max-height: 94vh; border: 1px solid var(--ks-rule); border-radius: 8px; box-shadow: 0 30px 80px oklch(0% 0 0 / 0.6); }
   header { width: 100%; max-width: 90rem; margin: 0 auto; }
-  .header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.2rem; }
   .brand { display: flex; align-items: center; gap: .55rem; color: var(--ks-kinpaku); }
   .brand svg { width: 22px; height: 22px; }
   .wordmark { font-family: var(--ks-font-display); font-weight: 400; font-size: 1.125rem; letter-spacing: 0.15em; text-transform: uppercase; line-height: 1; color: var(--ks-kinpaku); }
-  .headline { display: flex; align-items: center; gap: .9rem; }
+  .headline { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
   .headline-die { flex: none; width: 34px; height: 34px; color: var(--ks-kinpaku); }
   h1 { font-family: var(--ks-font-display); font-weight: 100; font-size: clamp(2.6rem, 5vw, 4.2rem); letter-spacing: -0.01em; line-height: 1.02; color: var(--ks-champagne); }
   .question { color: var(--ks-text-muted); margin-top: .7rem; max-width: 52rem; }
@@ -821,12 +820,12 @@ function page() {
   #steer { flex: 1; min-width: 16rem; background: var(--ks-lacquer-raised); color: var(--ks-text); border: 1px solid var(--ks-rule); border-radius: 7px; padding: .6rem .85rem; font: inherit; }
   #steer:focus { outline: none; border-color: var(--ks-patina); }
   /* Build-path toggle: a workflow preference surfaced as a quiet segmented
-     control on the header row, right-aligned opposite the brand, its trade stated in
+     control on the headline row, right-aligned opposite the title, its trade stated in
      one line that changes with the selection. The default comes from the
      payload (settings); flipping binds this session only, and the agent
      learns about a code-to-comp flip live. Rendered only when the payload
      offers it, which the agent does only when image generation exists. */
-  #build-path { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: none; }
+  #build-path { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; flex: none; margin-left: auto; }
   .bp-switch { display: inline-flex; border: 1px solid var(--ks-rule); border-radius: 6px; overflow: hidden; }
   .bp-note { text-align: right; }
   .bp-opt { font-family: var(--ks-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; padding: 7px 12px; background: transparent; border: 0; color: var(--ks-text-faint); cursor: pointer; transition: color .2s ease, background-color .2s ease; }
@@ -886,18 +885,9 @@ ${buildPath?.toggle ? `<div id="bp-confirm" role="dialog" aria-modal="true" aria
   </div>
 </div>` : ''}
 <header>
-  <div class="header-row">
-    <div class="brand">
-      <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 2.5 L13.5 2.5 L5.5 21.5 L5 21.5 Q2.5 21.5 2.5 19 L2.5 5 Q2.5 2.5 5 2.5 Z"/><path d="M16.5 2.5 L19 2.5 Q21.5 2.5 21.5 5 L21.5 19 Q21.5 21.5 19 21.5 L8.5 21.5 Z"/></svg>
-      <span class="wordmark">Impeccable</span>
-    </div>
-    ${buildPath?.toggle ? `<div id="build-path" data-default="${buildPath.value}">
-      <div class="bp-switch" role="radiogroup" aria-label="Build path">
-        <button type="button" class="bp-opt" data-bp="comp" role="radio" aria-checked="false">Comp first</button>
-        <button type="button" class="bp-opt" data-bp="code" role="radio" aria-checked="false">Code first</button>
-      </div>
-      <p class="bp-note" data-bp-note></p>
-    </div>` : ''}
+  <div class="brand">
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M5 2.5 L13.5 2.5 L5.5 21.5 L5 21.5 Q2.5 21.5 2.5 19 L2.5 5 Q2.5 2.5 5 2.5 Z"/><path d="M16.5 2.5 L19 2.5 Q21.5 2.5 21.5 5 L21.5 19 Q21.5 21.5 19 21.5 L8.5 21.5 Z"/></svg>
+    <span class="wordmark">Impeccable</span>
   </div>
 </header>
 <main>
@@ -905,6 +895,13 @@ ${buildPath?.toggle ? `<div id="bp-confirm" role="dialog" aria-modal="true" aria
     <div class="headline">
       <svg class="headline-die" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="4" fill="none" stroke="currentColor" stroke-width="1.6"/><circle cx="8.4" cy="8.4" r="1.5" fill="currentColor"/><circle cx="15.6" cy="8.4" r="1.5" fill="currentColor"/><circle cx="8.4" cy="15.6" r="1.5" fill="currentColor"/><circle cx="15.6" cy="15.6" r="1.5" fill="currentColor"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></svg>
       <h1>${esc(payload.title || 'Choose a direction')}</h1>
+      ${buildPath?.toggle ? `<div id="build-path" data-default="${buildPath.value}">
+        <div class="bp-switch" role="radiogroup" aria-label="Build path">
+          <button type="button" class="bp-opt" data-bp="comp" role="radio" aria-checked="false">Comp first</button>
+          <button type="button" class="bp-opt" data-bp="code" role="radio" aria-checked="false">Code first</button>
+        </div>
+        <p class="bp-note" data-bp-note></p>
+      </div>` : ''}
     </div>
     ${payload.question ? `<p class="question">${esc(payload.question)}</p>` : ''}
     <div class="deck-shell">