refactor(account): migrate member/account to PageShell vocabulary

- Replace .member-account-page + .account-authenticated flex chains with <PageShell>
- Replace <SidebarLayout> with <ColumnsLayout cols=events-sidebar>
- Replace .account-columns grid with nested <ColumnsLayout cols=2> + named slots
- Replace all 5 .account-col-inset wrappers with <PageSection> components
- Rename .account-section--danger → .danger-section
- Delete ~75 lines of layout CSS (flex chains, grid, asymmetric paddings, collapse rules)

app/pages/member/account.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="member-account-page">
+  <PageShell>
     <!-- Unauthenticated -->
     <div v-if="!memberData" class="loading">
       <p>Please sign in to access your account settings.</p>
@@ -11,7 +11,7 @@
       </button>
     </div>
 
-    <div v-else class="account-authenticated">
+    <template v-else>
       <!-- PAGE HEADER -->
       <PageHeader
         title="Account Settings"
@@ -19,12 +19,11 @@
       />
 
       <!-- CONTENT AREA WITH EVENTS SIDEBAR -->
-      <SidebarLayout>
+      <ColumnsLayout cols="events-sidebar">
-        <div class="account-columns">
+        <ColumnsLayout cols="2">
           <!-- LEFT COLUMN: Membership Status & Email -->
-          <div class="account-col-left">
+          <template #left>
-            <section class="account-section">
+            <PageSection>
-              <div class="account-col-inset">
               <div class="section-label">Current Membership</div>
 
               <div class="membership-card">
@@ -68,11 +67,9 @@
                   }}</span>
                 </div>
               </div>
-              </div>
+            </PageSection>
-            </section>
 
-            <section class="account-section">
+            <PageSection divider="top">
-              <div class="account-col-inset">
               <div class="section-label">Email</div>
 
               <div v-if="!showEmailEdit" class="email-display">
@@ -115,11 +112,9 @@
               <div class="email-hint">
                 Used for login magic links and notifications
               </div>
-              </div>
+            </PageSection>
-            </section>
 
-            <section class="account-section account-section--danger">
+            <PageSection divider="top" class="danger-section">
-              <div class="account-col-inset">
               <div class="section-label danger">Danger Zone</div>
               <div class="danger-zone">
                 <p>
@@ -153,14 +148,12 @@
                   Cancel Membership
                 </button>
               </div>
-              </div>
+            </PageSection>
-            </section>
+          </template>
-          </div>
 
           <!-- RIGHT COLUMN: Change Contribution & Circle -->
-          <div class="account-col-right">
+          <template #right>
-            <section class="account-section">
+            <PageSection>
-              <div class="account-col-inset">
               <div class="section-label">Change Contribution</div>
 
               <TierPicker v-model="selectedTier" :tiers="tiers" />
@@ -177,11 +170,9 @@
               >
                 {{ isUpdating ? "Updating…" : "Update Contribution" }}
               </button>
-              </div>
+            </PageSection>
-            </section>
 
-            <section class="account-section">
+            <PageSection divider="top">
-              <div class="account-col-inset">
               <div class="section-label">Change Circle</div>
 
               <CirclePicker
@@ -195,13 +186,12 @@
               >
                 {{ isUpdating ? "Updating…" : "Update Circle" }}
               </button>
-              </div>
+            </PageSection>
-            </section>
+          </template>
-          </div>
+        </ColumnsLayout>
-        </div>
+      </ColumnsLayout>
-      </SidebarLayout>
+    </template>
-    </div>
+  </PageShell>
-  </div>
 </template>
 
 <script setup>
@@ -385,82 +375,11 @@ const confirmCancelMembership = async () => {
 </script>
 
 <style scoped>
-.member-account-page {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
 .loading {
-  flex: 1;
   padding: 48px 32px;
   color: var(--text-dim);
 }
 
-.account-authenticated {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-
-/* ---- TWO-COLUMN LAYOUT ---- */
-.account-columns {
-  flex: 1;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  align-items: stretch;
-  min-height: 0;
-}
-.account-col-left,
-.account-col-right {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  align-self: stretch;
-  width: 100%;
-  min-width: 0;
-}
-.account-col-left {
-  border-right: 1px dashed var(--border);
-}
-
-/* Full-column rules: border on block-level section */
-.account-section {
-  width: 100%;
-  min-width: 0;
-}
-.account-section + .account-section {
-  margin-top: 24px;
-  border-top: 1px dashed var(--border);
-  padding-top: 20px;
-}
-.account-section + .account-section.account-section--danger {
-  margin-top: 24px;
-  padding-top: 20px;
-}
-
-.account-col-left > .account-section:first-child .account-col-inset,
-.account-col-right > .account-section:first-child .account-col-inset {
-  padding-top: 24px;
-}
-
-.account-col-left > .account-section:last-child .account-col-inset,
-.account-col-right > .account-section:last-child .account-col-inset {
-  padding-bottom: 24px;
-}
-
-.account-col-left .account-col-inset {
-  padding-left: 28px;
-  padding-right: 24px;
-}
-
-.account-col-right .account-col-inset {
-  padding-left: 24px;
-  padding-right: 28px;
-}
-
 /* ---- MEMBERSHIP CARD ---- */
 .membership-card {
   border: 1px dashed var(--border);
@@ -567,14 +486,14 @@ const confirmCancelMembership = async () => {
 }
 
 /* ---- DANGER ZONE ---- */
-.account-section--danger {
+.danger-section {
   background: var(--ember-bg);
 }
 
-.account-section--danger .section-label.danger {
+.danger-section .section-label.danger {
   color: var(--ember);
 }
-.account-section--danger .danger-zone p {
+.danger-section .danger-zone p {
   color: var(--text-dim);
   font-size: 12px;
   line-height: 1.7;
@@ -610,19 +529,4 @@ const confirmCancelMembership = async () => {
   text-align: center;
 }
 
-/* ---- RESPONSIVE ---- */
-@media (max-width: 1024px) {
-  .account-columns {
-    grid-template-columns: 1fr;
-  }
-  .account-col-left {
-    border-right: none;
-    border-bottom: 1px dashed var(--border);
-  }
-  .account-col-left .account-col-inset,
-  .account-col-right .account-col-inset {
-    padding-left: 28px;
-    padding-right: 28px;
-  }
-}
 </style>