Feature: English and French throughout the SPA

  Background:
    Given all existing SPA interface text supports English and French
    And English preserves existing copy and French provides equivalent meaning
    And user content, API data and transactional emails remain unchanged
    And visual checks are waived by the user for this slice
    And the language control uses existing design tokens

  Scenario Outline: Resolve the language before rendering
    Given the browser-local stored language is <stored>
    When the SPA starts
    Then the interface language and document lang are <locale>
    And browser language does not override the choice

    Examples:
      | stored      | locale |
      | absent      | en     |
      | en          | en     |
      | fr          | fr     |
      | unsupported | en     |
      | unreadable  | en     |

  Scenario Outline: Open the language picker in the profile submenu
    Given the user opens the <menu>
    When they activate the localized Language control
    Then a compact scrollable picker offers English and Français
    And the selected language is visibly and accessibly identified
    And the picker uses Nuxt UI and existing design tokens

    Examples:
      | menu                    |
      | desktop UserMenu        |
      | mobile AccountMenuSheet |

  Scenario: Switch language without losing work
    Given the user is editing an unsaved display name on /profile
    When they select Français
    Then all SPA interface text immediately uses French
    And the document lang is fr
    And the route, session, theme and unsaved work remain unchanged
    And no reload, navigation or API request is caused by switching
    When they select English
    Then the interface immediately restores English with the same preserved state

  Scenario: Remember language on this browser
    Given the user selected Français
    When they navigate, reload, log out or return on this browser
    Then French remains selected including on public authentication screens
    And no language preference is sent to the server

  Scenario: Storage failure does not prevent switching
    Given preference storage cannot be written
    When the user selects Français
    Then French is used for the current session without an error
    And a fresh load without a readable preference defaults to English

  Scenario: Translate the entire interface
    Given French is selected
    When an existing SPA screen or shared component renders
    Then navigation, forms, validation, notifications, dialogs and accessibility labels use French
    And counts, human-readable dates and numbers use the selected locale
    And Nuxt UI controls use the selected locale
    And English and French catalogs have matching keys and interpolation parameters
    And an unavailable French message falls back to English
    And user content, account details, filenames, URLs, API data and emails remain unchanged

  Scenario Outline: Operate the picker accessibly
    Given the picker is open in the <menu>
    When the user navigates its options with the keyboard and confirms a choice
    Then the language changes and the picker closes
    And focus returns to its language control
    When they reopen it and press Escape or click outside
    Then the picker closes without changing language

    Examples:
      | menu                    |
      | desktop UserMenu        |
      | mobile AccountMenuSheet |