ui: regroup topbar + unify the three header toggles

Header layout was visibly broken on desktop after the mobile-drawer
change: flex space-between distributed brand, BETA, tone-toggle, nav
and header-right across the bar, so BETA drifted away from the brand
wordmark and the tone-toggle landed in the middle of the row.

Markup: brand + BETA are now wrapped in .header-left so they ride
together. The tone-toggle moves back inside .header-right next to
theme + lang where it logically belongs. CSS: the header switches to
grid (1fr auto 1fr) on desktop, which truly centres the nav regardless
of side-group widths. The mobile @media block reverts to flex so the
hamburger + slide-out drawer still work.

Toggle redesign (tone, theme, language):

- The single-button theme widget becomes a Light | Dark segmented
  control matching the other two so all three read as one cluster.
  cassandraToggleTheme is replaced by cassandraSetTheme(theme), the
  toggle's data-theme attribute is synced on page load.
- All three share one CSS rule set: same padding, font, border, and
  a min-width so the active-only width matches the expanded width
  (no layout jump on hover).
- On hover-capable devices each toggle collapses to just the active
  option; hovering (or keyboard focus-within) reveals both. Touch
  devices keep both visible — the @media (hover: hover) gate handles
  that and the mobile-drawer block overrides it explicitly so the
  drawer-stacked controls remain full-width with both options shown.

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

app/static/css/layout.css

@@ -36,9 +36,15 @@ a:hover { text-decoration: underline; }
 }
 
 .app-header {
-  display: flex;
+  /* Three-column grid: brand+BETA pinned left, nav truly centered in
+     the middle column regardless of side widths, header-right pinned
+     right. The mobile-drawer wrapper is display:contents on desktop so
+     its children (nav, .header-right) become direct grid items and
+     land in columns 2 and 3 by source order. */
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
   align-items: center;
-  justify-content: space-between;
+  gap: 14px;
   border-bottom: 1px solid var(--border);
   padding: 10px 18px;
   background: var(--surface);
@@ -48,6 +54,13 @@ a:hover { text-decoration: underline; }
   top: 0;
   z-index: 50;
 }
+.app-header .header-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  justify-self: start;
+}
+.app-header nav { justify-self: center; }
 .app-header .brand {
   color: var(--accent);
   font-weight: 700;
@@ -59,6 +72,7 @@ a:hover { text-decoration: underline; }
   margin-left: 18px;
   color: var(--muted);
 }
+.app-header nav a:first-child { margin-left: 0; }
 .app-header nav a.active { color: var(--text); }
 .app-header .meta { color: var(--muted); font-size: 11px; }
 
@@ -67,7 +81,12 @@ a:hover { text-decoration: underline; }
  * the @media block at the bottom converts it to a fixed slide-out. */
 .mobile-drawer { display: contents; }
 
-.app-header .header-right { display: flex; align-items: center; gap: 14px; }
+.app-header .header-right {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  justify-self: end;
+}
 
 /* Hamburger button — only visible at ≤480px (rule in the mobile block).
  * Three thin bars; uses the same border/muted treatment as the other
@@ -102,51 +121,14 @@ a:hover { text-decoration: underline; }
   transition: opacity 120ms ease-out;
 }
 body.drawer-open .drawer-backdrop { opacity: 1; }
-.theme-toggle {
+/* Segmented toggles — tone (Novice | Intermediate), theme (Light | Dark)
-  background: transparent;
+ * and language (EN | IT) share one visual rhythm so the three controls
-  border: 1px solid var(--border);
+ * read as a single cluster in the header. By default only the currently
-  color: var(--muted);
+ * active option is rendered; hover or keyboard focus reveals both so the
-  padding: 3px 8px;
+ * user can pick the other. Touch devices (which can't hover) show both
-  font-family: var(--font-mono);
+ * options at all times; the @media (hover: hover) gate handles that. */
-  font-size: 10px;
+.tone-toggle,
-  letter-spacing: 0.08em;
+.theme-toggle,
-  cursor: pointer;
-  text-transform: lowercase;
-}
-.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
-.theme-toggle__label::before { content: "◐ light"; }
-[data-theme="dark"] .theme-toggle__label::before { content: "◐ dark"; }
-
-/* Tone toggle (segmented control: Novice | Intermediate) */
-.tone-toggle {
-  display: inline-flex;
-  border: 1px solid var(--border);
-  font-family: var(--font-mono);
-  font-size: 10.5px;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-.tone-toggle button {
-  background: transparent;
-  color: var(--muted);
-  border: 0;
-  padding: 4px 10px;
-  cursor: pointer;
-  font: inherit;
-  letter-spacing: inherit;
-  text-transform: inherit;
-}
-.tone-toggle button + button { border-left: 1px solid var(--border); }
-.tone-toggle button:hover { color: var(--accent); }
-.tone-toggle[data-tone="NOVICE"] button[data-value="NOVICE"],
-.tone-toggle[data-tone="INTERMEDIATE"] button[data-value="INTERMEDIATE"] {
-  background: var(--accent);
-  color: var(--bg);
-}
-
-/* Language toggle in the topbar — same visual rhythm as the tone
- * toggle so the two controls read as a pair. Only EN and IT are
- * visible here; the WIP languages (ES/FR/DE) live in /settings. */
 .lang-toggle {
   display: inline-flex;
   border: 1px solid var(--border);
@@ -155,24 +137,65 @@ body.drawer-open .drawer-backdrop { opacity: 1; }
   letter-spacing: 0.06em;
   text-transform: uppercase;
 }
+.tone-toggle button,
+.theme-toggle button,
 .lang-toggle button {
   background: transparent;
   color: var(--muted);
   border: 0;
-  padding: 4px 8px;
+  padding: 4px 10px;
   cursor: pointer;
   font: inherit;
   letter-spacing: inherit;
   text-transform: inherit;
+  /* Fixed min-width so the active-only width matches the expanded width
+     of a single button — prevents the layout jumping as the user
+     mouses over and the second option appears. */
+  min-width: 5.5em;
+  text-align: center;
 }
+.tone-toggle button + button,
+.theme-toggle button + button,
 .lang-toggle button + button { border-left: 1px solid var(--border); }
+.tone-toggle button:hover,
+.theme-toggle button:hover,
 .lang-toggle button:hover { color: var(--accent); }
+
+/* Active-option highlighting (data-* attribute on the container is
+ * authored by JS on load and on every change). */
+.tone-toggle[data-tone="NOVICE"] button[data-value="NOVICE"],
+.tone-toggle[data-tone="INTERMEDIATE"] button[data-value="INTERMEDIATE"],
+.theme-toggle[data-theme="light"] button[data-value="light"],
+.theme-toggle[data-theme="dark"] button[data-value="dark"],
 .lang-toggle[data-lang="en"] button[data-value="en"],
 .lang-toggle[data-lang="it"] button[data-value="it"] {
   background: var(--accent);
   color: var(--bg);
 }
 
+/* Collapse-when-idle behaviour: on hover-capable devices, hide the
+ * non-active option until the user hovers (or keyboard-focuses) the
+ * toggle. The mobile drawer overrides this further down. */
+@media (hover: hover) {
+  .tone-toggle button,
+  .theme-toggle button,
+  .lang-toggle button { display: none; }
+  .tone-toggle[data-tone="NOVICE"] button[data-value="NOVICE"],
+  .tone-toggle[data-tone="INTERMEDIATE"] button[data-value="INTERMEDIATE"],
+  .theme-toggle[data-theme="light"] button[data-value="light"],
+  .theme-toggle[data-theme="dark"] button[data-value="dark"],
+  .lang-toggle[data-lang="en"] button[data-value="en"],
+  .lang-toggle[data-lang="it"] button[data-value="it"] {
+    display: inline-block;
+  }
+  .tone-toggle:hover button,
+  .tone-toggle:focus-within button,
+  .theme-toggle:hover button,
+  .theme-toggle:focus-within button,
+  .lang-toggle:hover button,
+  .lang-toggle:focus-within button { display: inline-block; }
+}
+
 .app-main {
   padding: 14px;
   display: grid;
@@ -238,10 +261,11 @@ body.drawer-open .drawer-backdrop { opacity: 1; }
 /* --- Mobile (≤480px) -------------------------------------------------- */
 
 @media (max-width: 480px) {
-  /* Tighten the topbar so the brand, tone toggle and hamburger all fit
+  /* Revert to flex on mobile so the drawer-toggle can pin to the right
-     on a 360px phone. Drop the letter-spacing because at 11px tracking
+     via margin-left:auto and the off-screen drawer doesn't try to claim
-     eats horizontal space the brand cannot spare. */
+     a grid column. */
   .app-header {
+    display: flex;
     padding: 8px 12px;
     gap: 8px;
     letter-spacing: 0.04em;
@@ -263,15 +287,6 @@ body.drawer-open .drawer-backdrop { opacity: 1; }
      the drawer (the .mobile-drawer block below). */
   .drawer-toggle { display: flex; margin-left: auto; }
 
-  /* Keep the tone toggle visible but trim it: just N / I letters so it
-     fits next to brand + hamburger. */
-  .tone-toggle--header {
-    font-size: 9.5px;
-  }
-  .tone-toggle--header button {
-    padding: 4px 7px;
-  }
-
   /* The drawer wrapper: full-height slide-out from the right. The
      content inside (nav + header-right) becomes a vertical stack
      with comfortable touch targets. */
@@ -321,14 +336,25 @@ body.drawer-open .drawer-backdrop { opacity: 1; }
     gap: 14px;
     margin-top: 20px;
   }
+  .mobile-drawer .tone-toggle,
   .mobile-drawer .theme-toggle,
   .mobile-drawer .lang-toggle {
+    display: inline-flex;
     width: 100%;
     justify-content: center;
   }
-  .mobile-drawer .lang-toggle { display: inline-flex; }
+  /* Inside the drawer all options stay visible — undoes the
-  .mobile-drawer .lang-toggle button,
+     hover-collapse from the @media (hover: hover) block above. Also
-  .mobile-drawer .theme-toggle { padding: 10px; font-size: 11.5px; }
+     splits the row evenly and bumps the button padding for thumb taps. */
+  .mobile-drawer .tone-toggle button,
+  .mobile-drawer .theme-toggle button,
+  .mobile-drawer .lang-toggle button {
+    display: inline-block;
+    flex: 1;
+    padding: 10px;
+    font-size: 11.5px;
+    min-width: 0;
+  }
 
   /* The user-menu's dropdown becomes redundant inside the drawer —
      surface its links flat as a list, and hide the chip button. */

app/templates/base.html

@@ -126,6 +126,10 @@
       // Reflect the saved value in the toggle on load.
       var pill = document.getElementById('tone-toggle');
       if (pill) pill.dataset.tone = currentTone();
+      // Same for the theme toggle — pull the current theme that the
+      // top-of-page inline script already wrote to <html data-theme>.
+      var themePill = document.getElementById('theme-toggle');
+      if (themePill) themePill.dataset.theme = document.documentElement.dataset.theme || 'light';
     });
 
     window.cassandraSetTone = function (newTone) {
@@ -143,11 +147,11 @@
       });
     };
 
-    window.cassandraToggleTheme = function () {
+    window.cassandraSetTheme = function (newTheme) {
-      var d = document.documentElement;
+      document.documentElement.dataset.theme = newTheme;
-      var t = d.dataset.theme === 'light' ? 'dark' : 'light';
+      var pill = document.getElementById('theme-toggle');
-      d.dataset.theme = t;
+      if (pill) pill.dataset.theme = newTheme;
-      try { localStorage.setItem('cassandra.theme', t); } catch (e) {}
+      try { localStorage.setItem('cassandra.theme', newTheme); } catch (e) {}
     };
 
     window.cassandraSetLang = async function (newLang) {
@@ -205,18 +209,12 @@
 <body>
 <div class="app">
   <header class="app-header">
+    {# Left group keeps brand + BETA chip pinned together as a single
+       layout cell so the chip can't drift away from the wordmark when
+       the header grows or shrinks. #}
+    <div class="header-left">
       <a href="/" class="brand" aria-label="Dashboard">{{ BRAND_NAME }}</a>
       {% if BETA_MODE %}<span class="beta-chip" title="Beta — feedback welcome at hello@read.markets">BETA</span>{% endif %}
-
-    {# Tone toggle is the one widget we keep visible in the mobile
-       header even when the drawer is closed — it directly affects the
-       readability of the content right next to it. #}
-    <div id="tone-toggle" class="tone-toggle tone-toggle--header" data-tone="INTERMEDIATE"
-         role="group" aria-label="Explanation level">
-      <button type="button" data-value="NOVICE"
-              onclick="cassandraSetTone('NOVICE')">Novice</button>
-      <button type="button" data-value="INTERMEDIATE"
-              onclick="cassandraSetTone('INTERMEDIATE')">Intermediate</button>
     </div>
 
     {# Mobile hamburger — shown only at ≤480px via CSS. #}
@@ -236,10 +234,20 @@
         <a href="/log"  class="{% if request.url.path.startswith('/log') %}active{% endif %}">Log</a>
       </nav>
       <div class="header-right">
-        <button class="theme-toggle" type="button" aria-label="Toggle theme"
+        <div id="tone-toggle" class="tone-toggle" data-tone="INTERMEDIATE"
-                onclick="cassandraToggleTheme()">
+             role="group" aria-label="Explanation level">
-          <span class="theme-toggle__label"></span>
+          <button type="button" data-value="NOVICE"
-        </button>
+                  onclick="cassandraSetTone('NOVICE')">Novice</button>
+          <button type="button" data-value="INTERMEDIATE"
+                  onclick="cassandraSetTone('INTERMEDIATE')">Intermediate</button>
+        </div>
+        <div id="theme-toggle" class="theme-toggle" data-theme="light"
+             role="group" aria-label="Theme">
+          <button type="button" data-value="light"
+                  onclick="cassandraSetTheme('light')">Light</button>
+          <button type="button" data-value="dark"
+                  onclick="cassandraSetTheme('dark')">Dark</button>
+        </div>
         {% set cu = request.state.current_user if request.state and request.state.current_user is defined else None %}
         {% if cu and cu.user %}
         <div id="lang-toggle" class="lang-toggle" data-lang="{{ cu.user.lang or 'en' }}"