Feature: Profile role card of the roles-sync design (group 9)

  As a signed-in person
  I want my role card to show my role, whether it is locked, built-in or custom, and what I can do
  So that I can understand my access without reading who assigned it

  Background:
    Given the spec of record is docs/design/screens/roles.md group 9
    And features/roles_spa_users.feature "Profile, your role" is amended by this file: the summary line and "Assigned by" are removed
    And GET /v1/auth/me answers access.role {id, name, built_in, locked} and access.permissions; the design says GET /v1/me, the real route is /v1/auth/me
    And the card layout, top to bottom, inside the existing card with a gap of 12: the title, one row of badges, the link row with the list-checks icon, the muted key line
    And the backend keeps answering role_assigned_by (slice 7); the SPA ignores it
    And the SPA lives in web/src, Nuxt UI only, design tokens only, EN and FR in i18n/messages.ts, no comments in code

  Rule: The card

    Scenario Outline: Role card states
      Given GET /v1/auth/me answers access.role <role>
      When the person opens /profile
      Then the card "Your role" shows the RoleBadge <badge>, then <tags>, in one row
      And the link row shows "See what I can do" with the list-checks icon
      And the muted line reads "Your API keys follow this role. If your role changes, they change too."
      And "Locked" is absent when locked is false and "Custom" is absent when built_in is true
      Examples:
        | role                                                        | badge       | tags                  |
        | {"name": "Contributor", "built_in": false, "locked": false} | Contributor | Custom                |
        | {"name": "Owner", "built_in": true, "locked": true}         | Owner       | Locked, then Built-in |
        | {"name": "Writer", "built_in": true, "locked": false}       | Writer      | Built-in              |

    Scenario: Removed content
      Given access.role_assigned_by is {"id": 3, "name": "Marta Alves"}
      Then the card shows no summary line such as "Creates content and edits only their own."
      And the card shows no "Assigned by" text and no empty placeholder
      And the Users table and cards still show no role_assigned_by

    Scenario: See what I can do
      When "See what I can do" is pressed
      Then a dialog on desktop and a bottom sheet on mobile opens: "What you can do" / "A summary of your role, Contributor. Read-only." with "Close"
      And its body is built from the permission list of the session, with no GET /v1/role call
      And Close returns focus to the link

    Scenario: The card follows the session
      Given the Profile is open
      When the session is refreshed and access.role becomes Writer, built-in
      Then the badge reads "Writer", the tags become Built-in and the summary dialog follows

    Scenario: While the session loads
      Given the session has not loaded
      Then the existing profile skeleton shows with the role card inside it and no role text

  Rule: Backend

    Scenario: No change
      Then GET /v1/auth/me and GET /v1/user keep answering role_assigned_by
      And access.role already carries built_in and locked (lib/permissions.ts), so no endpoint changes