From 71155a67be1dceb0b3a0bd5605f0c5e7617f687c Mon Sep 17 00:00:00 2001
From: Giorgio Gilestro <giorgio@gilest.ro>
Date: Fri, 29 May 2026 11:17:43 +0200
Subject: [PATCH] =?UTF-8?q?ui:=20rename=20tone=20"Novice"=20=E2=86=92=20"P?=
 =?UTF-8?q?ro";=20fit=20tone-toggle=20to=20longest=20option?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

User-visible relabel only. Backend tone value stays NOVICE — no API
contract change, no migration on stored user.digest_tone, the
glossary/plain-prose depth of analysis is unchanged. The marketing
intent is that "Pro" reads better than "Novice" on the dashboard
header; landing/pricing/privacy copy still uses the word "Novice" in
flowing prose, so leaving those alone keeps the existing explanations
coherent until they get a copy pass.

Toggle width: the popup expansion (positioned left:0/right:0) is
sized by the container, which previously sized to the active button.
When "Pro" was active the popup was too narrow to fit "Intermediate".
Bumped .tone-toggle button min-width to 10em so both buttons reserve
enough room for the longest label regardless of which one is active.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 app/static/css/layout.css   | 5 +++++
 app/templates/base.html     | 6 +++++-
 app/templates/settings.html | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/static/css/layout.css b/app/static/css/layout.css
index 83f03f5..fc94c65 100644
--- a/app/static/css/layout.css
+++ b/app/static/css/layout.css
@@ -157,6 +157,11 @@ body.drawer-open .drawer-backdrop { opacity: 1; }
 .tone-toggle button + button,
 .theme-toggle button + button,
 .lang-toggle button + button { border-left: 1px solid var(--border); }
+/* The tone-toggle's longer option ("Intermediate", 12 chars) needs more
+   room than the shared 5.5em min-width. We size both buttons to fit the
+   longest one so the popup width (set by container width via left/right:0)
+   doesn't get clipped when only the short "Pro" label is active. */
+.tone-toggle button { min-width: 10em; }
 .tone-toggle button:hover,
 .theme-toggle button:hover,
 .lang-toggle button:hover { color: var(--accent); }
diff --git a/app/templates/base.html b/app/templates/base.html
index f4218a5..7344b76 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -234,10 +234,14 @@
         <a href="/log"  class="{% if request.url.path.startswith('/log') %}active{% endif %}">Log</a>
       </nav>
       <div class="header-right">
+        {# The "Pro" label maps to the NOVICE tone server-side — kept that
+           way to avoid touching every stored user preference and API
+           contract. The mode itself (glossary tooltips + plainer
+           framing) is unchanged; only the display label changes. #}
         <div id="tone-toggle" class="tone-toggle" data-tone="INTERMEDIATE"
              role="group" aria-label="Explanation level">
           <button type="button" data-value="NOVICE"
-                  onclick="cassandraSetTone('NOVICE')">Novice</button>
+                  onclick="cassandraSetTone('NOVICE')">Pro</button>
           <button type="button" data-value="INTERMEDIATE"
                   onclick="cassandraSetTone('INTERMEDIATE')">Intermediate</button>
         </div>
diff --git a/app/templates/settings.html b/app/templates/settings.html
index 7ce054c..37e88f7 100644
--- a/app/templates/settings.html
+++ b/app/templates/settings.html
@@ -185,7 +185,7 @@
         <div class="settings-row__value">
           <div style="display:flex; gap:14px;">
             <label><input type="radio" name="digest-tone" value="NOVICE"
-              {% if (user.digest_tone or 'INTERMEDIATE') == 'NOVICE' %}checked{% endif %}> Novice</label>
+              {% if (user.digest_tone or 'INTERMEDIATE') == 'NOVICE' %}checked{% endif %}> Pro</label>
             <label><input type="radio" name="digest-tone" value="INTERMEDIATE"
               {% if (user.digest_tone or 'INTERMEDIATE') == 'INTERMEDIATE' %}checked{% endif %}> Intermediate</label>
           </div>