/* 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-slate);
  --fs-workspace-background-image:
    var(--fs-workspace-slate-light),
    url("backgrounds/slate-tiles.svg");
}

.fs-shell[data-workspace-background="dunes"] {
  --fs-workspace-background-color: #0d1527;
  --fs-workspace-background-image: url("backgrounds/background-dunes-night-3.webp");
}

.fs-shell[data-workspace-background="mountains"] {
  --fs-workspace-background-color: #0d2430;
  --fs-workspace-background-image: url("backgrounds/background-mountains-night.webp");
}

.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;
}

/* Плитка завжди тайлиться: режими tile/fit/fill належать власному фону, а розтягнута плитка — вже не підлога. */
.fs-shell[data-workspace-background="clouds"] {
  --fs-workspace-background-position: top left;
  --fs-workspace-background-repeat: repeat;
  --fs-workspace-background-size: auto;
}

@media (prefers-reduced-motion: reduce) {
  #preloader::before {
    animation-duration: 2.4s;
  }
}

.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;
}

/*
 * A one-pixel grey line follows the letters and figures of the mark — the same
 * grey as the edge of the buttons beside it — so the logo reads as drawn on the
 * rail rather than floating on it. A plate or capsule would frame the image
 * file; this frames only the drawing. Four zero-blur shadows, one per side,
 * trace the outline. A one-pixel line is thinner than a button edge reads, so
 * the grey is a step darker than the border token itself.
 */
.fs-navigation-brand img {
  --fs-brand-outline: color-mix(in srgb, var(--fs-color-border) 70%, var(--fs-color-text-muted));
  display: block;
  width: min(224px, 100%);
  height: 42px;
  object-fit: contain;
  filter:
    drop-shadow(1px 0 0 var(--fs-brand-outline))
    drop-shadow(-1px 0 0 var(--fs-brand-outline))
    drop-shadow(0 1px 0 var(--fs-brand-outline))
    drop-shadow(0 -1px 0 var(--fs-brand-outline));
}

.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.02em;
  text-align: center;
}

/*
 * 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: var(--fs-radius-pill);
  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;
}

/*
 * A section is named in sentence case, like everything it contains. Six
 * uppercase titles in a column read as six headings shouting over the page the
 * reader came for; the icon and the weight already say that this is a section.
 */
.fs-navigation-group-title {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 8px;
  color: var(--fs-color-text);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
}

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

/* A quiet chevron: it says the row opens, it is not what the row is about. */
.fs-navigation-group-title::after {
  width: 5px;
  height: 5px;
  color: var(--fs-color-text-muted);
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px 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);
}

/* The items hang from a guide line under their section icon: indent alone read as a second, looser list. */
.fs-navigation-list {
  display: grid;
  gap: 2px;
  margin: 0 0 4px 22px;
  padding: 0 0 0 10px;
  border-left: 1px solid var(--fs-color-border);
}

.fs-navigation-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  margin: 0;
  padding: 5px 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;
}

/*
 * The current page is a deeper tone of the rail itself, as in the Finder sidebar, with its name in the main
 * text colour (рішення 2026-10-17). A white key stood out of the warm rail like a button and pulled the eye
 * away from the page; a recess in the same material says "here" without competing with the content. Hover is
 * the same recess, half as deep.
 */
@media (hover: hover) {
  .fs-navigation-item:hover {
    color: var(--fs-color-text);
    background: color-mix(in srgb, var(--fs-color-canvas) 95%, var(--fs-color-text));
  }
}

.fs-navigation-item--active,
.fs-navigation-item--active:hover {
  color: var(--fs-color-text);
  background: color-mix(in srgb, var(--fs-color-canvas) 90%, var(--fs-color-text));
  border-color: transparent;
  box-shadow: none;
  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-topbar-quick-access {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    margin: 0 10px 0 auto;
    overflow: hidden;
}

.fs-topbar-quick-access a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 36px;
  padding: 6px 10px;
  color: var(--fs-color-text);
    background: var(--fs-color-surface-subtle);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
  box-shadow: var(--fs-shadow-button);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.fs-topbar-quick-access a:hover {
  background: var(--fs-color-surface-hover);
  border-color: var(--fs-color-border);
  box-shadow: var(--fs-shadow-button-hover);
}

.fs-topbar-quick-access a:focus-visible {
  outline: none;
  box-shadow: var(--fs-focus-ring), var(--fs-shadow-button);
}

.fs-topbar-quick-access img {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
}

.fs-topbar-quick-access span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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;
}

/*
 * One badge, whoever counts. The bell fills its own count from the
 * notifications feature and business actions from their badge endpoints, but a
 * count sitting on a shell icon looks the same either way — and used to drift
 * apart because each feature styled its own.
 */
/*
 * Лічильник — число, а не тривога.
 *
 * Диск лишається, але він синій, а не червоний: червоне в продукті означає
 * підтверджено погане — борг, прострочений ремонт, — а тут стоїть звичайна
 * кількість непрочитаного, яка є завжди. Дві червоні плями на панелі при
 * кожному відкритті знецінювали червоне саме там, де воно потрібне.
 *
 * Заливка кольором дії, а цифра білим: на суцільному диску число читається з
 * будь-якої відстані й не змішується з лініями піктограми під ним, тому власне
 * обведення йому вже не потрібне. Радіус — pill, тому форма йде за вмістом
 * сама: один-два знаки дають коло, три й більше — овал.
 */
.fs-shell-action-count,
.fs-shell-notification-count {
  position: absolute;
  top: -7px;
  right: -11px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  color: #fff;
  background: var(--fs-color-primary);
  border-radius: var(--fs-radius-pill);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.fs-shell-action-count[hidden],
.fs-shell-notification-count[hidden] {
  display: none;
}

/* 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: 0;
}

.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: var(--fs-radius-pill);
  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);
}

/* A header glyph: drawn at 1.9 like the other header signs, since it reads without a word beside it. */
.fs-user-settings img {
  width: 20px;
  height: 20px;
  transition: transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Under the pointer the gear turns a little, as a gear would; open, it rests turned by a quarter. */
@media (hover: hover) {
  .fs-user-info:hover .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-user-info:hover .fs-user-settings img {
    transform: rotate(60deg);
  }
}

.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);
}

@media (prefers-reduced-motion: reduce) {
  .fs-user-settings img {
    transition: none;
  }
}

.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: var(--fs-radius-pill);
}

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

@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. On top it clears the
       status bar of a phone that lays the page under it (iPhone); elsewhere the inset is zero. */
    padding: env(safe-area-inset-top) 0 calc(88px + env(safe-area-inset-bottom));
  }

  /*
   * The band under the status bar. Content scrolls beneath it, so it is dimmed — dark enough for the white clock
   * and battery an iPhone draws there, light enough to show that the page goes on under it. Where the system
   * keeps its own opaque bar (Android), the inset is zero and the band has no height.
   */
  .fs-shell::after {
    position: fixed;
    z-index: 70;
    top: 0;
    right: 0;
    left: 0;
    height: env(safe-area-inset-top);
    background: linear-gradient(to bottom, rgb(20 24 31 / 58%), rgb(20 24 31 / 34%));
    backdrop-filter: blur(8px);
    content: "";
    pointer-events: none;
  }

  .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;
  }

  /*
   * Шапка `fs-page-heading-card` тут навмисно не згадана: на телефоні вона
   * лишається закріпленою і стає такою самою плаваючою скляною панеллю, як
   * нижня — геометрія в `stoneware-page.css`. Смуга, яку вона забирає, коштує
   * менше, ніж назва сторінки, по яку доводиться вертатися вгору.
   *
   * `fs-page-header` — легша обгортка клієнтських сторінок, у якої власної
   * поверхні немає: закріпити її означало б лишити заголовок просто на тексті,
   * що під нього заїжджає, тому вона їде разом зі сторінкою.
   */
  .fs-page-header {
    position: static;
    top: auto;
  }

  /*
   * Equal segments, not buttons on a strip. The action group dissolves into the
   * bar (`display: contents`) so every enabled target is laid out by one rule,
   * takes the same share of the width, and is tappable across that whole share.
   */
  /*
   * 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;
    /*
     * Скло, а не плита. Майже суцільна біла заливка нічим не відрізнялася від
     * вирізаного низу екрана; тут сторінка під панеллю лишається видимою й
     * читається рухом. Заливка тримає лише світлість — усе інше робить
     * розмиття під нею, тому воно сильне, а сама вона слабка.
     *
     * Заливка бере тон canvas, а не білий. Біле скло над білою панеллю не
     * видно взагалі: під панеллю майже завжди лежить біла картка, і білий шар
     * на ній нічим від неї не відрізняється — скло перестає читатися як скло.
     * Тон полотна — те, чим сторінка є поза панелями, тому пластина в цьому
     * тоні лишається помітною над білим і зникає над самим полотном, як і має
     * зникати.
     *
     * Заливка й розмиття тримаються слабкими навмисно. Сильні глушили те, що
     * за склом: вміст під панеллю доводиться саме бачити, інакше прозорість
     * існує лише в коді. Над білою карткою скло однаково читається білим — там
     * за ним просто нічого немає, і жодне число цього не змінить; видно його
     * там, де під панель заїжджає рядок, тон стану чи кадр.
     *
     * `brightness` існує заради контрасту, а не вигляду, і він малий: коли під
     * панель заїжджає темний кадр, скло трохи підіймає світлість того, що за ним.
     * Велике підняття робило зворотне — гнало все під склом у білий і гасило
     * саме скло.
     *
     * Біла волосина зверху — край скла. Без неї панель на світлій сторінці
     * втрачала межу разом із заливкою і читалася як пляма розмиття.
     */
    background: color-mix(in srgb, var(--fs-color-canvas) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--fs-color-primary) 12%, rgb(255 255 255 / 45%));
    border-radius: 24px;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 62%),
      0 4px 16px rgb(20 24 31 / 10%),
      0 14px 32px rgb(20 24 31 / 16%);
    backdrop-filter: blur(14px) saturate(190%) brightness(1.05);
  }

  /*
   * Без розмиття скла немає: там, де `backdrop-filter` не працює, слабка
   * заливка лишила б підписи просто на сторінці. Панель повертається до
   * непрозорої поверхні, а не тримає прозорість, якої нічим не компенсувати.
   */
  @supports not (backdrop-filter: blur(1px)) {
    .fs-mobile-bottombar {
      background: rgb(255 255 255 / 96%);
    }
  }

  .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 named segment remains one large target filling its whole share. */
  .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: 32px auto;
    gap: 3px;
    align-content: center;
    align-items: center;
    justify-items: center;
    width: auto;
    height: auto;
    min-width: 0;
    padding: 5px 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: 32px;
    height: 32px;
  }

  .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: 10px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /*
   * A bottom-bar segment is a wide tab, not the 40px button of the top bar, so
   * the corner the badge normally hangs from is nowhere near the icon. Pin it to
   * the centred mark instead — the same geometry for every counted action.
   */
  /* Цифра стоїть при верхньому правому куті знака, а не на ньому: без диска
     вона лягала б просто на лінії піктограми. */
  /* Кільце не торкається ліній піктограми: між ними лишається просвіт, інакше
     контур числа читається як частина самого знака. */
  .fs-mobile-bottombar .fs-shell-action-count,
  .fs-mobile-bottombar .fs-shell-notification-count {
    top: 4px;
    right: auto;
    left: calc(50% + 9px);
  }

  .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 active destination keeps a quiet grey surface plus `aria-current` (сіра з 2026-10-20): a blue segment read
   * as the bar's one pressed button, the same grey as a press says «you are here» without shouting.
   */
  .fs-mobile-bottombar .fs-shell-action--active,
  .fs-mobile-bottombar .fs-mobile-action--active {
    background: var(--fs-color-surface-hover);
    border-radius: 18px;
  }

  .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-text);
  }

  /* Workspace is the menu surface itself, not a business destination. Keeping
     its active fill made the last segment read as the bar's single blue button. */
  .fs-mobile-bottombar .fs-mobile-action--menu.fs-mobile-action--active {
    background: transparent;
    border-radius: 0;
  }

  .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.
   */
  .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);
  }

  /*
   * The menu segment is a segment like every other one. The filled mark it used
   * to carry made one target 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(var(--fs-mobile-bottombar-height) + env(safe-area-inset-bottom));
  }

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