Team roles: construction personas with attire notes; fix dark-theme dropdown

- Replace roles with the 10 Construction Industry personas (Owner, Admin,
  Sales Manager, Sales Rep, Project Manager, Site Supervisor, Canvasser,
  Team Lead, Subcontractor, Other), each with description, attire &
  appearance cues and a common-overlap note
- Render Attire & appearance + Common overlap sections on each role card
- Remap members/invites to new role ids; add canvasser, team-lead and
  subcontractor members so every persona shows
- Set color-scheme per theme and style <select> options so the role
  dropdown is legible in dark mode

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/app/dashboard/dashboard.css

@@ -29,6 +29,7 @@
   /* ---- dark (default) ---- */
   .dash-root,
   .dash-root[data-theme="dark"] {
+    color-scheme: dark;
     --bg: #060608;
     --panel: #0e0e13;
     --panel-2: #060608;
@@ -46,6 +47,7 @@
   
   /* ---- light ---- */
   .dash-root[data-theme="light"] {
+    color-scheme: light;
     --bg: #eef1f7;
     --panel: #ffffff;
     --panel-2: #f5f7fb;
@@ -363,6 +365,7 @@
   }
   .dash-root .ds-textarea { height: auto; padding: 11px 13px; resize: vertical; line-height: 1.5; }
   .dash-root .ds-select { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
+  .dash-root .ds-select option { background: var(--panel); color: var(--text); }
   .dash-root .ds-input:focus, .dash-root .ds-select:focus, .dash-root .ds-textarea:focus { border-color: var(--orange); box-shadow: 0 0 0 3px var(--ring); }
   .dash-root .ds-input.flush { border: 0; background: none; box-shadow: none; padding: 0 4px; height: 38px; }
   .dash-root .ds-input.flush:focus { box-shadow: none; }
@@ -977,7 +980,21 @@
   .dash-root[data-theme="dark"] .tm-ring-in { background: #14110d; }
   .dash-root .tm-rolecard-name { font-size: 15px; font-weight: 800; display: flex; align-items: center; }
   .dash-root .tm-rolecard-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
-  .dash-root .tm-rolecard-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 16px; }
+  .dash-root .tm-rolecard-desc { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; }
+
+  /* Attire & appearance — persona-guide cues */
+  .dash-root .tm-attire { border-top: 1px solid var(--border); padding-top: 13px; margin-bottom: 13px; }
+  .dash-root .tm-attire-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--rc); margin-bottom: 9px; }
+  .dash-root .tm-attire-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
+  .dash-root .tm-attire-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
+  .dash-root .tm-attire-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--rc); flex: 0 0 auto; margin-top: 7px; }
+
+  /* Common overlap — how the role blends with others */
+  .dash-root .tm-overlap { display: flex; gap: 10px; padding: 11px 12px; margin-bottom: 16px; border-radius: 12px; background: color-mix(in srgb, var(--rc) 7%, transparent); border: 1px solid color-mix(in srgb, var(--rc) 18%, transparent); }
+  .dash-root .tm-overlap-ic { color: var(--rc); flex: 0 0 auto; margin-top: 1px; }
+  .dash-root .tm-overlap b { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-2); margin-bottom: 3px; }
+  .dash-root .tm-overlap p { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }
+
   .dash-root .tm-permgroup { margin-bottom: 14px; }
   .dash-root .tm-permgroup:last-child { margin-bottom: 0; }
   .dash-root .tm-permgroup-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--faint); margin-bottom: 8px; }