From b18d481da08762df23a0babd62f894264e8036fb Mon Sep 17 00:00:00 2001
From: Peter Lord <im@ptrlrd.com>
Date: Wed, 29 Jul 2026 21:02:45 -0700
Subject: [PATCH] Inline the upgrade toggle with the card name and even out the
 cost pills

---
 frontend/app/card-revamp.css           |  9 +++++
 frontend/app/cards/[id]/CardDetail.tsx | 50 +++++++++++++-------------
 frontend/app/components/CardGrid.tsx   |  2 +-
 3 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/frontend/app/card-revamp.css b/frontend/app/card-revamp.css
index 29030124..c01beab7 100644
--- a/frontend/app/card-revamp.css
+++ b/frontend/app/card-revamp.css
@@ -57,6 +57,15 @@
 .card-rvmp .hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(32px, 5vw, 50px);
   line-height: 1.04; margin: 12px 0 0; text-wrap: balance; color: var(--text); }
 .card-rvmp .hero h1 .up { color: var(--good); }
+/* Title row: the Normal/Upgraded toggle sits inline with the name, middle
+   aligned, and wraps under it on narrow screens. */
+.card-rvmp .hero-head { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 12px; }
+.card-rvmp .hero-head h1 { margin: 0; }
+.card-rvmp .hero-seg { flex: none; }
+.card-rvmp .hero-seg .segbtn { flex: none; padding: 7px 14px; }
+/* The star span's ★ falls back to a system font with a taller line box than
+   the digits around it; pin the line height so the row stays even. */
+.card-rvmp .eyebrow span { line-height: 1.2; }
 .card-rvmp .lede { color: var(--text-2); font-size: 18px; margin: 14px 0 0; max-width: 60ch; }
 /* Programmatic overview prose rendered as a hero lead (EntityProse lead mode).
    Sits under the H1 in place of the old token-stripped description lede. */
diff --git a/frontend/app/cards/[id]/CardDetail.tsx b/frontend/app/cards/[id]/CardDetail.tsx
index ea509fc4..03bd3859 100644
--- a/frontend/app/cards/[id]/CardDetail.tsx
+++ b/frontend/app/cards/[id]/CardDetail.tsx
@@ -412,10 +412,30 @@ export default function CardDetail({ initialCard, initialEnchantments, initialSt
                 </>
               )}
             </p>
-            <h1>
-              {card.name}
-              {isUpgraded && <span className="up">+</span>}
-            </h1>
+            <div className="hero-head">
+              <h1>
+                {card.name}
+                {isUpgraded && <span className="up">+</span>}
+              </h1>
+              {hasUpgrade && (
+                <div className="seg hero-seg" role="group" aria-label={t("Card version", lang)}>
+                  <button
+                    type="button"
+                    className={`segbtn${!upgraded ? " on" : ""}`}
+                    onClick={() => setUpgraded(false)}
+                  >
+                    {t("Normal", lang)}
+                  </button>
+                  <button
+                    type="button"
+                    className={`segbtn${upgraded ? " on" : ""}`}
+                    onClick={() => setUpgraded(true)}
+                  >
+                    {t("Upgraded", lang)}
+                  </button>
+                </div>
+              )}
+            </div>
             {/* Overview prose as the hero lead (replaces the old token-stripped
                 description lede, which rendered blanks like "Gain ."). */}
             <EntityProse kind="card" card={card} lead />
@@ -709,27 +729,9 @@ export default function CardDetail({ initialCard, initialEnchantments, initialSt
               }}
             />
 
-            {/* Variant switcher */}
+            {/* Variant switcher (the Normal/Upgraded toggle sits in the hero,
+                inline with the card name) */}
             <div className="variant">
-              {hasUpgrade && (
-                <div className="seg" role="group" aria-label={t("Card version", lang)}>
-                  <button
-                    type="button"
-                    className={`segbtn${!upgraded ? " on" : ""}`}
-                    onClick={() => setUpgraded(false)}
-                  >
-                    {t("Normal", lang)}
-                  </button>
-                  <button
-                    type="button"
-                    className={`segbtn${upgraded ? " on" : ""}`}
-                    onClick={() => setUpgraded(true)}
-                  >
-                    {t("Upgraded", lang)}
-                  </button>
-                </div>
-              )}
-
               {cardEnchantments.length > 0 && (
                 <select
                   className="ench-select"
diff --git a/frontend/app/components/CardGrid.tsx b/frontend/app/components/CardGrid.tsx
index d58ef864..11daef14 100644
--- a/frontend/app/components/CardGrid.tsx
+++ b/frontend/app/components/CardGrid.tsx
@@ -104,7 +104,7 @@ function CardItem({ card }: { card: Card }) {
             {card.is_x_cost ? "X" : display.cost != null && display.cost < 0 ? "U" : display.cost}
           </span>
           {(card.star_cost != null || card.is_x_star_cost) && (
-            <span className="inline-flex items-center gap-0.5 px-1.5 py-0.5 rounded-full bg-[var(--bg-primary)] border border-amber-700/40 text-xs font-bold text-amber-300">
+            <span className="inline-flex items-center gap-0.5 h-7 px-2 rounded-full bg-[var(--bg-primary)] border border-amber-700/40 text-sm font-bold text-amber-300">
               {card.is_x_star_cost ? "X" : card.star_cost}
               <img src={imageUrl("/static/images/icons/star_icon.webp")}
                 alt="star" className="w-3.5 h-3.5" crossOrigin="anonymous" />