Refine account connections and provider sign-in UI

docs/DESIGN_SYSTEM.md

@@ -65,6 +65,25 @@ Use the spacing tokens for new components. Prefer `8px`, `12px`, and `20px` gaps
   portrait or uploading a custom portrait, use a compact secondary tab row.
   Tabs retain native button semantics plus tablist, tab, and tabpanel roles,
   textual selected state, keyboard focus, and pressed feedback.
+- Account Access uses a secondary method navigation for passkeys, verified
+  email, local password fallback, and linked identity providers. Each tab shows
+  a compact configured-method count and routes failed actions back to the
+  relevant panel. External identity connections live inside Access rather than
+  competing with it as a top-level account domain.
+- Future external providers may appear as non-interactive planned rows so the
+  intended identity architecture is visible before credentials are configured.
+  Placeholders must be visually subdued, explicitly labeled `PLANNED`, and must
+  not imitate enabled buttons. Provider-compliant assets and controls replace
+  these rows only when the corresponding OAuth application is implemented.
+- Provider unlinking does not assume that a password exists. The unlink control
+  is the provider card’s `LINKED` status badge. Hover and keyboard focus turn it
+  red and replace the label with `UNLINK`; activation replaces the full card
+  surface with an explicit Cancel / Confirm Unlink decision. Confirmation uses
+  the square SHD primary action with the orange action accent, while Cancel
+  remains a dark outlined secondary control. The authenticated
+  session plus this deliberate second action authorizes the request; the shared
+  server-side last-method guard remains authoritative. Future provider cards
+  reuse this pattern rather than adding provider-specific credential prompts.
 - Authentication pages use a split frame: contextual SHD network information on
   the left and the actionable secure-access console on the right.
 - OAuth providers appear as connection nodes with a recognizable provider color;
@@ -108,6 +127,18 @@ Use the spacing tokens for new components. Prefer `8px`, `12px`, and `20px` gaps
   with the explicit label “Continue with Discord.”
 - Discord account connection controls use the same official symbol and Blurple
   treatment with the explicit label “Link Discord.”
+- Sign-in pages group external providers into a compact, equal-weight provider
+  rail. Keep a short visible provider name beneath each mark; accessible names
+  and hover text are supplementary and do not replace required brand wording.
+- Google uses its standard multicolor G on a white icon field, Apple uses a
+  white Apple mark on black, Discord uses its unmodified white symbol on
+  Blurple, and Steam uses its white linked-circle mark on Steam navy.
+- Providers that are not configured are disabled, desaturated, and marked
+  `PLANNED`; they must not navigate, submit, or visually imply availability.
+- When each provider is implemented, replace its placeholder with the
+  provider-rendered control or current pre-approved sign-in artwork where the
+  provider requires it. In particular, use Google Identity Services or its
+  approved icon-mode asset and Steam's published sign-in image.
 - Preserve the provider's required clearspace, logo proportions, approved color,
   readable contrast, and text/logo alignment even when the surrounding surface
   follows the SHD theme.