/* Stoneware application shell, navigation and responsive shell composition. */
.fs-shell {
  --fs-workspace-background-color: var(--fs-color-canvas);
  --fs-workspace-background-image: url("backgrounds/shapes-background.png");
  --fs-workspace-background-position: top left;
  --fs-workspace-background-repeat: repeat;
  --fs-workspace-background-size: auto;
  position: relative;
  isolation: isolate;
  display: flex;
  width: min(var(--fs-shell-max-width), calc(100vw - 32px));
  height: calc(100dvh - 16px);
  margin: 8px auto;
  padding: 0;
}

.fs-shell-frame {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--fs-color-canvas);
  border: 0;
  border-radius: var(--fs-radius-lg);
  /* The hairline is a shadow ring, not a border. A border would shrink the
     overflow clip of the children by its own width, so every rounded corner
     would expose an arc of frame background instead of the sidebar or content
     sitting right next to it. */
  box-shadow:
    0 0 0 1px var(--fs-color-border-subtle),
    var(--fs-shadow-md);
}

@media (min-width: 1200px) {
  .fs-shell-frame::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: var(--fs-topbar-height);
    background: var(--fs-color-header-surface);
    content: "";
    pointer-events: none;
  }
}

.fs-shell::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--fs-workspace-background-color);
  background-image: var(--fs-workspace-background-image);
  background-position: var(--fs-workspace-background-position);
  background-repeat: var(--fs-workspace-background-repeat);
  background-size: var(--fs-workspace-background-size);
  content: "";
  pointer-events: none;
}

.fs-shell[data-workspace-background-blur="true"]::before {
  inset: -20px;
  filter: blur(var(--fs-workspace-background-blur, 3.6px));
}

.fs-shell[data-workspace-background="shapes"] {
  --fs-workspace-background-color: var(--fs-color-canvas);
  --fs-workspace-background-image: url("backgrounds/shapes-background.png");
  --fs-workspace-background-size: auto;
}

.fs-shell[data-workspace-background="light"] {
  --fs-workspace-background-color: var(--fs-color-surface-subtle);
  --fs-workspace-background-image:
    linear-gradient(var(--fs-color-workspace-light-overlay), var(--fs-color-workspace-light-overlay)),
    url("backgrounds/light-background.png");
}

.fs-shell[data-workspace-background="clouds"] {
  --fs-workspace-background-color: var(--fs-color-workspace-clouds);
  --fs-workspace-background-image:
    linear-gradient(var(--fs-color-workspace-clouds-overlay), var(--fs-color-workspace-clouds-overlay)),
    url("backgrounds/background-clouds.png");
  --fs-workspace-background-position: center;
  --fs-workspace-background-repeat: no-repeat;
  --fs-workspace-background-size: cover;
}

.fs-shell[data-workspace-background="clean"] {
  --fs-workspace-background-color: var(--fs-color-surface-subtle);
  --fs-workspace-background-image: none;
}

.fs-shell[data-workspace-background="custom"] {
  --fs-workspace-background-color: var(--fs-color-canvas);
  --fs-workspace-background-image: url("/profile/background-image");
  --fs-workspace-background-position: top left;
  --fs-workspace-background-repeat: repeat;
  --fs-workspace-background-size: auto;
}

.fs-shell[data-workspace-background-layout="tile"] {
  --fs-workspace-background-position: top left;
  --fs-workspace-background-repeat: repeat;
  --fs-workspace-background-size: auto;
}

.fs-shell[data-workspace-background-layout="fit"] {
  --fs-workspace-background-position: center;
  --fs-workspace-background-repeat: no-repeat;
  --fs-workspace-background-size: contain;
}

.fs-shell[data-workspace-background-layout="fill"] {
  --fs-workspace-background-position: center;
  --fs-workspace-background-repeat: no-repeat;
  --fs-workspace-background-size: cover;
}

.fs-shell[data-workspace-background-layout="center"] {
  --fs-workspace-background-position: center;
  --fs-workspace-background-repeat: no-repeat;
  --fs-workspace-background-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  #preloader {
    transition-duration: 0.01ms !important;
  }

  .page-loader__spinner {
    animation-duration: 1.5s;
  }
}

.fs-sidebar {
  position: relative;
  z-index: 45;
  width: var(--fs-sidebar-width);
  min-width: var(--fs-sidebar-width);
  max-width: var(--fs-sidebar-width);
  height: 100%;
  padding: 0;
  overflow: visible;
  background: transparent;
  border-right: 0;
}

.fs-sidebar::after {
  position: absolute;
  z-index: 0;
  top: var(--fs-topbar-height);
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--fs-color-canvas);
  content: "";
  pointer-events: none;
}

.fs-side-navigation {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

.fs-navigation-brand {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--fs-topbar-height);
  margin: 0;
  padding: 0 8px;
  background: transparent;
  border: 0;
}

.fs-navigation-brand img {
  display: block;
  width: min(224px, 100%);
  height: 42px;
  object-fit: contain;
}

.fs-navigation-brand:focus-visible {
  outline: none;
  box-shadow: inset var(--fs-focus-ring);
}

.fs-navigation-item:focus-visible,
.fs-navigation-group-title:focus-visible {
  outline: none;
  box-shadow: var(--fs-focus-ring);
}

.fs-navigation-signature {
  flex: none;
  margin: 0 var(--fs-space-2) var(--fs-space-2);
  color: var(--fs-color-text-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

/*
 * The wrapper owns the fade, not the scroller: a mask on the scrolling element
 * would dim its own scrollbar along with the content.
 */
.fs-navigation-scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  min-height: 0;
}

.fs-navigation-scroll::before,
.fs-navigation-scroll::after {
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  height: 30px;
  opacity: 0;
  transition: opacity 0.2s ease;
  content: "";
  pointer-events: none;
}

.fs-navigation-scroll::before {
  top: 0;
  background: linear-gradient(to bottom, var(--fs-color-canvas) 12%, transparent 100%);
}

.fs-navigation-scroll::after {
  bottom: 0;
  background: linear-gradient(to top, var(--fs-color-canvas) 12%, transparent 100%);
}

.fs-navigation-scroll.is-overflowing-top::before,
.fs-navigation-scroll.is-overflowing-bottom::after {
  opacity: 1;
}

.fs-navigation-scroll-cue {
  position: absolute;
  z-index: 3;
  left: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: var(--fs-color-primary-text);
  background: transparent;
  border: 0;
  border-radius: var(--fs-radius-sm);
  box-shadow: none;
  font: inherit;
  transform: translateX(-50%);
  cursor: pointer;
}

.fs-navigation-scroll-cue[hidden] {
  display: none;
}

.fs-navigation-scroll-cue--top {
  top: 2px;
}

.fs-navigation-scroll-cue--bottom {
  bottom: 2px;
}

.fs-navigation-scroll-cue__chevron {
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-left: 1.5px solid currentColor;
  transform: rotate(45deg) translate(1px, 1px);
}

.fs-navigation-scroll-cue--bottom .fs-navigation-scroll-cue__chevron {
  transform: rotate(225deg) translate(1px, 1px);
}

@media (hover: hover) {
  .fs-navigation-scroll-cue:hover {
    background: var(--fs-color-primary-subtle);
  }
}

.fs-navigation-scroll-cue:focus-visible {
  outline: 2px solid var(--fs-color-primary);
  outline-offset: 2px;
}

.fs-navigation-sections {
  position: relative;
  flex: 1;
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 0;
  /* Right space comes from the reserved gutter, so it balances the 8px on the left. */
  padding: 12px 0 16px 8px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: var(--fs-color-border) transparent;
  /* Reserved even when nothing scrolls: otherwise opening a group makes the
     scrollbar appear and every navigation item narrows under the pointer. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.fs-navigation-sections::-webkit-scrollbar {
  width: 8px;
}

.fs-navigation-sections::-webkit-scrollbar-track {
  background: transparent;
}

.fs-navigation-sections::-webkit-scrollbar-thumb {
  background: var(--fs-color-border);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

@media (hover: hover) {
  .fs-navigation-sections::-webkit-scrollbar-thumb:hover {
    background: var(--fs-color-text-muted);
    background-clip: content-box;
  }
}

.fs-navigation-group {
  display: grid;
  gap: 2px;
  padding: 0;
}

.fs-navigation-group-title {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px;
  color: var(--fs-color-text);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}

@media (hover: hover) {
  .fs-navigation-group-title:hover {
    background: var(--fs-color-surface-hover);
  }
}

.fs-navigation-group-title::after {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.16s ease;
}

.fs-navigation-group:not([open]) .fs-navigation-group-title::after {
  transform: rotate(-45deg);
}

.fs-navigation-list {
  display: grid;
  gap: 2px;
  padding: 0 0 0 16px;
}

.fs-navigation-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  margin: 0;
  padding: 7px 10px;
  color: var(--fs-color-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  transition: background 0.14s ease, color 0.14s ease;
}

@media (hover: hover) {
  .fs-navigation-item:hover {
    background: var(--fs-color-surface-hover);
  }
}

/* The source of the selection colour: every other selected thing reads these. */
.fs-navigation-item--active {
  color: var(--fs-color-selected-text);
  background: var(--fs-color-selected);
  border-color: var(--fs-color-selected-line);
  box-shadow: var(--fs-shadow-sm);
  font-weight: 600;
}

.fs-navigation-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Sized to the mobile navigation, which already carried the larger icon. */
.fs-navigation-icon--section {
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.fs-navigation-icon--item {
  width: 23px;
  height: 23px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* The illustration, not the tile, is what the eye reads: give it the room. */
.fs-navigation-icon img {
  display: block;
  width: 82%;
  height: 82%;
  object-fit: contain;
}

.fs-navigation-icon--section img,
.fs-navigation-icon--item img {
  width: 100%;
  height: 100%;
}

/* Navigation artwork is the affordance itself; do not recolour client-owned SVGs with a tile. */
.fs-navigation-group-title .fs-navigation-icon--section,
.fs-navigation-item .fs-navigation-icon--item {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.fs-navigation-item--active .fs-navigation-icon {
  background: transparent;
}

/*
 * The foot of the navigation belongs to the news panel. The logo at the top
 * already carries the mark, so a wordmark down here repeated it and cost the
 * announcement a row it can use.
 */

/* No z-index here on purpose: a stacking context would trap feature modals
   below the sidebar, however high their own z-index is. */
.fs-main {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  background:
    linear-gradient(
      to bottom,
      transparent 0 var(--fs-topbar-height),
      var(--fs-color-shell-junction) var(--fs-topbar-height) 100%
    );
}

.fs-topbar {
  position: relative;
  z-index: 40;
  flex-shrink: 0;
  display: block;
  min-height: var(--fs-topbar-height);
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}

.fs-topbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--fs-topbar-height);
  padding: 4px 8px 4px 28px;
  background: transparent;
}

.fs-topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}

.fs-shell-action,
.fs-mobile-action {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border);
  border-radius: 12px;
}

.fs-shell-action {
  padding: 0;
  box-shadow: var(--fs-shadow-button);
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

@media (hover: hover) {
  .fs-shell-action:hover {
    background: var(--fs-color-surface-hover);
    border-color: color-mix(in srgb, var(--fs-color-primary) 28%, var(--fs-color-border));
    box-shadow: var(--fs-shadow-button-hover);
    transform: translateY(-1px);
  }
}

.fs-shell-action:focus-visible {
  outline: none;
  box-shadow: var(--fs-focus-ring), var(--fs-shadow-button);
}

.fs-shell-action img {
  width: 24px;
  height: 24px;
}

/* The top bar names its actions with a tooltip; only the mobile tab bar shows this. */
.fs-shell-action__label,
.fs-mobile-tab-label {
  display: none;
}

.fs-shell-action--assistant img {
  width: 24px;
  height: 24px;
}

.fs-profile-menu {
  position: relative;
  margin-left: auto;
}

.fs-mobile-profile-menu {
  display: contents;
}

.fs-profile-menu > summary,
.fs-mobile-profile-menu > summary {
  list-style: none;
}

.fs-profile-menu > summary::-webkit-details-marker,
.fs-mobile-profile-menu > summary::-webkit-details-marker {
  display: none;
}

.fs-user-info {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 290px;
  min-height: 44px;
  padding: 5px 50px 5px 5px;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border);
  border-radius: 999px;
  box-shadow: var(--fs-shadow-sm);
  cursor: pointer;
}

.fs-user-avatar,
.fs-mobile-avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  overflow: hidden;
  color: var(--fs-color-primary-hover);
  background: var(--fs-color-primary-subtle);
  border: 1px solid var(--fs-color-border);
  border-radius: 50%;
  font-family: "Source Serif 4", serif;
  font-weight: 600;
  text-transform: uppercase;
}

.fs-user-avatar--image,
.fs-mobile-avatar--image {
  display: block;
  padding: 0;
  object-fit: cover;
}

.fs-user-identity {
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
  min-width: 0;
}

.fs-user-settings {
  position: absolute;
  top: 50%;
  right: 6px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: color-mix(in srgb, var(--fs-color-primary) 7%, var(--fs-color-surface));
  border: 1px solid color-mix(in srgb, var(--fs-color-primary) 22%, var(--fs-color-border));
  border-radius: 50%;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 62%);
  transform: translateY(-50%);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.fs-user-settings::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: -9px;
  width: 1px;
  background: var(--fs-color-border);
}

.fs-user-settings img {
  width: 20px;
  height: 20px;
  transition: transform 0.25s ease;
}

.fs-profile-menu[open] .fs-user-settings {
  background: var(--fs-color-primary-subtle);
  border-color: color-mix(in srgb, var(--fs-color-primary) 38%, var(--fs-color-border));
}

.fs-profile-menu[open] .fs-user-settings img {
  transform: rotate(90deg);
}

.fs-user-identity strong,
.fs-user-identity small {
  max-width: 205px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fs-user-identity strong {
  font-size: 14px;
  line-height: 1.3;
}

.fs-user-identity small {
  color: var(--fs-color-text-secondary);
  font-size: 11px;
  letter-spacing: 0.03em;
  line-height: 1.3;
  text-transform: uppercase;
}

.fs-profile-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  gap: 2px;
  width: 242px;
  padding: 6px;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border);
  border-radius: var(--fs-radius-lg);
  box-shadow: 0 12px 32px rgb(20 32 36 / 18%);
  animation: fs-profile-popover-in 0.16s ease-out;
}

/* The popover must leave the layout completely while its details menu is
   closed. */
.fs-profile-menu:not([open]) > .fs-profile-popover,
.fs-mobile-profile-menu:not([open]) > .fs-profile-popover {
  display: none;
}

@keyframes fs-profile-popover-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fs-profile-popover__item {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  color: var(--fs-color-text);
  background: transparent;
  border: 0;
  border-radius: var(--fs-radius-md);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

@media (hover: hover) {
  .fs-profile-popover__item:hover {
    color: var(--fs-color-text);
    background: var(--fs-color-surface-hover);
  }
}

/*
 * The same icon language as the rest of the product: one plain blue pictogram,
 * no tinted box and no ring around it. The box made four entries of a menu look
 * like four buttons, and gave each one a colour of its own — three treatments
 * for one list of ordinary account actions.
 */
.fs-profile-popover__icon {
  --fs-profile-icon: none;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 20px;
  height: 20px;
  color: var(--fs-color-primary);
}

.fs-profile-popover__icon::after {
  width: 100%;
  height: 100%;
  background: currentColor;
  content: "";
  mask: var(--fs-profile-icon) center / contain no-repeat;
  -webkit-mask: var(--fs-profile-icon) center / contain no-repeat;
}

.fs-profile-popover__icon--settings {
  --fs-profile-icon: url("icons/navigation/gear.svg");
}

.fs-profile-popover__icon--switch {
  --fs-profile-icon: url("icons/switch-user.svg");
}

.fs-profile-popover__icon--install {
  --fs-profile-icon: url("icons/download.svg");
}

.fs-profile-popover__item[data-install-app][hidden] {
  display: none;
}

.fs-profile-popover__icon--logout {
  --fs-profile-icon: url("icons/logout.svg");
}

.fs-profile-popover__divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--fs-color-border-subtle);
}

.fs-profile-popover__form {
  width: 100%;
}

.fs-mobile-bottombar {
  display: none;
}

.fs-mobile-action--active {
  background: var(--fs-color-primary-subtle);
  border-color: color-mix(in srgb, var(--fs-color-primary) 30%, var(--fs-color-border));
}

.fs-content {
  display: flex;
  align-items: flex-start;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 4px 6px 6px;
  overflow-y: auto;
  border-radius: var(--fs-radius-lg);
  background: var(--fs-color-content-canvas);
  /* The shadows the header and the side navigation cast onto the page belong
     here rather than on an overlay above the column. An inset shadow is clipped
     by this element's own border-radius, so it curves around the rounded
     corners instead of cutting a straight edge across them, and neither edge
     can bleed back onto the bar that casts it. */
  box-shadow:
    inset 0 9px 12px -9px rgb(31 53 71 / 40%),
    inset 9px 0 12px -9px rgb(31 53 71 / 40%);
  scrollbar-color: var(--fs-color-scrollbar)
    color-mix(in srgb, var(--fs-color-border-subtle) 72%, transparent);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.fs-content::-webkit-scrollbar {
  width: 10px;
  height: 9px;
}

.fs-content::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--fs-color-border-subtle) 72%, transparent);
  border-radius: 999px;
}

.fs-content::-webkit-scrollbar-thumb {
  background: var(--fs-color-scrollbar);
  border: 2px solid var(--fs-color-content-canvas);
  border-radius: 999px;
}

@media (hover: hover) {
  .fs-content::-webkit-scrollbar-thumb:hover {
    background: var(--fs-color-scrollbar-hover);
  }
}


@media (max-width: 1199px) {
  /*
   * No artwork on mobile. The workspace background is a desktop preference:
   * there the shell floats on it and it reads as identity. On a phone the shell
   * is the whole screen, so any tile behind edge-to-edge panels is noise behind
   * data. The page takes the flat surface the desktop navigation stands on, and
   * the white panels read against it exactly as they do beside the sidebar.
   */
  body,
  .fs-shell::before {
    background-color: var(--fs-color-canvas);
    background-image: none;
  }

  .fs-shell {
    display: block;
    width: 100%;
    min-height: 100dvh;
    height: auto;
    margin: 0;
    /* Clears the floating bottom bar: its height plus the gap it keeps from the edge. */
    padding: 0 0 calc(88px + env(safe-area-inset-bottom));
  }

  .fs-shell-frame {
    display: block;
    height: auto;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .fs-sidebar,
  .fs-topbar {
    display: none;
  }

  .fs-main {
    height: auto;
    min-height: 0;
    background: transparent;
  }

  /* No bar above the page any more, so nothing casts onto it either. */
  .fs-content {
    min-height: 0;
    padding: 5px;
    overflow-y: visible;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  /*
   * Nothing on a feature page is pinned on a phone: a sticky heading takes a
   * band of the screen for the whole visit rather than for the moment it is
   * read, and on a short screen that band is most of the first record.
   */
  .fs-page-heading-card,
  .fs-page-header {
    position: static;
    top: auto;
  }

  /*
   * Equal segments, not buttons on a strip. The action group dissolves into the
   * bar (`display: contents`) so all six targets are laid out by one rule, each
   * takes the same share of the width, and the whole share is tappable — the
   * hairline between segments is what says where one ends and the next begins.
   */
  /*
   * A panel laid over the page, not the page running out of room at the bottom
   * edge: the bar floats clear of all three screen edges and the content scrolls
   * under it. Tablet keeps it a row instead of segments a hand-span apart.
   */
  .fs-mobile-bottombar {
    position: fixed;
    z-index: 60;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    left: 10px;
    /* Grid, not flex: equal columns regardless of how long each label is, and
       the count follows whichever actions this deployment enables. */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: stretch;
    width: auto;
    max-width: 560px;
    min-height: 68px;
    margin: 0 auto;
    /* Not clipped: the profile popover opens upward out of the bar. The rounded
       corners come from border-radius, which never needed overflow to work. */
    overflow: visible;
    background: rgb(255 255 255 / 97%);
    border: 1px solid color-mix(in srgb, var(--fs-color-primary) 14%, transparent);
    border-radius: 24px;
    box-shadow:
      0 4px 16px rgb(20 24 31 / 12%),
      0 14px 32px rgb(20 24 31 / 16%);
    backdrop-filter: blur(14px);
  }

  .fs-mobile-actions {
    display: contents;
  }

  /* Mobile prioritises the working queue before passive notifications. The shared
     action fragment keeps its desktop order; only its grid positions change here. */
  .fs-mobile-bottombar .fs-mobile-profile {
    order: 1;
  }

  .fs-mobile-bottombar .fs-mobile-actions > .fs-shell-action {
    order: 3;
  }

  .fs-mobile-bottombar .fs-shell-action--tasks {
    order: 2;
  }

  .fs-mobile-bottombar .fs-shell-action--notifications {
    order: 4;
  }

  .fs-mobile-bottombar .fs-mobile-action--menu {
    order: 5;
  }

  /* Every compact segment remains one large target filling its whole share. */
  /*
   * A fixed icon row rather than a content-sized one. Each segment sizes its own
   * grid, so a taller mark in one of them would sit its name a few pixels below
   * every other name — the row of labels has to read as one line.
   */
  .fs-mobile-bottombar .fs-shell-action,
  .fs-mobile-bottombar .fs-mobile-action,
  .fs-mobile-bottombar .fs-mobile-profile {
    position: relative;
    display: grid;
    grid-template-rows: 30px auto;
    align-content: center;
    align-items: center;
    justify-items: center;
    gap: 3px;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 6px 2px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
  }

  .fs-mobile-bottombar .fs-shell-action img,
  .fs-mobile-bottombar .fs-mobile-action img {
    width: 28px;
    height: 28px;
  }

  .fs-mobile-bottombar .fs-shell-action__label,
  .fs-mobile-bottombar .fs-mobile-tab-label {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--fs-color-text-secondary);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .fs-mobile-bottombar .fs-shell-notification-count {
    top: 10px;
    right: auto;
    left: calc(50% + 7px);
  }

  .fs-mobile-bottombar .fs-shell-action:active,
  .fs-mobile-bottombar .fs-mobile-action:active,
  .fs-mobile-bottombar .fs-mobile-profile:active {
    background: var(--fs-color-surface-hover);
    border-radius: 18px;
  }

  /*
   * The current segment takes the primary name. The rule that used to run along
   * the top edge belonged to a bar welded to the screen edge; on a floating panel
   * it cut across the rounded corner. `aria-current` carries the same fact for
   * anyone the colour does not reach.
   */
  .fs-mobile-bottombar .fs-shell-action--active .fs-shell-action__label,
  .fs-mobile-bottombar .fs-mobile-action--active .fs-mobile-tab-label {
    color: var(--fs-color-primary-text);
  }

  .fs-mobile-bottombar::before {
    content: none;
  }

  .fs-mobile-profile {
    cursor: pointer;
  }

  .fs-mobile-profile-menu {
    position: relative;
    display: block;
    min-width: 0;
  }

  .fs-mobile-profile-menu > .fs-mobile-profile {
    height: 100%;
  }

  .fs-mobile-profile-menu > .fs-profile-popover {
    top: auto;
    right: auto;
    bottom: calc(100% + 8px);
    left: 4px;
    width: min(260px, calc(100vw - 24px));
    transform-origin: bottom left;
  }

  /* A shared-size symbol slot aligns the full-bleed photo with SVG artwork,
     whose paths carry their own whitespace inside the viewBox. */
  .fs-mobile-profile-symbol {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
  }

  /*
   * A circle needs more diameter than a square icon to carry the same weight on
   * the row, so the avatar runs two steps past the 28px glyphs beside it. The
   * hairline ring is what makes a letter read as a portrait slot; the name under
   * it stays the same colour as every other segment, because being the profile
   * is not a state.
   */
  .fs-mobile-avatar {
    width: 30px;
    height: 30px;
    color: var(--fs-color-primary-text);
    background: var(--fs-color-surface-subtle);
    border: 1px solid var(--fs-color-primary-line);
    font-size: 14px;
    font-weight: 600;
  }

  .fs-mobile-avatar--image {
    border: 1px solid var(--fs-color-primary-line);
  }

  .fs-mobile-profile .fs-mobile-tab-label {
    color: var(--fs-color-text-secondary);
    font-weight: 600;
  }

  /*
   * The menu segment is a segment like every other one: its own icon and its own
   * name. The filled mark it used to carry made one target of six look like the
   * bar's single button, which is not what the bar is.
   */
  .fs-mobile-bottombar .fs-mobile-action--menu img {
    width: 28px;
    height: 28px;
  }

  /*
   * The bottom bar floats over the page — 68px of panel plus its 10px inset —
   * so every page keeps that clearance under its last block. Without it the
   * last row of a list, and the action inside it, sit under the panel.
   */
  .fs-page {
    gap: 8px;
    padding-bottom: calc(78px + env(safe-area-inset-bottom));
  }

  .fs-page-heading-card,
  .fs-card {
    border-radius: var(--fs-radius-md);
  }
}