/* mobile-topbar-align-right-20261024
   Phone only. Language, account, then currency, as one right-aligned group.
   The group uses the page content box that already exists.
   A row that does not fit wraps whole controls; each row stays on the right.
   Quick assessment already has its own right alignment and is left alone.
   Desktop rules are not in this file. */

@media (max-width: 900px) {
  html:not([data-homepage-view="qhc"]) .app-shell .topbar-tools,
  .workforce-standalone .topbar-tools {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 100%;
    min-width: 0;
    padding-inline: 0;
    position: relative;
    width: 100%;
  }

  /* Industry header is full width. The column under it is already inset 16px.
     The control row uses that same inset. The logo row is not in this rule. */
  [data-industry-workbench] [data-industry-public-topbar] .topbar-tools {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    justify-self: stretch;
    margin-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
    max-width: 100%;
    min-width: 0;
    padding-inline: 0;
    position: relative;
    width: auto;
  }

  html:not([data-homepage-view="qhc"]) .app-shell .topbar-tools > .topbar-settings,
  html:not([data-homepage-view="qhc"]) .app-shell .topbar-tools > .account-panel,
  html:not([data-homepage-view="qhc"]) .app-shell .topbar-tools > .currency-field,
  .workforce-standalone .topbar-tools > .topbar-settings,
  .workforce-standalone .topbar-tools > .account-panel,
  .workforce-standalone .topbar-tools > .currency-field,
  [data-industry-workbench] [data-industry-public-topbar] .topbar-tools > .topbar-settings,
  [data-industry-workbench] [data-industry-public-topbar] .topbar-tools > .account-panel,
  [data-industry-workbench] [data-industry-public-topbar] .topbar-tools > .currency-field {
    max-width: 100%;
  }

  html:not([data-homepage-view="qhc"]) .app-shell .topbar-settings,
  .workforce-standalone .topbar-settings,
  [data-industry-workbench] [data-industry-public-topbar] .topbar-settings {
    position: static;
  }

  html:not([data-homepage-view="qhc"]) .app-shell .settings-popover,
  .workforce-standalone .settings-popover,
  [data-industry-workbench] [data-industry-public-topbar] .settings-popover {
    left: auto;
    max-width: 100%;
    right: 0;
    top: calc(100% + 8px);
    width: min(220px, 100%);
  }

  /* The account menu is fixed. An automatic left edge starts it at the
     account button and a width up to 420px then runs off the right of a
     phone. Both sides stay 12px inside the screen, near that button.
     Long words wrap. The script can still set the vertical position. */
  .account-panel[open] > .account-popover {
    box-sizing: border-box;
    left: 12px !important;
    max-width: none !important;
    min-width: 0;
    overflow-wrap: break-word;
    right: 12px !important;
    white-space: normal;
    width: auto !important;
  }
}