From 6eb20fbcb85d9944c03ad10ed78205d45ce92483 Mon Sep 17 00:00:00 2001
From: Peter Lord <im@ptrlrd.com>
Date: Wed, 29 Jul 2026 21:12:40 -0700
Subject: [PATCH] Restyle the section submenu as a labeled table of contents

---
 .../app/achievements/[id]/AchievementDetail.tsx  |  1 +
 frontend/app/acts/[id]/ActDetail.tsx             |  1 +
 frontend/app/ascensions/[id]/AscensionDetail.tsx |  1 +
 frontend/app/badges/[id]/page.tsx                |  1 +
 frontend/app/card-revamp.css                     | 16 +++++++++++-----
 frontend/app/cards/[id]/CardDetail.tsx           |  1 +
 frontend/app/characters/[id]/CharacterDetail.tsx |  1 +
 .../app/enchantments/[id]/EnchantmentDetail.tsx  |  1 +
 frontend/app/encounters/[id]/EncounterDetail.tsx |  1 +
 frontend/app/events/[id]/EventDetail.tsx         |  1 +
 frontend/app/merchant/MerchantToc.tsx            |  1 +
 frontend/app/monsters/[id]/MonsterDetail.tsx     |  1 +
 frontend/app/potions/[id]/PotionDetail.tsx       |  1 +
 frontend/app/powers/[id]/PowerDetail.tsx         |  1 +
 frontend/app/relics/[id]/RelicDetail.tsx         |  1 +
 frontend/app/timeline/[id]/EpochDetail.tsx       |  1 +
 16 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/frontend/app/achievements/[id]/AchievementDetail.tsx b/frontend/app/achievements/[id]/AchievementDetail.tsx
index 2cddaf3f..12b2dc00 100644
--- a/frontend/app/achievements/[id]/AchievementDetail.tsx
+++ b/frontend/app/achievements/[id]/AchievementDetail.tsx
@@ -109,6 +109,7 @@ export default function AchievementDetail({ initialAchievement }: { initialAchie
 
           {/* Sticky ToC */}
           <nav className="toc" aria-label="On this page">
+            <span className="toc-label">On this page</span>
             {tocItems.map((it) => (
               <a
                 key={it.id}
diff --git a/frontend/app/acts/[id]/ActDetail.tsx b/frontend/app/acts/[id]/ActDetail.tsx
index 78a42fc4..f4e68813 100644
--- a/frontend/app/acts/[id]/ActDetail.tsx
+++ b/frontend/app/acts/[id]/ActDetail.tsx
@@ -116,6 +116,7 @@ export default function ActDetail({ initialAct }: { initialAct?: Act | null } =
 
           {/* Sticky ToC */}
           <nav className="toc" aria-label="On this page">
+            <span className="toc-label">On this page</span>
             {tocItems.map((it) => (
               <a
                 key={it.id}
diff --git a/frontend/app/ascensions/[id]/AscensionDetail.tsx b/frontend/app/ascensions/[id]/AscensionDetail.tsx
index 31d5c291..1b4eafe5 100644
--- a/frontend/app/ascensions/[id]/AscensionDetail.tsx
+++ b/frontend/app/ascensions/[id]/AscensionDetail.tsx
@@ -122,6 +122,7 @@ export default function AscensionDetail({ initialAscension }: { initialAscension
 
           {/* Sticky ToC */}
           <nav className="toc" aria-label="On this page">
+            <span className="toc-label">On this page</span>
             {tocItems.map((it) => (
               <a
                 key={it.id}
diff --git a/frontend/app/badges/[id]/page.tsx b/frontend/app/badges/[id]/page.tsx
index 916db45e..b00ed9de 100644
--- a/frontend/app/badges/[id]/page.tsx
+++ b/frontend/app/badges/[id]/page.tsx
@@ -167,6 +167,7 @@ export default async function BadgePage({ params }: Props) {
           {/* Table of contents (static: server-rendered page) */}
           {badge.tiered && (
             <nav className="toc" aria-label="On this page">
+              <span className="toc-label">On this page</span>
               <a href="#description">Description</a>
               <a href="#tiers">Tiers</a>
             </nav>
diff --git a/frontend/app/card-revamp.css b/frontend/app/card-revamp.css
index 29030124..699fb439 100644
--- a/frontend/app/card-revamp.css
+++ b/frontend/app/card-revamp.css
@@ -64,14 +64,20 @@
 .card-rvmp .entity-lead p { margin: 0 0 10px; }
 .card-rvmp .entity-lead p:last-child { margin-bottom: 0; }
 
-/* ── sticky ToC ── */
+/* ── sticky ToC ──
+   Styled as a labeled table of contents (plain anchor links, underlined when
+   active) rather than tab pills: clicking one only scrolls, and the old tab
+   look promised a view switch it never delivered. */
 .card-rvmp .toc { position: sticky; top: 64px; z-index: 20; margin: 28px 0 0; padding: 10px 0;
   background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(6px);
   border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
-  display: flex; gap: 4px; flex-wrap: wrap; }
-.card-rvmp .toc a { color: var(--text-2); font-size: 13px; padding: 5px 11px; border-radius: 4px; }
-.card-rvmp .toc a:hover { color: var(--text); background: var(--surface); }
-.card-rvmp .toc a.on { color: var(--spine); background: var(--spine-soft); }
+  display: flex; gap: 4px 16px; flex-wrap: wrap; align-items: baseline; }
+.card-rvmp .toc-label { font-family: var(--mono); font-size: 11px; letter-spacing: .07em;
+  text-transform: uppercase; color: var(--text-3); }
+.card-rvmp .toc a { color: var(--text-2); font-size: 13px; padding: 2px 0; }
+.card-rvmp .toc a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }
+.card-rvmp .toc a.on { color: var(--spine); text-decoration: underline; text-underline-offset: 5px;
+  text-decoration-thickness: 2px; }
 
 /* ── sections ── */
 .card-rvmp section { padding-top: 40px; scroll-margin-top: 128px; }
diff --git a/frontend/app/cards/[id]/CardDetail.tsx b/frontend/app/cards/[id]/CardDetail.tsx
index ea509fc4..a94d290e 100644
--- a/frontend/app/cards/[id]/CardDetail.tsx
+++ b/frontend/app/cards/[id]/CardDetail.tsx
@@ -431,6 +431,7 @@ export default function CardDetail({ initialCard, initialEnchantments, initialSt
 
           {/* Sticky ToC */}
           <nav className="toc" aria-label={t("On this page", lang)}>
+            <span className="toc-label">{t("On this page", lang)}</span>
             {tocItems.map((it) => (
               <a
                 key={it.id}
diff --git a/frontend/app/characters/[id]/CharacterDetail.tsx b/frontend/app/characters/[id]/CharacterDetail.tsx
index a1cbca50..d3cc2e16 100644
--- a/frontend/app/characters/[id]/CharacterDetail.tsx
+++ b/frontend/app/characters/[id]/CharacterDetail.tsx
@@ -378,6 +378,7 @@ export default function CharacterDetail({ initialCharacter }: { initialCharacter
 
           {/* Sticky ToC */}
           <nav className="toc" aria-label={t("On this page", lang)}>
+            <span className="toc-label">{t("On this page", lang)}</span>
             {tocItems.map((it) => (
               <a
                 key={it.id}
diff --git a/frontend/app/enchantments/[id]/EnchantmentDetail.tsx b/frontend/app/enchantments/[id]/EnchantmentDetail.tsx
index 8d929780..7d8500b4 100644
--- a/frontend/app/enchantments/[id]/EnchantmentDetail.tsx
+++ b/frontend/app/enchantments/[id]/EnchantmentDetail.tsx
@@ -139,6 +139,7 @@ export default function EnchantmentDetail({
 
           {/* Sticky ToC */}
           <nav className="toc" aria-label={t("On this page", lang)}>
+            <span className="toc-label">{t("On this page", lang)}</span>
             {tocItems.map((it) => (
               <a
                 key={it.id}
diff --git a/frontend/app/encounters/[id]/EncounterDetail.tsx b/frontend/app/encounters/[id]/EncounterDetail.tsx
index 35ca08f1..78fba6c9 100644
--- a/frontend/app/encounters/[id]/EncounterDetail.tsx
+++ b/frontend/app/encounters/[id]/EncounterDetail.tsx
@@ -144,6 +144,7 @@ export default function EncounterDetail({ initialEncounter, encounterStat }: { i
 
           {/* Sticky ToC */}
           <nav className="toc" aria-label={t("On this page", lang)}>
+            <span className="toc-label">{t("On this page", lang)}</span>
             {tocItems.map((it) => (
               <a
                 key={it.id}
diff --git a/frontend/app/events/[id]/EventDetail.tsx b/frontend/app/events/[id]/EventDetail.tsx
index d666bfeb..dd4a13d1 100644
--- a/frontend/app/events/[id]/EventDetail.tsx
+++ b/frontend/app/events/[id]/EventDetail.tsx
@@ -198,6 +198,7 @@ export default function EventDetail({
 
           {/* Sticky ToC */}
           <nav className="toc" aria-label={t("On this page", lang)}>
+            <span className="toc-label">{t("On this page", lang)}</span>
             {tocItems.map((it) => (
               <a
                 key={it.id}
diff --git a/frontend/app/merchant/MerchantToc.tsx b/frontend/app/merchant/MerchantToc.tsx
index f1d5b531..a0d5055d 100644
--- a/frontend/app/merchant/MerchantToc.tsx
+++ b/frontend/app/merchant/MerchantToc.tsx
@@ -37,6 +37,7 @@ export default function MerchantToc({ items }: { items: { id: string; label: str
 
   return (
     <nav className="toc" aria-label="On this page">
+      <span className="toc-label">On this page</span>
       {items.map((it) => (
         <a
           key={it.id}
diff --git a/frontend/app/monsters/[id]/MonsterDetail.tsx b/frontend/app/monsters/[id]/MonsterDetail.tsx
index ecdd0362..12a491c7 100644
--- a/frontend/app/monsters/[id]/MonsterDetail.tsx
+++ b/frontend/app/monsters/[id]/MonsterDetail.tsx
@@ -547,6 +547,7 @@ export default function MonsterDetail({
 
           {/* Sticky ToC */}
           <nav className="toc" aria-label={t("On this page", lang)}>
+            <span className="toc-label">{t("On this page", lang)}</span>
             {tocItems.map((it) => (
               <a
                 key={it.id}
diff --git a/frontend/app/potions/[id]/PotionDetail.tsx b/frontend/app/potions/[id]/PotionDetail.tsx
index 0aa2cde0..2373c63f 100644
--- a/frontend/app/potions/[id]/PotionDetail.tsx
+++ b/frontend/app/potions/[id]/PotionDetail.tsx
@@ -186,6 +186,7 @@ export default function PotionDetail({
 
           {/* Sticky ToC */}
           <nav className="toc" aria-label={t("On this page", lang)}>
+            <span className="toc-label">{t("On this page", lang)}</span>
             {tocItems.map((it) => (
               <a
                 key={it.id}
diff --git a/frontend/app/powers/[id]/PowerDetail.tsx b/frontend/app/powers/[id]/PowerDetail.tsx
index 1b667762..3a4c5826 100644
--- a/frontend/app/powers/[id]/PowerDetail.tsx
+++ b/frontend/app/powers/[id]/PowerDetail.tsx
@@ -162,6 +162,7 @@ export default function PowerDetail({ initialPower }: { initialPower?: Power | n
 
           {/* Sticky ToC */}
           <nav className="toc" aria-label={t("On this page", lang)}>
+            <span className="toc-label">{t("On this page", lang)}</span>
             {tocItems.map((it) => (
               <a
                 key={it.id}
diff --git a/frontend/app/relics/[id]/RelicDetail.tsx b/frontend/app/relics/[id]/RelicDetail.tsx
index cb38633c..3fea5bef 100644
--- a/frontend/app/relics/[id]/RelicDetail.tsx
+++ b/frontend/app/relics/[id]/RelicDetail.tsx
@@ -191,6 +191,7 @@ export default function RelicDetail({
 
           {/* Sticky ToC */}
           <nav className="toc" aria-label={t("On this page", lang)}>
+            <span className="toc-label">{t("On this page", lang)}</span>
             {tocItems.map((it) => (
               <a
                 key={it.id}
diff --git a/frontend/app/timeline/[id]/EpochDetail.tsx b/frontend/app/timeline/[id]/EpochDetail.tsx
index a01ad22b..d282c3c6 100644
--- a/frontend/app/timeline/[id]/EpochDetail.tsx
+++ b/frontend/app/timeline/[id]/EpochDetail.tsx
@@ -168,6 +168,7 @@ export default function EpochDetail({ initialEpoch }: { initialEpoch?: Epoch | n
           {/* Sticky ToC */}
           {tocItems.length > 0 && (
             <nav className="toc" aria-label="On this page">
+              <span className="toc-label">On this page</span>
               {tocItems.map((it) => (
                 <a
                   key={it.id}