Preserve title slide accents

Amp-Thread-ID: https://ampcode.com/threads/T-01a0449e-4249-720c-b618-ef3d17bd26ad
Co-authored-by: Amp <amp@ampcode.com>

Author: HamptonMakes

engine/app/assets/stylesheets/coplan/deck.css

@@ -241,6 +241,10 @@
 .deck-slide--title .deck-content h1,
 .deck-slide--title .deck-content h2,
 .deck-slide--title .deck-content h3 {
+  display: grid;
+  grid-template-columns: minmax(0, auto) auto;
+  align-items: center;
+  justify-content: start;
   font-size: 2.8em;
   line-height: 1.1;
   letter-spacing: -0.02em;
@@ -256,6 +260,7 @@
   display: block;
   width: 1.6em;
   height: 0.16em;
+  grid-column: 1 / -1;
   border-radius: 0.08em;
   background: var(--deck-title-accent, var(--deck-accent));
   margin-bottom: 0.55em;

spec/system/deck_ux_spec.rb

@@ -118,6 +118,28 @@ def attachments_on_screen?
     JS
   end
 
+  it "keeps the title-slide accent above its aligned section shortcut" do
+    visit plan_page_path(plan)
+    expect(page).to have_css(".deck-slide--title .section-permalink", visible: :all)
+
+    layout = page.evaluate_script(<<~JS)
+      (() => {
+        const heading = document.querySelector(".deck-slide--title .section-heading")
+        const title = heading.querySelector(".section-heading__title").getBoundingClientRect()
+        const link = heading.querySelector(".section-permalink").getBoundingClientRect()
+        const accent = getComputedStyle(heading, "::before")
+        return {
+          display: getComputedStyle(heading).display,
+          accentColumn: `${accent.gridColumnStart} / ${accent.gridColumnEnd}`,
+          centerDelta: Math.abs((title.top + title.bottom - link.top - link.bottom) / 2)
+        }
+      })()
+    JS
+
+    expect(layout).to include("display" => "grid", "accentColumn" => "1 / -1")
+    expect(layout["centerDelta"]).to be < 1
+  end
+
   describe "present mode" do
     it "treats a drag as a highlight and a bare click as the next slide" do
       visit plan_page_path(plan)