/* The console's "Back to Mersal" pill. Approved mock: docs/design/admin-console/back-to-app.html, whose
 * SHIPS AS-IS block this file is - change both together. Linked by AdminConsoleBackLink beside the script,
 * not appended to theme-override.css: the console's Customization page can repoint ThemeOverrideCssPath.
 *
 * The "Back to Mersal" pill, drawn by wwwroot/mersal-console/back-to-app.js outside the console's #root.
 * It sits in the empty start end of the console's footer (45 px: py-3 + text-sm + its border), 8 px from the
 * bottom, so it covers nothing; z-index 30 keeps it under the mobile drawer's backdrop (z-40) and drawer
 * (z-50). Colours are the console's own variables, so it follows the console's light/dark class. No
 * transition: the console's nav items change colour on hover the same way and Mersal's motion tokens do not
 * exist on this page, so there is no token to bind a duration to. The label is --foreground at rest:
 * --muted-foreground on --background is 4.0:1 in dark, under WCAG's 4.5:1 (review, 2026-10-14). 14 px is
 * declared, not inherited: the console's body is 16 px, the mock's 14 px. */
.mersal-back-to-app {
  position: fixed;
  inset-inline-start: 16px;
  inset-block-end: 8px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  block-size: 28px;
  padding-inline: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--background);
  color: var(--foreground);
  font-size: 14px;
  text-decoration: none;
  white-space: nowrap;
}
.mersal-back-to-app:hover {
  background: var(--accent);
  color: var(--accent-foreground);
}
.mersal-back-to-app:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}
.mersal-back-to-app svg {
  inline-size: 16px;
  block-size: 16px;
  flex: none;
}
/* The anchor keeps the console's direction (LTR in every language - the console never sets `dir`): Chrome
 * resolves a fixed element's inset-inline-start against its OWN direction, so dir="rtl" on the anchor sent
 * the Arabic pill to the far right (measured). Only the label carries lang/dir. */
/* Below 640 px the console's centred footer text reaches the pill: icon only, the label kept as the
 * accessible name. */
@media (width < 640px) {
  .mersal-back-to-app {
    inline-size: 28px;
    padding: 0;
    justify-content: center;
  }
  .mersal-back-to-app span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}