Join crew objectives toggle and checklist in one panel

TODO.md

@@ -29,7 +29,7 @@
 
 - [ ] Temporary names
 - [x] Consistent player list order
-- [ ] Crew objectives reveal area should be connected to button
+- [x] Crew objectives reveal area should be connected to button
 
 ## Fixes
 

frontend/src/assets/css/scene-play.css

@@ -157,7 +157,14 @@
     color: var(--text-muted);
 }
 
-/* Crew Objectives toggle at the end of the roster */
+/* The toggle and revealed objectives share one continuous panel. */
+.crew-objectives-panel {
+    background: color-mix(in srgb, var(--accent) 12%, transparent);
+    border: 1px solid var(--accent);
+    border-radius: var(--radius-md);
+    overflow: hidden;
+}
+
 .crew-objectives-toggle {
     display: flex;
     align-items: center;
@@ -166,9 +173,9 @@
     width: 100%;
     text-align: left;
     padding: 0.55rem 0.7rem;
-    background: color-mix(in srgb, var(--accent) 12%, transparent);
-    border: 1px solid var(--accent);
-    border-radius: var(--radius-md);
+    background: transparent;
+    border: 0;
+    border-radius: 0;
     color: var(--text);
     font-family: var(--font-heading);
     font-size: 0.85rem;
@@ -180,6 +187,11 @@
     background: color-mix(in srgb, var(--accent) 22%, transparent);
 }
 
+.crew-objectives-toggle:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: -3px;
+}
+
 .crew-objectives-toggle .co-count {
     font-weight: 700;
     color: var(--accent);
@@ -187,9 +199,7 @@
 
 .crew-objectives-detail {
     padding: 0.6rem 0.7rem;
-    background: var(--well);
-    border: 1px solid var(--edge);
-    border-radius: var(--radius-md);
+    border-top: 1px solid var(--edge-accent);
     display: flex;
     flex-direction: column;
     gap: 0.35rem;

frontend/src/components/scene/CrewColumn.svelte

@@ -79,7 +79,8 @@
             </button>
         {/each}
 
-        <!-- Crew Objectives sits at the end of the roster and slides open in place -->
+        <!-- One shared panel keeps the toggle attached to its contents. -->
+        <div class="crew-objectives-panel">
             <button
                 class="crew-objectives-toggle"
                 aria-expanded={showObjectives}
@@ -108,6 +109,7 @@
             {/if}
         </div>
     </div>
+</div>
 
 {#if openTarget}
     <CharacterSheet {state} target={openTarget} on:close={() => openTargetId = null} />

frontend/src/lib/changelog.js

@@ -6,10 +6,11 @@
 //   - Add a CHANGELOG entry only when a commit changes something players can
 //     see. Skip refactors, tests, and tooling. Keep wording player-facing.
 
-export const VERSION = 43;
+export const VERSION = 44;
 
 // Newest first. Each entry: { version, date: 'YYYY-MM-DD', changes: [string, ...] }.
 export const CHANGELOG = [
+    { version: 44, date: '2026-09-04', changes: ['Crew Objectives opens as one connected panel, with the toggle and checklist sharing a border and background.'] },
     { version: 43, date: '2026-09-04', changes: ['The crew roster keeps players in the same order when roles or ranks change, including when someone becomes the Deep.'] },
     { version: 42, date: '2026-09-04', changes: ['Gats require a description, including older Gats that were left blank. Read descriptions on character sheets or hover over Gat icons in the crew roster.', 'Gat descriptions and prompts follow Gat Taxes correctly and clear when you create a new recruit.'] },
     { version: 41, date: '2026-09-04', changes: ['Dismiss a completed duel once you have read the result. Other players can still read it, and dismissed results stay hidden after a reload.'] },