/* Fonts are linked from the Stoneware head fragment, not imported here. */
:root {
  /*
   * Neutrals share one warm hue. Mixing a warm text with a cool canvas and a
   * green-grey border is what made the interface read as slightly "off".
   * Accents sit on one perceptual band: every solid lands within 8.2-8.8
   * contrast on white, so no semantic colour shouts louder than its neighbour.
   */
  --fs-palette-01: #10558f;
  --fs-palette-08: #8a613f;
  --fs-palette-09: #a4483a;
  --fs-palette-14: #6b655e;
  --fs-palette-17: #c9d2da;
  --fs-palette-19: #bcd4c2;
  --fs-palette-22: #e2c581;
  --fs-palette-23: #ddc7a3;
  --fs-palette-24: #edc2bd;
  --fs-palette-31: #003b70;
  --fs-palette-44: #211c16;
  --fs-color-canvas: #ebe9e6;
  --fs-color-content-canvas: var(--fs-color-canvas);
  --fs-color-header-surface: color-mix(in srgb, var(--fs-color-canvas) 96%, #fff);
  --fs-color-shell-junction: var(--fs-color-content-canvas);
  --fs-color-surface: #ffffff;
  --fs-color-surface-subtle: #f9f5f1;
  --fs-color-surface-hover: #f2efeb;
  /*
   * Selection is one colour for the whole product: the tone the navigation uses
   * for the page you are on. An opened record, a selected row and the active
   * navigation item are the same state, and three different tints for it read as
   * three different meanings. The neutral surfaces above stay warm; anything
   * that says "this one" is blue.
   */
  --fs-color-selected: color-mix(in srgb, var(--fs-color-primary) 22%, var(--fs-color-surface));
  --fs-color-selected-line: color-mix(in srgb, var(--fs-color-primary) 30%, var(--fs-color-border));
  --fs-color-selected-text: color-mix(in srgb, var(--fs-color-primary) 72%, black);
  /* The quiet member of the same family: banded rows and the body of an opened
     record, where a full selection tint would shout over the numbers. */
  --fs-color-selected-subtle: color-mix(in srgb, var(--fs-color-primary) 7%, var(--fs-color-surface));
  --fs-color-field: #fcfaf7;
  --fs-color-table-header: #f2efeb;
  /* Panel purpose comes from structure and labels; shared work surfaces stay neutral. */
  --fs-color-panel-query: var(--fs-color-surface);
  --fs-color-panel-search: var(--fs-color-surface);
  --fs-color-panel-filter: var(--fs-color-surface);
  --fs-color-panel-summary: var(--fs-color-surface);
  --fs-color-panel-content: var(--fs-color-surface);
  --fs-color-text: var(--fs-palette-44);
  --fs-color-text-secondary: var(--fs-palette-14);
  --fs-color-text-muted: #8a8580;
  --fs-color-border: #d6d2cd;
  --fs-color-border-subtle: #e5e2df;
  --fs-color-scrollbar: #516f8c;
  --fs-color-scrollbar-hover: #2b5074;
  /*
   * Accents: chroma 0.115, lightness spread by role. The previous band put all
   * four solids at the same 42% lightness with chroma 0.075, so they separated
   * only by hue and read as one dark mass — muted rather than restrained. The
   * action colour still sits lowest and heaviest; the advisory ones lift away
   * from it. Every solid keeps 6.7–7.7 contrast on white, well past AA.
   */
  --fs-color-primary: #10558f;
  --fs-color-primary-hover: #003b70;
  --fs-color-primary-subtle: #e3f2ff;
  --fs-color-primary-line: #bbd6f3;
  --fs-color-primary-text: #004f8b;
  --fs-color-rust: #8a613f;
  --fs-color-tan: #f4ece0;
  --fs-color-success: #1d6930;
  --fs-color-success-subtle: #e4f6e6;
  --fs-color-success-line: #bddcc1;
  --fs-color-success-text: #0d6428;
  --fs-color-danger: #903d36;
  --fs-color-danger-hover: #712520;
  --fs-color-danger-subtle: #ffeae6;
  --fs-color-danger-line: #f2c7c1;
  --fs-color-danger-text: #8c342e;
  /* Announcement accent. The one warm signal colour: it marks the news badge on
     the mobile cover and carries no status meaning anywhere else. */
  --fs-color-news-accent: #f5a623;
  --fs-color-warning: #825200;
  --fs-color-warning-subtle: #fceedc;
  --fs-color-warning-line: #e6cfaf;
  --fs-color-warning-text: #7e4b00;
  /* One step per element class: controls, cards, application shell. */
  --fs-radius-sm: 8px;
  --fs-radius-md: 8px;
  --fs-radius-lg: 12px;
  --fs-radius-xl: 12px;
  /* Six type steps. Anything smaller than xs stops being readable. */
  --fs-text-xs: 11px;
  --fs-text-sm: 13px;
  --fs-text-md: 14px;
  --fs-text-lg: 16px;
  --fs-text-xl: 20px;
  --fs-text-2xl: 25px;
  /* Three levels only: resting surface, raised surface, application shell. */
  --fs-shadow-sm: 0 1px 2px rgb(40 34 26 / 5%);
  --fs-shadow-md:
    0 1px 2px rgb(40 34 26 / 5%),
    0 8px 20px rgb(40 34 26 / 7%);
  --fs-shadow-button: 0 1px 2px rgb(40 34 26 / 8%);
  --fs-shadow-button-hover: 0 2px 6px rgb(40 34 26 / 12%);
  --fs-focus-ring: 0 0 0 3px rgb(43 80 116 / 26%);
  --fs-space-1: 4px;
  --fs-space-2: 8px;
  --fs-space-3: 12px;
  --fs-space-4: 16px;
  --fs-space-5: 20px;
  --fs-space-6: 24px;
  --fs-space-8: 32px;
  /*
   * One inner padding for every panel on every page. A feature that wants a
   * tighter page changes this token, not its own copy of the number — otherwise
   * pages drift apart and "make the panels tighter" becomes a per-page edit.
   */
  --fs-card-padding: 13px;
  /*
   * The distance between canonical blocks of a page — heading, query, summary,
   * filters, metadata, content. Every page-level grid reads this token instead
   * of its own number, otherwise a page built from a fragment keeps the old
   * rhythm and the shell and the fragment drift apart.
   */
  --fs-page-gap: 4px;
  --fs-control-height: 40px;
  --fs-sidebar-width: 260px;
  --fs-topbar-height: 54px;
  --fs-shell-gap: 12px;
  --fs-shell-max-width: 1500px;
  --fs-mobile-bottombar-height: 92px;
  --rw-palette-01: var(--fs-palette-01);
  --rw-palette-02: #597b85;
  --rw-palette-03: #4f7d7b;
  --rw-palette-04: var(--fs-color-success);
  --rw-palette-05: #607d4f;
  --rw-palette-06: #7c7565;
  --rw-palette-07: #89723e;
  --rw-palette-08: var(--fs-palette-08);
  --rw-palette-09: var(--fs-palette-09);
  --rw-palette-10: #a36373;
  --rw-palette-11: #c14f4f;
  --rw-palette-12: #856a93;
  --rw-palette-13: #6a7392;
  --rw-palette-14: var(--fs-palette-14);
  --rw-palette-15: #697778;
  --rw-palette-16: #b5d5e0;
  --rw-palette-17: var(--fs-palette-17);
  --rw-palette-18: #bdd5d9;
  --rw-palette-19: var(--fs-palette-19);
  --rw-palette-20: #bddaae;
  --rw-palette-21: #d7d0b3;
  --rw-palette-22: var(--fs-palette-22);
  --rw-palette-23: var(--fs-palette-23);
  --rw-palette-24: var(--fs-palette-24);
  --rw-palette-25: #eac6d0;
  --rw-palette-26: #fdc1c1;
  --rw-palette-27: #dcc9e5;
  --rw-palette-28: #c6cfec;
  --rw-palette-29: #c8d0dd;
  --rw-palette-30: #c2d4d4;
  --rw-palette-31: var(--fs-palette-31);
  --rw-palette-32: #2b4752;
  --rw-palette-33: #2a494c;
  --rw-palette-34: #2d4a36;
  --rw-palette-35: #35482c;
  --rw-palette-36: #474338;
  --rw-palette-37: #4f4124;
  --rw-palette-38: #63371e;
  --rw-palette-39: #742a21;
  --rw-palette-40: #60373f;
  --rw-palette-41: #6e2e2e;
  --rw-palette-42: #4d3d57;
  --rw-palette-43: #3c425c;
  --rw-palette-44: var(--fs-palette-44);
  --rw-palette-45: #3c4544;
  --rw-color-canvas: var(--fs-color-canvas);
  --rw-color-primary: var(--fs-color-primary);
  --rw-color-primary-hover: var(--fs-color-primary-hover);
  --rw-color-primary-subtle: var(--fs-color-primary-subtle);
  --rw-color-info: var(--rw-palette-03);
  --rw-color-info-subtle: color-mix(in srgb, var(--rw-palette-18) 46%, white);
  --rw-color-success: var(--fs-color-success);
  --rw-color-success-subtle: var(--fs-color-success-subtle);
  --rw-color-danger: var(--fs-color-danger);
  --rw-color-danger-subtle: var(--fs-color-danger-subtle);
  --rw-color-warning: var(--fs-color-warning);
  --rw-color-warning-subtle: var(--fs-color-warning-subtle);
  --rw-color-surface: var(--fs-color-surface);
  --rw-color-surface-subtle: var(--fs-color-surface-subtle);
  --rw-color-surface-hover: var(--fs-color-surface-hover);
  --rw-color-text: var(--fs-color-text);
  --rw-color-text-secondary: var(--fs-color-text-secondary);
  --rw-color-border: var(--fs-color-border);
  --rw-color-border-subtle: var(--fs-color-border-subtle);
  --rw-radius-sm: var(--fs-radius-sm);
  --rw-radius-md: var(--fs-radius-md);
  --rw-radius-lg: var(--fs-radius-lg);
  --rw-radius-xl: var(--fs-radius-xl);
  --rw-shadow-sm: var(--fs-shadow-sm);
  --rw-shadow-md: var(--fs-shadow-md);
  --rw-focus-ring: var(--fs-focus-ring);
  --rw-space-1: var(--fs-space-1);
  --rw-space-2: var(--fs-space-2);
  --rw-space-3: var(--fs-space-3);
  --rw-space-4: var(--fs-space-4);
  --rw-space-5: var(--fs-space-5);
  --rw-space-6: var(--fs-space-6);
  --rw-space-8: var(--fs-space-8);
  --rw-control-height-sm: 34px;
  --rw-control-height: var(--fs-control-height);
  --rw-shell-sidebar-width: var(--fs-sidebar-width);
  --rw-shell-topbar-height: var(--fs-topbar-height);
  --rw-shell-gap: var(--fs-shell-gap);
  --rw-shell-max-width: var(--fs-shell-max-width);
  --brand-blue: var(--fs-color-primary);
  --brand-blue-dark: var(--fs-color-primary-hover);
  --brand-dark: var(--fs-color-text);
  --brand-muted: var(--fs-color-text-secondary);
  --border: var(--fs-color-border);
  --danger: var(--fs-color-danger);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  min-height: 100%;
}

@media (min-width: 1200px) {
  html,
  body {
    height: 100%;
    overflow: hidden;
  }
}

html {
  color: var(--fs-color-text);
  background: var(--fs-color-canvas);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--fs-color-text);
  background-color: var(--fs-color-canvas);
  background-image: url("backgrounds/shapes-background.png");
  background-attachment: fixed;
  background-repeat: repeat;
  background-position: top left;
  font: 14px/1.45 "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Legacy client CSS still requests 800/900 in places. Public Sans is loaded
     only through 700, so do not manufacture a heavier, blotchy face. */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  vertical-align: top;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

::selection {
  color: var(--fs-color-surface);
  background: var(--fs-color-primary);
}

.fs-card {
  min-width: 0;
  min-height: 0;
  padding: var(--fs-card-padding);
  color: var(--fs-color-text);
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-lg);
  box-shadow:
    0 1px 3px rgb(31 53 71 / 11%),
    0 7px 18px rgb(31 53 71 / 8%);
  font-weight: inherit;
  line-height: 1.4;
}

.fs-general-report__filters {
  background: var(--fs-color-panel-filter);
}

.fs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fs-space-2);
  min-height: var(--fs-control-height);
  padding: 8px 14px;
  color: var(--fs-color-primary-hover);
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border);
  border-radius: var(--fs-radius-md);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  box-shadow: var(--fs-shadow-button);
  transition: background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

@media (hover: hover) {
  .fs-btn:hover {
    background: var(--fs-color-surface-hover);
    border-color: var(--fs-palette-17);
    box-shadow: var(--fs-shadow-button-hover);
  }
}

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

.fs-btn--primary {
  color: #ffffff;
  background: var(--fs-color-primary);
  border-color: var(--fs-color-primary);
}

@media (hover: hover) {
  .fs-btn--primary:hover {
    color: #ffffff;
    background: var(--fs-color-primary-hover);
    border-color: var(--fs-color-primary-hover);
  }
}

.fs-btn--wide {
  width: 100%;
}

.fs-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

/* A field names itself the same way whether the name is a <span> or a <label>
   bound to the control: the two used to render at different size and weight. */
.fs-field > span,
.fs-field > label,
.fs-field > .label {
  color: var(--fs-color-text);
  font-size: 12px;
  font-weight: 700;
}

/*
 * A field label may name its parameter with a glyph. A report asks for five or
 * six of them at once — period, team, kind, client — and a column of identical
 * text labels has to be read word by word. The icon is neutral grey, never a
 * semantic colour: it repeats the label, it does not add a state. The label
 * text always stays, so the glyph is never the only carrier of meaning.
 */
.fs-field__label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fs-field__icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: var(--fs-color-text-secondary);
  mask-image: var(--fs-field-icon, none);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 16px 16px;
  -webkit-mask-image: var(--fs-field-icon, none);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 16px 16px;
}

.fs-field input,
.fs-field select,
.fs-field textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--fs-control-height);
  padding: 8px 11px;
  color: var(--fs-color-text);
  background: var(--fs-color-field);
  border: 1px solid var(--fs-color-border);
  border-radius: var(--fs-radius-sm);
  font: inherit;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.fs-field input:focus,
.fs-field select:focus,
.fs-field textarea:focus {
  border-color: var(--fs-color-primary);
  box-shadow: var(--fs-focus-ring);
}

/*
 * A required field carries an even ring, never a heavy bottom edge: a thick
 * coloured underline reads as an error state and tips the control off balance.
 */
.fs-field input:required:not(:disabled),
.fs-field select:required:not(:disabled),
.fs-field textarea:required:not(:disabled) {
  border-color: var(--fs-color-warning-line);
  box-shadow: inset 0 0 0 1px var(--fs-color-warning-line);
}

.fs-field input:required:not(:disabled):hover,
.fs-field select:required:not(:disabled):hover,
@media (hover: hover) {
  .fs-field textarea:required:not(:disabled):hover {
    border-color: var(--fs-color-warning);
  }
}

/* Outranks the ring above, which would otherwise swallow the focus indicator. */
.fs-field input:required:not(:disabled):focus,
.fs-field select:required:not(:disabled):focus,
.fs-field textarea:required:not(:disabled):focus {
  border-color: var(--fs-color-primary);
  box-shadow: var(--fs-focus-ring);
}

.fs-field textarea {
  min-height: 88px;
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: var(--fs-color-primary);
}

body.app-loading .fs-shell,
body.app-loading .fs-auth-shell,
body.app-navigating .fs-shell,
body.app-navigating .fs-auth-shell {
  pointer-events: none;
}

#preloader {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--fs-space-4);
  background: color-mix(in srgb, var(--fs-color-canvas) 34%, transparent);
  backdrop-filter: blur(8px) saturate(0.88);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, backdrop-filter 0.2s ease, visibility 0s linear;
}

#preloader.is-ready {
  pointer-events: none;
  opacity: 0;
  backdrop-filter: blur(0) saturate(1);
  visibility: hidden;
  transition-delay: 0s, 0s, 0.2s;
}

.page-loader__panel {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  animation: fs-loader-in 0.2s ease-out both;
}

.page-loader__spinner {
  width: 34px;
  height: 34px;
  border: 2px solid color-mix(in srgb, var(--fs-color-primary) 18%, transparent);
  border-top-color: var(--fs-color-primary);
  border-right-color: color-mix(in srgb, var(--fs-color-primary) 58%, transparent);
  border-radius: 50%;
  animation: fs-loader-spin 0.72s linear infinite;
}

body.app-navigating #preloader {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@keyframes fs-loader-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes fs-loader-in {
  from {
    transform: translateY(6px) scale(0.98);
    opacity: 0;
  }

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

.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"],
.profile-background-option__preview[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"],
.profile-background-option__preview[data-workspace-background="light"] {
  --fs-workspace-background-color: var(--fs-color-surface-subtle);
  --fs-workspace-background-image:
    linear-gradient(rgb(248 247 245 / 78%), rgb(248 247 245 / 78%)),
    url("backgrounds/light-background.png");
}

.fs-shell[data-workspace-background="clouds"],
.profile-background-option__preview[data-workspace-background="clouds"] {
  --fs-workspace-background-color: #153b49;
  --fs-workspace-background-image:
    linear-gradient(rgb(8 35 44 / 12%), rgb(8 35 44 / 12%)),
    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"],
.profile-background-option__preview[data-workspace-background="clean"] {
  --fs-workspace-background-color: var(--fs-color-surface-subtle);
  --fs-workspace-background-image: none;
}

.fs-shell[data-workspace-background="custom"],
.profile-background-option__preview[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"],
.profile-background-option__preview[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"],
.profile-background-option__preview[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"],
.profile-background-option__preview[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"],
.profile-background-option__preview[data-workspace-background-layout="center"] {
  --fs-workspace-background-position: center;
  --fs-workspace-background-repeat: no-repeat;
  --fs-workspace-background-size: auto;
}

.profile-background-option__preview[data-workspace-background] {
  background-color: var(--fs-workspace-background-color);
  background-image: var(--fs-workspace-background-image);
  background-position: var(--fs-workspace-background-position, center);
  background-repeat: var(--fs-workspace-background-repeat, repeat);
  background-size: var(--fs-workspace-background-size);
}

@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-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;
  right: 14px;
  left: auto;
  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;
  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 {
  --fs-navigation-icon-tone: var(--fs-color-primary);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--fs-color-primary-subtle);
  border: 1px solid color-mix(in srgb, var(--fs-navigation-icon-tone) 38%, transparent);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 50%);
}

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

[data-navigation-section="client-purchases"] .fs-navigation-icon,
[data-navigation-section="client-purchases"] .fs-mobile-navigation-icon,
[data-navigation-section="price"] .fs-navigation-icon,
[data-navigation-section="price"] .fs-mobile-navigation-icon {
  --fs-navigation-icon-tone: var(--fs-color-warning);
  background: var(--fs-color-warning-subtle);
}

[data-navigation-section="discounts"] .fs-navigation-icon,
[data-navigation-section="discounts"] .fs-mobile-navigation-icon,
[data-navigation-section="web-resources"] .fs-navigation-icon,
[data-navigation-section="web-resources"] .fs-mobile-navigation-icon {
  --fs-navigation-icon-tone: var(--fs-color-danger);
  background: var(--fs-color-danger-subtle);
}

[data-navigation-section="notes"] .fs-navigation-icon,
[data-navigation-section="notes"] .fs-mobile-navigation-icon,
[data-navigation-section="information-base"] .fs-navigation-icon,
[data-navigation-section="information-base"] .fs-mobile-navigation-icon {
  --fs-navigation-icon-tone: var(--fs-color-primary-text);
  background: var(--fs-color-primary-line);
}

[data-navigation-section="requests"] .fs-navigation-icon,
[data-navigation-section="requests"] .fs-mobile-navigation-icon,
[data-navigation-section="nomenclature"] .fs-navigation-icon,
[data-navigation-section="nomenclature"] .fs-mobile-navigation-icon {
  --fs-navigation-icon-tone: var(--fs-color-primary);
  background: var(--fs-color-primary-subtle);
}

[data-navigation-section="client-settlements"] .fs-navigation-icon,
[data-navigation-section="client-settlements"] .fs-mobile-navigation-icon,
[data-navigation-item="accounts-reconciliation"] .fs-navigation-icon,
[data-navigation-item="accounts-reconciliation"] .fs-mobile-navigation-icon,
[data-navigation-item="accounts-reconciliation"].fs-mobile-navigation-icon {
  --fs-navigation-icon-tone: var(--fs-color-warning);
  background: var(--fs-color-warning-subtle);
}

[data-navigation-item="overdue-debts"] .fs-navigation-icon,
[data-navigation-item="overdue-debts"] .fs-mobile-navigation-icon,
[data-navigation-item="overdue-debts"].fs-mobile-navigation-icon {
  --fs-navigation-icon-tone: var(--fs-color-danger);
  background: var(--fs-color-danger-subtle);
}

[data-navigation-section="administration"] .fs-navigation-icon,
[data-navigation-section="administration"] .fs-mobile-navigation-icon,
[data-navigation-item="demo-session"] .fs-navigation-icon,
[data-navigation-item="demo-session"] .fs-mobile-navigation-icon,
[data-navigation-item="demo-session"].fs-mobile-navigation-icon {
  --fs-navigation-icon-tone: var(--fs-color-primary-text);
  background: var(--fs-color-primary-line);
}

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

.fs-profile-popover__item--danger {
  color: var(--fs-color-danger);
}

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

.fs-profile-popover__icon {
  --fs-profile-icon: none;
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--fs-color-primary);
  background: var(--fs-color-primary-subtle);
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 8px;
}

.fs-profile-popover__icon::after {
  width: 13px;
  height: 13px;
  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--profile {
  --fs-profile-icon: url("icons/users.svg");
}

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

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

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

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

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

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

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

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

.fs-page {
  display: grid;
  align-content: start;
  gap: var(--fs-page-gap);
  width: 100%;
  min-width: 0;
}

/* Work-page headings stay quiet: identity already lives in the application shell. */
.fs-page-heading-card {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* The title needs its own size, not a tall box around it: the block is as
     tall as the heading plus one hairline of air. */
  min-height: 0;
  padding: 4px 14px;
  background-color: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-lg);
  box-shadow: var(--fs-shadow-sm);
}

/* Client-owned feature pages use this lighter header wrapper around the same
   canonical heading fragment. It participates in the same pinned page layer. */
.fs-page-header {
  position: sticky;
  z-index: 20;
  top: 0;
  background: var(--fs-color-content-canvas);
}

/*
 * One family for the whole interface. The serif was tried here and read as a
 * different product bolted on: the title sat in another voice from every number
 * under it. Rank comes from size and tracking instead — 26px against 14px body,
 * tightened, which outranks the section eyebrows without changing typeface.
 */
.fs-page-heading {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--fs-color-text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.fs-page-heading img {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  object-fit: contain;
}

.fs-page-heading-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
}

/*
 * Panel label. Per the brand book: a bordered strip at the top of a card that
 * names the block and optionally carries its metadata on the right. Panels are
 * all one white surface, so this strip — not a fill — is what tells query from
 * summary from search.
 */
.fs-section-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-3);
  min-height: 40px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--fs-color-border-subtle);
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fs-section-label__title {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
}

/* Metadata beside the name is not a heading: it keeps sentence case. */
.fs-section-label__meta {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  color: var(--fs-color-text-muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* A card that opens with a label owns no padding; each part sets its own. */
.fs-panel {
  display: block;
  padding: 0;
  overflow: hidden;
}

.fs-panel__body {
  padding: var(--fs-space-4);
}

/*
 * Canonical feature-page blocks. Templates compose these through page-blocks.html;
 * feature CSS may change only the inner layout, never the panel surface or rhythm.
 */
.fs-page-block {
  min-width: 0;
}

.fs-page-block--query,
.fs-page-block--filters,
.fs-page-block--content {
  background: var(--fs-color-surface);
}

/*
 * Query and filters host controls that open over the page — user pickers, selects,
 * date popovers. `.fs-panel` clips to its own box, which cut every one of those off
 * at the bottom edge of the panel, so these two blocks stay unclipped and instead
 * outrank the blocks below them. Query sits above filters because its dropdown
 * opens downward across it; both sit above content, which is not positioned.
 */
.fs-page-block--query,
.fs-page-block--filters {
  position: relative;
  overflow: visible;
}

.fs-page-block--query {
  z-index: 6;
}

.fs-page-block--filters {
  z-index: 5;
}

/*
 * Without the panel clip the label owns the top corners of the card itself,
 * otherwise its hover fill squares them off.
 */
.fs-page-block--query > .fs-page-block__disclosure > .fs-section-label,
.fs-page-block--filters > .fs-page-block__disclosure > .fs-section-label {
  border-radius: var(--fs-radius-lg) var(--fs-radius-lg) 0 0;
}

.fs-page-block--summary {
  display: block;
}

.fs-page-block__disclosure {
  display: block;
}

.fs-page-block__disclosure > .fs-section-label {
  padding-right: 44px;
  cursor: pointer;
  list-style: none;
}

.fs-page-block__disclosure > .fs-section-label::-webkit-details-marker {
  display: none;
}

.fs-page-block__chevron {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--fs-color-text-muted);
  border-bottom: 1.5px solid var(--fs-color-text-muted);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.fs-page-block__disclosure[open] .fs-page-block__chevron {
  margin-top: -2px;
  transform: rotate(225deg);
}

.fs-page-block__disclosure:not([open]) > .fs-section-label {
  border-bottom: 0;
}

@media (hover: hover) {
  .fs-page-block__disclosure > .fs-section-label:hover {
    background: var(--fs-color-surface-hover);
  }
}

/*
 * Any panel can collapse: write it as <details class="fs-panel fs-panel--collapsible">
 * with the label as its <summary>. This is panel behaviour, not one page's feature —
 * query, summary and search all fold the same way, and the chevron is the only
 * affordance added, so a collapsed panel still reads as the same block.
 */
.fs-panel--collapsible > .fs-section-label {
  padding-right: 44px;
  cursor: pointer;
  list-style: none;
}

.fs-panel--collapsible > .fs-section-label::-webkit-details-marker {
  display: none;
}

@media (hover: hover) {
  .fs-panel--collapsible > .fs-section-label:hover {
    background: var(--fs-color-surface-hover);
  }
}

.fs-panel--collapsible > .fs-section-label::after {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--fs-color-text-muted);
  border-bottom: 1.5px solid var(--fs-color-text-muted);
  content: "";
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.fs-panel--collapsible[open] > .fs-section-label::after {
  margin-top: -2px;
  transform: rotate(225deg);
}

/* A closed panel is a single strip: the label keeps no divider under it. */
.fs-panel--collapsible:not([open]) > .fs-section-label {
  border-bottom: 0;
}

/*
 * Record list. One panel, a header row, then rows flush against each other — the
 * shape every "list of things" page needs. Only the column track differs per
 * page, so a feature sets `grid-template-columns` on the head and row and takes
 * everything else from here.
 *
 * Rows do not float apart with gaps and shadows: separated rows read as separate
 * cards and stop the eye from running down a column, which is the one thing a
 * table is for.
 */
.fs-datalist {
  display: block;
  padding: 0;
  overflow: hidden;
}

.fs-datalist__head,
.fs-datalist__row {
  display: grid;
  gap: 0;
  align-items: center;
}

.fs-datalist__head {
  min-height: 34px;
  padding: 8px 16px;
  color: var(--fs-color-text-secondary);
  background: var(--fs-color-table-header);
  border-bottom: 1px solid var(--fs-color-border);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fs-datalist__row {
  min-height: 58px;
  padding: 9px 16px;
  background: var(--fs-color-panel-content);
  border-bottom: 1px solid var(--fs-color-border-subtle);
  transition: background-color 0.14s ease;
}

.fs-datalist__row:last-child {
  border-bottom: 0;
}

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

/*
 * A header cell that carries an icon. The glyph is grey and sits before the
 * name, so a wide result can be scanned by column shape instead of by reading
 * six uppercase words. Numeric columns align their whole cell to the right —
 * `text-align` cannot do that once the cell is a flex row.
 */
.fs-datalist__col {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.fs-datalist__col--numeric {
  justify-content: flex-end;
}

.fs-datalist__col-icon {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentcolor;
  mask-image: var(--fs-col-icon, none);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 14px 14px;
  -webkit-mask-image: var(--fs-col-icon, none);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 14px 14px;
}

/*
 * Money in a result row is data, not decoration. It keeps tabular figures so a
 * column of amounts lines up digit under digit, and it takes a semantic tone
 * only where the number states a confirmed business fact: a realised sale is
 * money earned, an overdue debt is money late. A plain count never takes one —
 * colouring every number turns the palette into striping.
 */
.fs-datalist__amount {
  color: var(--fs-amount-tone, var(--fs-color-text));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fs-datalist__amount--success {
  --fs-amount-tone: var(--fs-color-success-text);
}

.fs-datalist__amount--warning {
  --fs-amount-tone: var(--fs-color-warning-text);
}

.fs-datalist__amount--danger {
  --fs-amount-tone: var(--fs-color-danger-text);
}

.fs-datalist__amount--muted {
  --fs-amount-tone: var(--fs-color-text-secondary);
}

/*
 * An expandable record: <details class="fs-datalist__group"> with the row as
 * its <summary> and the detail below it. Every list that opens a row needs the
 * same four things — a pointer, a chevron, an opened tint and a recessed body —
 * and each feature used to redraw all four, which is why one list opened blue
 * and the next one warm grey. Opened is the product's one selection state.
 */
.fs-datalist__group > summary {
  cursor: pointer;
  list-style: none;
}

.fs-datalist__group > summary::-webkit-details-marker {
  display: none;
}

.fs-datalist__group[open] > summary {
  color: var(--fs-color-selected-text);
  background: var(--fs-color-selected);
}

/* Points right when closed and down when open, like every other disclosure. */
.fs-datalist__chevron {
  width: 8px;
  height: 8px;
  justify-self: end;
  border-right: 1.5px solid currentcolor;
  border-bottom: 1.5px solid currentcolor;
  transform: rotate(45deg);
  transition: transform 0.16s ease;
}

.fs-datalist__group[open] .fs-datalist__chevron {
  transform: rotate(225deg);
}

/*
 * The opened body. It is recessed, not another card: a child list floating on
 * white reads as a second record rather than as the inside of this one.
 */
.fs-datalist__nested {
  padding: var(--fs-space-3) var(--fs-space-4);
  background: var(--fs-color-selected-subtle);
  border-bottom: 1px solid var(--fs-color-border-subtle);
}

/*
 * Nested list. Compact by design — it repeats the parent's anatomy one level
 * down and must not compete with it for weight.
 */
.fs-nested-list {
  overflow: hidden;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
}

.fs-nested-list__head,
.fs-nested-list__row {
  display: grid;
  gap: var(--fs-space-3);
  align-items: center;
  padding: var(--fs-space-2) var(--fs-space-3);
}

.fs-nested-list__head {
  color: var(--fs-color-text-secondary);
  background: var(--fs-color-table-header);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fs-nested-list__row + .fs-nested-list__row {
  border-top: 1px solid var(--fs-color-border-subtle);
}

/* Shared status marker. A feature chooses only the semantic tone; Stoneware owns the palette and shape. */
.fs-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  min-height: 24px;
  padding: 3px 9px;
  color: var(--fs-badge-text, var(--fs-color-text-secondary));
  background: var(--fs-badge-surface, var(--fs-color-surface-subtle));
  border: 1px solid var(--fs-badge-line, var(--fs-color-border-subtle));
  border-radius: 999px;
  font-size: var(--fs-text-xs);
  font-weight: 600;
  line-height: 1.2;
}

.fs-badge--compact {
  min-height: 20px;
  padding: 2px 7px;
  font-size: 10px;
}

.fs-badge[data-tone="primary"] {
  --fs-badge-text: var(--fs-color-primary-text);
  --fs-badge-surface: var(--fs-color-primary-subtle);
  --fs-badge-line: var(--fs-color-primary-line);
}

.fs-badge[data-tone="success"] {
  --fs-badge-text: var(--fs-color-success-text);
  --fs-badge-surface: var(--fs-color-success-subtle);
  --fs-badge-line: var(--fs-color-success-line);
}

.fs-badge[data-tone="warning"] {
  --fs-badge-text: var(--fs-color-warning-text);
  --fs-badge-surface: var(--fs-color-warning-subtle);
  --fs-badge-line: var(--fs-color-warning-line);
}

.fs-badge[data-tone="danger"] {
  --fs-badge-text: var(--fs-color-danger-text);
  --fs-badge-surface: var(--fs-color-danger-subtle);
  --fs-badge-line: var(--fs-color-danger-line);
}

.fs-datalist__empty {
  padding: var(--fs-space-4);
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  text-align: center;
}

/* Search/filter composition shared by every result page. */
.fs-filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--fs-space-3);
}

.fs-filters-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--fs-space-2);
  margin-top: var(--fs-space-3);
}

.fs-filters-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
  min-width: 0;
}

.fs-filters-chips[hidden] {
  display: none;
}

.fs-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 4px 9px;
  color: var(--fs-color-primary-text);
  background: var(--fs-color-primary-subtle);
  border: 1px solid var(--fs-color-primary-line);
  border-radius: 999px;
  font: inherit;
  font-size: var(--fs-text-xs);
  font-weight: 600;
}

button.fs-filter-chip {
  cursor: pointer;
}

button.fs-filter-chip::after {
  color: currentcolor;
  content: "×";
  font-size: var(--fs-text-sm);
  line-height: 1;
}

button.fs-filter-chip:focus-visible {
  outline: none;
  box-shadow: var(--fs-focus-ring);
}

.fs-result-metadata {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-3);
  min-height: 32px;
  padding: 0 var(--fs-space-2);
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
}

.fs-result-pagination {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
}

.fs-result-pagination:empty {
  display: none;
}

/*
 * Summary strip. Every page that reports counts uses this one component: the users
 * page and the tasks page each grew their own before, which is why one had icons
 * and room and the other had neither.
 *
 * A KPI is the first thing read on a page, so it gets height. The number carries
 * the strip; the icon only names the metric, so it is a quiet grey outline, the
 * same weight as the label beside it. Solid coloured tiles put four saturated
 * blocks above the data and made the markers louder than the figures they mark.
 * Where a metric really has a state, it is said in the row below — a badge, a
 * progress track, an amount tone — not in a swatch next to its name.
 */
.fs-summary {
  display: grid;
  padding: 0;
  overflow: hidden;
  background: var(--fs-color-panel-summary);
}

/* Like a section label: the block names itself on the left, its metadata — how
   fresh the figures are — sits on the right instead of trailing the name. */
.fs-summary__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fs-space-3);
  min-height: 42px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--fs-color-border-subtle);
}

.fs-summary__head > span {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Metadata is not a heading: it keeps sentence case, exactly as in a panel label. */
.fs-summary__head > .fs-summary__meta {
  color: var(--fs-color-text-muted);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.fs-summary__header-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--fs-space-2);
  min-width: 0;
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
  font-weight: 400;
}

.fs-summary__header-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--fs-space-2);
  min-width: 0;
}

.fs-summary__toggle {
  position: relative;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  color: var(--fs-color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--fs-radius-sm);
  cursor: pointer;
}

.fs-summary__toggle .fs-page-block__chevron {
  right: 10px;
}

.fs-summary__toggle[aria-expanded="true"] .fs-page-block__chevron {
  margin-top: -2px;
  transform: rotate(225deg);
}

.fs-summary__breakdown-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 10px 44px 10px 18px;
  color: var(--fs-color-text-secondary);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--fs-color-border-subtle);
  font: inherit;
  font-size: var(--fs-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
}

.fs-summary__breakdown-toggle .fs-page-block__chevron {
  right: 18px;
}

.fs-summary__breakdown-toggle[aria-expanded="true"] .fs-page-block__chevron {
  margin-top: -2px;
  transform: rotate(225deg);
}

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

.fs-summary__breakdown-toggle:focus-visible {
  outline: 0;
  box-shadow: inset var(--fs-focus-ring);
}

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

.fs-summary__header-meta > * + *::before {
  margin-right: var(--fs-space-2);
  color: var(--fs-color-border);
  content: "·";
}

.fs-summary__body {
  display: grid;
}

/*
 * Controls that scope the figures stand above them as a quiet strip, not as a
 * sunken form: a filled box here turned the block for reading into a second
 * panel for typing.
 */
.fs-summary__scope {
  padding: 10px 18px;
  border-bottom: 1px solid var(--fs-color-border-subtle);
}

/*
 * The metrics are one strip on the panel's own surface, divided by hairlines.
 * Boxed tiles made the block read as four cards stacked inside a fifth: the
 * frame around each figure weighed more than the figure, and a summary is
 * there to be read, not to be counted.
 */
.fs-summary__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--fs-space-2);
  padding: var(--fs-space-3);
}

.fs-summary__head--with-tools {
  align-items: flex-end;
}

.fs-summary__tools {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--fs-space-2);
  min-width: 0;
}

.fs-summary__item {
  display: grid;
  align-content: center;
  gap: 7px;
  min-height: 72px;
  padding: 10px 18px;
  background: var(--fs-color-surface-subtle);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
}

.fs-summary__item[data-tone] {
  --fs-summary-tone-line: var(--fs-color-primary-line);
  --fs-summary-tone-surface: var(--fs-color-primary-subtle);
  background: var(--fs-summary-tone-surface);
  border-color: var(--fs-summary-tone-line);
}

.fs-summary__item[data-tone="primary"] {
  --fs-summary-tone: var(--fs-color-primary-text);
  --fs-summary-tone-line: var(--fs-color-primary-line);
  --fs-summary-tone-surface: var(--fs-color-primary-subtle);
}

.fs-summary__item[data-tone="success"] {
  --fs-summary-tone: var(--fs-color-success-text);
  --fs-summary-tone-line: var(--fs-color-success-line);
  --fs-summary-tone-surface: var(--fs-color-success-subtle);
}

.fs-summary__item[data-tone="warning"] {
  --fs-summary-tone: var(--fs-color-warning-text);
  --fs-summary-tone-line: var(--fs-color-warning-line);
  --fs-summary-tone-surface: var(--fs-color-warning-subtle);
}

.fs-summary__item[data-tone="danger"] {
  --fs-summary-tone: var(--fs-color-danger-text);
  --fs-summary-tone-line: var(--fs-color-danger-line);
  --fs-summary-tone-surface: var(--fs-color-danger-subtle);
}

/*
 * The name of a metric has no state, so its glyph stays the grey of the label.
 * The tone belongs to the figure, and only where the figure states a confirmed
 * business fact — money earned, work overdue — exactly as an amount in a result
 * row. Four tinted plates above a table made the markers louder than the data.
 */
.fs-summary__item[data-tone] .fs-summary__icon {
  color: var(--fs-color-text-secondary);
}

.fs-summary__item[data-tone] .fs-summary__value {
  color: var(--fs-summary-tone, var(--fs-color-text));
}

/* One aggregate may lead the strip. It leads by the size of its figure, not by
   a frame around it: a border would bring the plate back for a single metric. */
.fs-summary__item--emphasis .fs-summary__value {
  font-size: 28px;
}

.fs-summary__label {
  display: flex;
  align-items: center;
  gap: var(--fs-space-2);
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/*
 * Masked, not <img>: the icon files carry their own stroke colour, so the same
 * strip would come out part black, part blue, part dark red. The metric's name
 * has one colour, and its glyph takes that colour.
 */
.fs-summary__icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentcolor;
  mask-image: var(--fs-summary-icon, none);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 16px 16px;
  -webkit-mask-image: var(--fs-summary-icon, none);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 16px 16px;
}

/* A KPI slot can also hold a name, not only a number, so it breaks rather than
   overflows the item beside it. */
.fs-summary__value {
  color: var(--fs-color-text);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

/* The unit is not part of the number: it stays quiet and does not set the size. */
.fs-summary__value small {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  font-weight: 500;
  letter-spacing: 0;
}

/*
 * The breakdown continues the strip one step quieter: same surface, same
 * rhythm, a hairline above it. A bordered box here made a second panel inside
 * the summary, and the caller may wrap its rows in a slot element, so that
 * wrapper dissolves instead of becoming a layout of its own.
 */
.fs-summary__breakdown {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--fs-color-border-subtle);
}

.fs-summary__breakdown > div:not([class]) {
  display: contents;
}

.fs-summary__breakdown[hidden] {
  display: none;
}

.fs-summary__breakdown-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--fs-space-3);
  min-height: 44px;
  padding: 10px 18px;
  flex: 1 1 210px;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
}

/*
 * Striping said "selected" in a product where a tinted row means exactly that.
 * Rows are told apart by the hairline between them, like every other list.
 */
.fs-summary__breakdown-row + .fs-summary__breakdown-row {
  border-left: 1px solid var(--fs-color-border-subtle);
}

.fs-summary__breakdown-value {
  color: var(--fs-color-text);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fs-summary__breakdown-row[data-tone="success"] .fs-summary__breakdown-value {
  color: var(--fs-color-success-text);
}

.fs-summary__breakdown-row[data-tone="warning"] .fs-summary__breakdown-value {
  color: var(--fs-color-warning-text);
}

.fs-summary__breakdown-row[data-tone="danger"] .fs-summary__breakdown-value {
  color: var(--fs-color-danger-text);
}

@media (max-width: 760px) {
  .fs-summary__head--with-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .fs-summary__tools {
    display: block;
    width: 100%;
  }

  .fs-summary__row {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    gap: var(--fs-space-2);
    padding: var(--fs-space-3);
  }

  /* Stacked, label and value share a line: the number no longer needs its own row. */
  .fs-summary__item {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--fs-space-3);
    min-height: 0;
    padding: 13px 16px;
  }

  .fs-summary__head {
    align-items: flex-start;
    flex-direction: column;
  }

  .fs-summary__header-meta {
    justify-content: flex-end;
    width: 100%;
    text-align: right;
  }

  .fs-summary__header-side {
    justify-content: flex-end;
    width: 100%;
  }

  .fs-summary__scope {
    padding: 0;
  }

  .fs-summary__breakdown-row {
    flex: 1 1 100%;
  }

  .fs-summary__breakdown-row + .fs-summary__breakdown-row {
    border-top: 1px solid var(--fs-color-border-subtle);
    border-left: 0;
  }

  .fs-summary__value {
    font-size: 22px;
  }
}

@media (max-width: 1199px) {
  .fs-shell {
    width: 100%;
    min-height: 100dvh;
    height: auto;
    margin: 0;
  }
}

.fs-scope-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 4px 10px;
  color: var(--fs-color-primary-hover);
  background: color-mix(in srgb, var(--fs-color-primary) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--fs-color-primary) 25%, var(--fs-color-border));
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.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-mobile-menu-page {
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

/*
 * The workspace puts its blocks in this container rather than straight into
 * `.fs-page`, so the page rhythm has to be read here too — otherwise the home
 * screen keeps its own spacing while every other page moves.
 */
.fs-workspace-desktop-content {
  display: grid;
  gap: var(--fs-page-gap);
}

.fs-workspace-mobile-content {
  display: none;
}

/*
 * The mobile home screen is a stack of titled blocks: the announcement, quick
 * access, then the sections. The title is what makes the screen readable —
 * without it the tiles and the list run together as one undifferentiated wall.
 */
.fs-mobile-home-block {
  display: grid;
  gap: var(--fs-space-2);
}

/* A structural label above the list, not a page title competing with it. */
.fs-mobile-home-heading {
  margin: 0;
  padding: 0 var(--fs-space-1);
  color: var(--fs-color-text-muted);
  font-size: var(--fs-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/*
 * Named tiles, the whole row at once: four destinations is the profile maximum,
 * so one row holds the entire set and the screen spends one band on it instead
 * of two. The icon identifies, the label names.
 */
.fs-quick-access {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.fs-quick-access-card {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 5px;
  min-height: 76px;
  padding: 10px 4px 8px;
  background: var(--fs-color-surface);
  border: 1px solid transparent;
  border-radius: 14px;
  box-shadow: var(--fs-shadow-md);
}

.fs-quick-access-card:active {
  background: var(--fs-color-surface-hover);
}

/*
 * The destination names itself; the section it lives in is not news on the tile.
 * Long Ukrainian labels wrap rather than truncate — the name is what the tile is
 * for, and a clipped one costs the tile its purpose.
 */
.fs-quick-access-card__text {
  min-width: 0;
  color: var(--fs-color-text);
  font-size: 9px;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  overflow-wrap: anywhere;
}

/*
 * The icons are client-owned artwork and already carry their own colour. They
 * are shown as they are on desktop navigation — no ring, no inner highlight:
 * an outline around a coloured pictogram only fences it in.
 */
.fs-mobile-navigation-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

@media (max-width: 1100px) and (min-width: 761px) {
  .fs-summary__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fs-summary__item:nth-child(odd) {
    border-left-color: var(--fs-color-border-subtle);
  }

  .fs-summary__item:nth-child(even) {
    border-left-color: var(--fs-color-border-subtle);
  }

  .fs-summary__item:nth-child(n + 3) {
    border-top-color: var(--fs-color-border-subtle);
  }
}

@media (max-width: 760px) {
  .fs-filters-grid {
    grid-template-columns: 1fr;
  }

  .fs-filters-actions,
  .fs-result-metadata {
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .fs-result-pagination {
    justify-content: space-between;
    width: 100%;
  }

  .fs-datalist--responsive .fs-datalist__head {
    display: none;
  }

  .fs-datalist--responsive .fs-datalist__row {
    min-height: 0;
    padding: var(--fs-space-3);
  }
}

/* Section artwork is already a complete client-owned pictogram. Semantic
   navigation tones must not turn its wrapper into a coloured square. */
.fs-mobile-menu-sections .fs-mobile-navigation-icon--section {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/*
 * One size step up from the desktop icon: on a phone the pictogram is read at
 * arm's length and is the fastest part of the row to recognise.
 */
.fs-mobile-navigation-icon--quick {
  width: 36px;
  height: 36px;
}

.fs-mobile-navigation-icon--section {
  width: 30px;
  height: 30px;
}

.fs-mobile-navigation-icon--item {
  width: 28px;
  height: 28px;
}

.fs-mobile-navigation-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fs-mobile-menu-sections {
  display: grid;
  gap: 0;
  overflow: hidden;
  background: var(--fs-color-surface);
  border-radius: 16px;
  box-shadow: var(--fs-shadow-md);
}

/*
 * The hairline starts where the labels start, not at the card edge: it separates
 * two rows of the same list, and running it under the icon column would cut the
 * card into strips instead.
 */
.fs-mobile-menu-group:not(:last-child)::after {
  display: block;
  height: 1px;
  margin-left: 59px;
  background: var(--fs-color-border-subtle);
  content: "";
}

/*
 * A destination row, not a label: sentence case at reading size, because the
 * uppercase tracking made every section shout and cost the row its scan value.
 */
.fs-mobile-menu-group > summary {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 15px;
  color: var(--fs-color-text);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

@media (hover: hover) {
  .fs-mobile-menu-group > summary:hover {
    background: var(--fs-color-surface-hover);
  }
}

/* Points right when closed and down when open: the same chevron as the row list. */
.fs-mobile-menu-group > summary::after {
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--fs-color-text-muted);
  border-bottom: 2px solid var(--fs-color-text-muted);
  content: "";
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
}

.fs-mobile-menu-group[open] > summary::after {
  transform: rotate(45deg) translateY(-2px);
}

.fs-mobile-menu-group[open] > summary {
  color: var(--fs-color-primary-text);
}

/*
 * Children of the section, not a separate list: a guide rule ties them to the
 * row above and a modest indent keeps them in the reading column. The old inset
 * pushed them past the middle of the screen, and the warm fill under each one
 * read as "selected" — the tone the brand book reserves for the current place.
 */
.fs-mobile-menu-links {
  display: grid;
  gap: 0;
  margin: 0 12px 10px 24px;
  padding-left: 10px;
  border-left: 2px solid var(--fs-color-primary-line);
}

.fs-mobile-menu-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 6px 10px;
  color: var(--fs-color-text);
  background: transparent;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

@media (hover: hover) {
  .fs-mobile-menu-links a:hover {
    background: var(--fs-color-surface-hover);
  }
}

.fs-report-filters {
  display: grid;
  gap: var(--fs-space-3);
}

.fs-report-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fs-icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border);
  border-radius: var(--fs-radius-lg);
}

.fs-icon-button img {
  width: 20px;
  height: 20px;
}

.fs-icon-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.fs-report-submit {
  width: 150px;
  margin-left: auto;
}

.fs-section-head h2 {
  color: var(--fs-color-text);
  font-size: var(--fs-text-lg);
  font-weight: 700;
}

.fs-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.fs-section-head__main {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
}

.fs-section-head p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-sm);
  font-weight: 500;
}

.fs-users-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  flex-wrap: wrap;
}

.fs-user-create {
  position: relative;
}

.fs-user-create > summary img {
  width: 26px;
  height: 26px;
}

.fs-user-create[open] {
  flex: 1 0 100%;
}

.fs-user-create[open] > summary {
  margin-left: auto;
}

.fs-user-form {
  display: grid;
  gap: 14px;
  margin-top: 12px;
  padding: 16px;
  background: color-mix(in srgb, var(--fs-color-primary) 2%, #fff);
  border: 1px solid color-mix(in srgb, var(--fs-color-primary) 14%, var(--fs-color-border));
  border-radius: 12px;
}

.fs-user-form h2 {
  color: var(--fs-color-primary-hover);
  font-size: 18px;
  font-weight: 700;
}

.fs-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.fs-checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--fs-color-text-secondary);
  font-size: 12px;
}

.fs-checkbox-field {
  align-items: center;
  min-height: var(--fs-control-height);
}

.fs-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--fs-space-2);
}

.fs-form-section {
  overflow: hidden;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: var(--fs-radius-md);
}

.fs-form-section__body {
  display: grid;
  gap: var(--fs-space-3);
  padding: var(--fs-space-4);
}

.fs-users-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fs-users-toolbar span {
  color: var(--fs-color-primary-hover);
  font-size: 13px;
  font-weight: 700;
}

.fs-users-toolbar small {
  color: var(--fs-color-text-secondary);
  font-size: 11px;
}

.fs-users-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fs-color-primary) 2%, #fff);
}

.fs-users-list-head,
.fs-user-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.7fr) minmax(170px, 1fr) minmax(130px, 0.8fr) 64px;
  gap: 10px;
  align-items: center;
}

.fs-users-list-head {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--fs-color-primary) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--fs-color-primary) 14%, var(--fs-color-border));
  border-radius: 12px;
}

.fs-users-list-head span {
  color: color-mix(in srgb, var(--fs-color-primary) 65%, var(--fs-color-text));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.fs-users-list-head span:last-child {
  text-align: center;
}

.fs-users-list {
  display: grid;
  gap: 8px;
}

.fs-user-row {
  align-items: stretch;
  padding: 10px 12px;
  background: var(--fs-color-surface);
  border: 1px solid color-mix(in srgb, var(--fs-color-primary) 10%, var(--fs-color-border));
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

@media (hover: hover) {
  .fs-user-row:hover {
    background: color-mix(in srgb, var(--fs-color-primary) 5%, #fff);
    border-color: color-mix(in srgb, var(--fs-color-primary) 24%, var(--fs-color-border));
    box-shadow: 0 6px 16px rgb(0 91 187 / 8%);
  }
}

.fs-user-cell {
  display: grid;
  gap: 4px;
  align-content: center;
  min-width: 0;
  color: var(--fs-color-text);
  font-size: 13px;
}

.fs-user-cell--identity strong {
  color: var(--fs-color-primary-hover);
  font-size: 14px;
}

.fs-user-cell small {
  color: var(--fs-color-text-secondary);
  font-size: 11px;
}

.fs-role-label,
.fs-user-state {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 5px 12px;
  color: var(--fs-color-primary-hover);
  background: var(--fs-color-primary-subtle);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.fs-user-state {
  color: var(--fs-color-success);
  background: var(--fs-color-success-subtle);
}

.fs-user-state--inactive {
  color: var(--fs-color-danger-text);
  background: var(--fs-color-danger-subtle);
}

.fs-role-label[data-tone="DANGER"] {
  color: var(--fs-color-danger-text);
  background: var(--fs-color-danger-subtle);
}

.fs-role-label[data-tone="WARNING"] {
  color: var(--fs-color-warning);
  background: var(--fs-color-warning-subtle);
}

.fs-role-label[data-tone="INFO"] {
  color: var(--fs-color-primary-text);
  background: var(--fs-color-primary-line);
}

.fs-role-label[data-tone="SUCCESS"] {
  color: var(--fs-color-success);
  background: var(--fs-color-success-subtle);
}

.fs-role-label[data-tone="NEUTRAL"] {
  color: var(--fs-color-text-secondary);
  background: var(--fs-color-warning-subtle);
}

.fs-mobile-label {
  display: none;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fs-user-editor {
  min-width: 0;
  align-self: center;
  justify-self: center;
}

.fs-action-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--fs-color-primary);
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border);
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
}

.fs-user-editor[open] {
  grid-column: 1 / -1;
  width: 100%;
  justify-self: stretch;
  padding-top: 8px;
  border-top: 1px dashed color-mix(in srgb, var(--fs-color-primary) 18%, var(--fs-color-border));
}

.fs-user-editor[open] > summary {
  margin-left: auto;
}

.fs-password-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  align-items: end;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  background: var(--fs-color-surface);
  border: 1px solid var(--fs-color-border-subtle);
  border-radius: 10px;
}

.fs-tasks-header,
.fs-task-form-section-head,
.fs-task-header-actions,
.fs-task-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.fs-tasks-header {
  min-height: 56px;
  padding: 9px 12px;
}

.fs-tasks-header .fs-btn img,
.fs-tasks-header .fs-page-heading img {
  width: 24px;
  height: 24px;
}

.fs-btn-plus {
  font-size: 20px;
  line-height: 1;
}

.fs-tasks-summary {
  display: grid;
  gap: 10px;
}

.fs-tasks-summary > h2,
.fs-task-form-section-head h2 {
  color: var(--fs-color-text);
  font-size: 14px;
  font-weight: 700;
}

.fs-task-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.fs-task-summary-item {
  display: grid;
  gap: 5px;
  padding: 12px;
  background: var(--fs-color-primary-subtle);
  border: 1px solid color-mix(in srgb, var(--fs-color-primary) 18%, var(--fs-color-border));
  border-radius: 10px;
}

.fs-task-summary-item span {
  color: var(--fs-color-text-secondary);
  font-size: 11px;
}

.fs-task-summary-item strong {
  color: var(--fs-color-primary-hover);
  font-size: 22px;
}

.fs-task-summary-item--completed {
  background: var(--fs-color-success-subtle);
  border-color: var(--fs-color-success-line);
}

.fs-task-summary-item--completed strong {
  color: var(--fs-color-success-text);
}

.fs-task-summary-item--overdue {
  background: var(--fs-color-danger-subtle);
  border-color: var(--fs-color-danger-line);
}

.fs-task-summary-item--overdue strong {
  color: var(--fs-color-danger);
}

.fs-tasks-toolbar {
  padding: 10px 12px;
}

.fs-task-filter {
  display: flex;
  align-items: end;
  gap: 10px;
}

.fs-task-filter .fs-field {
  width: min(320px, 100%);
}

.fs-tasks-panel {
  display: grid;
  gap: 8px;
  padding: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fs-color-primary) 2%, #fff);
}

.fs-tasks-list-head,
.fs-task-row {
  display: grid;
  grid-template-columns: minmax(190px, 1.35fr) minmax(200px, 1.3fr) minmax(150px, 1fr) minmax(80px, 0.55fr) minmax(150px, 1fr) minmax(110px, 0.7fr);
  gap: 10px;
  align-items: center;
}

.fs-tasks-list-head {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--fs-color-primary) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--fs-color-primary) 14%, var(--fs-color-border));
  border-radius: 12px;
}

.fs-tasks-list-head span {
  color: color-mix(in srgb, var(--fs-color-primary) 65%, var(--fs-color-text));
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.fs-tasks-list {
  display: grid;
  gap: 8px;
}

.fs-task-row {
  align-items: stretch;
  padding: 10px 12px;
  background: var(--fs-color-surface);
  border: 1px solid color-mix(in srgb, var(--fs-color-primary) 10%, var(--fs-color-border));
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(15 23 42 / 5%);
}

.fs-task-cell {
  display: grid;
  gap: 4px;
  align-content: center;
  min-width: 0;
  color: var(--fs-color-text);
  font-size: 12px;
}

.fs-task-cell strong {
  overflow: hidden;
  color: var(--fs-color-primary-hover);
  font-size: 13px;
  text-overflow: ellipsis;
}

.fs-task-cell small {
  overflow: hidden;
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  line-height: 1.35;
  text-overflow: ellipsis;
}

.fs-task-cell--metric {
  text-align: center;
}

.fs-task-priority,
.fs-task-status,
.fs-task-type-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  color: var(--fs-color-primary-hover);
  background: var(--fs-color-primary-subtle);
  border-radius: 999px;
  font-size: var(--fs-text-xs);
  font-weight: 700;
}

.fs-task-priority[data-priority="HIGH"],
.fs-task-status[data-status="OVERDUE"],
.fs-task-status[data-status="CANCELLED"] {
  color: var(--fs-color-danger);
  background: var(--fs-color-danger-subtle);
}

.fs-task-priority[data-priority="LOW"],
.fs-task-status[data-status="COMPLETED"] {
  color: var(--fs-color-success-text);
  background: var(--fs-color-success-subtle);
}

.fs-task-status[data-status="FORMING"] {
  color: var(--fs-color-warning-text);
  background: var(--fs-color-warning-subtle);
}

.fs-task-cell--progress progress {
  width: 100%;
  height: 8px;
  accent-color: var(--fs-color-primary);
}

.fs-task-create-form {
  display: grid;
  gap: 0;
  padding: 18px;
}

.fs-task-form-section {
  display: grid;
  gap: 14px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--fs-color-border-subtle);
}

.fs-task-form-section + .fs-task-form-section {
  padding-top: 18px;
}

.fs-task-form-section-head > div:first-child > span {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fs-task-head-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 10px;
}

.fs-task-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.fs-task-field--wide {
  grid-column: 1 / -1;
}

.fs-task-create-form textarea {
  min-height: 92px;
  padding: 10px 12px;
  color: var(--fs-color-text);
  background: var(--fs-color-field);
  border: 1px solid var(--fs-color-border);
  border-radius: var(--fs-radius-sm);
  resize: vertical;
}

.fs-task-form-actions {
  justify-content: flex-end;
  padding-top: 16px;
}

.fs-workspace-welcome {
  padding: 24px;
  background:
    linear-gradient(90deg, rgb(255 255 255 / 98%), rgb(248 247 245 / 92%)),
    url("backgrounds/light-background.png");
}

.fs-workspace-welcome > span {
  color: var(--fs-color-text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fs-workspace-welcome h2 {
  margin-top: 8px;
  color: var(--fs-color-text);
  font-size: 28px;
  font-weight: 700;
}

.fs-workspace-welcome p {
  max-width: 720px;
  margin-top: 8px;
  color: var(--fs-color-text-secondary);
  font-size: 13px;
}

.fs-workspace-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.fs-workspace-feature {
  display: grid;
  gap: 8px;
  min-height: 170px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

@media (hover: hover) {
  .fs-workspace-feature:hover {
    border-color: color-mix(in srgb, var(--fs-color-primary) 28%, var(--fs-color-border));
    box-shadow: var(--fs-shadow-md);
  }
}

.fs-workspace-feature-label {
  color: var(--fs-color-text-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.fs-workspace-feature > strong {
  margin-top: auto;
  color: var(--fs-color-text);
  font-size: 20px;
}

.fs-workspace-feature p {
  color: var(--fs-color-text-secondary);
  font-size: 12px;
}

.fs-workspace-feature-action {
  color: var(--fs-color-primary-hover);
  font-size: 12px;
  font-weight: 700;
}

.fs-empty-state {
  text-align: center;
}

.fs-empty-state h2 {
  font-size: 16px;
  font-weight: 700;
}

.fs-empty-state p {
  margin-top: 4px;
  color: var(--fs-color-text-secondary);
  font-size: 12px;
}

.fs-error-state {
  padding-block: 32px;
}

.fs-error-reference {
  overflow-wrap: anywhere;
}

.fs-error-actions {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

.fs-auth-page {
  width: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
}

.fs-auth-shell {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 28px 18px;
  overflow: hidden;
  background-color: #153b49;
}

.fs-auth-shell::before {
  position: absolute;
  z-index: -1;
  inset: -20px;
  background-image:
    linear-gradient(rgb(8 35 44 / 18%), rgb(8 35 44 / 18%)),
    url("backgrounds/background-clouds.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(12px);
  transform: scale(1.04);
  content: "";
  pointer-events: none;
}

.fs-auth-stage {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(440px, 100%);
}

.fs-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: min(320px, 100%);
  padding: 0;
}

.fs-auth-company-logo {
  display: block;
  width: min(190px, 58vw);
  height: 54px;
  object-fit: contain;
}

.fs-auth-brand small,
.fs-auth-provider > span,
.fs-auth-heading > span {
  color: var(--fs-color-text-secondary);
  font-size: var(--fs-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fs-auth-brand small,
.fs-auth-provider > span {
  color: var(--fs-color-surface);
  text-shadow: 0 1px 8px rgb(8 35 44 / 42%);
}

.fs-auth-main {
  display: flex;
  justify-content: center;
  width: 100%;
}

.fs-auth-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 32px;
  background:
    linear-gradient(rgb(255 255 255 / 88%), rgb(255 255 255 / 92%)),
    url("backgrounds/background-clouds.png") center / cover no-repeat;
  border: 1px solid var(--fs-color-border);
  border-radius: var(--fs-radius-xl);
  box-shadow:
    0 2px 7px rgb(31 53 71 / 12%),
    0 18px 42px rgb(31 53 71 / 16%);
}

.fs-auth-heading {
  display: grid;
  gap: 6px;
  width: 100%;
  text-align: left;
}

.fs-auth-heading h1 {
  color: var(--fs-color-text);
  font-family: "Public Sans", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.fs-auth-heading p {
  color: var(--fs-color-text-secondary);
  font-size: 13px;
  line-height: 1.55;
}

.fs-auth-form {
  display: grid;
  gap: 14px;
}

.fs-auth-card .fs-auth-heading > span {
  color: var(--fs-color-primary);
}

.fs-auth-card .fs-field > span {
  color: var(--fs-color-text);
}

.fs-auth-card .fs-auth-control > input {
  min-height: 44px;
  color: var(--fs-color-text);
  background: var(--fs-color-field);
  border-color: var(--fs-color-border);
}

.fs-auth-card .action-button--wide {
  min-height: 44px;
}

.fs-auth-control,
.administration-users__search-control {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--fs-color-text);
  font-size: 14px;
  font-weight: 400;
}

.fs-auth-control > img,
.administration-users__search-control > img {
  position: absolute;
  z-index: 1;
  left: 13px;
  width: 15px;
  height: 15px;
  pointer-events: none;
}

.fs-auth-control > input,
.administration-users__search-control > input {
  padding-left: 38px;
  background: var(--fs-color-field);
}

.fs-auth-footer {
  max-width: 420px;
  padding: 0 16px;
  color: var(--fs-color-surface);
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
  text-shadow: 0 1px 8px rgb(8 35 44 / 42%);
}

.fs-auth-provider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 176px;
  padding: 0;
}

.fs-auth-provider img {
  display: block;
  width: 138px;
  height: 52px;
  padding: 0;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

@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;
    min-height: 100dvh;
    height: auto;
    /* 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;
  }

  /*
   * The workspace opens with a full-bleed cover, so it takes the screen edge to
   * edge and lays out its own insets. Every other page keeps the shell padding.
   */
  .fs-content:has(.fs-workspace-page) {
    padding: 0;
  }

  .fs-page-heading-card,
  .fs-page-header {
    top: 0;
  }

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

  /* Every compact 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;
    align-content: 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;
  }

  .fs-mobile-avatar {
    width: 24px;
    height: 24px;
    color: var(--fs-color-text-secondary);
    background: var(--fs-color-surface-subtle);
    border: 0;
    font-size: 12px;
    font-weight: 600;
  }

  .fs-mobile-avatar--image {
    border: 0;
  }

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

  .fs-mobile-menu-page {
    padding: 0;
  }

  .fs-workspace-desktop-content {
    display: none;
  }

  /*
   * The home screen lays out its own insets: the cover runs edge to edge and the
   * sheet below it carries the page padding, so there is no shell padding here to
   * cut the photo short of the screen.
   */
  .fs-workspace-mobile-content {
    display: block;
    padding: 0;
  }

  .fs-page {
    gap: 8px;
  }

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

@media (max-width: 900px) {

  .fs-users-list-head {
    display: none;
  }

  .fs-tasks-list-head {
    display: none;
  }

  .fs-user-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fs-task-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fs-mobile-label {
    display: block;
  }

  .fs-user-editor {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .fs-workspace-features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .fs-auth-shell {
    align-items: start;
    padding-top: max(22px, env(safe-area-inset-top));
  }

  .fs-auth-card {
    padding: 26px 20px 24px;
  }

  .fs-auth-heading h1 {
    font-size: 25px;
  }

  .fs-page-heading {
    font-size: 23px;
  }

  .fs-page-heading-card,
  .fs-users-header,
  .fs-users-toolbar,
  .fs-tasks-header,
  .fs-task-form-section-head,
  .fs-task-header-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .fs-page-heading-actions {
    justify-content: flex-end;
    width: 100%;
  }

.fs-form-grid,
.fs-user-row,
.fs-task-summary-grid,
.fs-task-form-grid,
.fs-task-head-fields,
.fs-task-row {
    grid-template-columns: 1fr;
  }

  .fs-task-field--wide {
    grid-column: 1;
  }

  .fs-task-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .fs-task-filter .fs-field {
    width: 100%;
  }

  .fs-task-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .fs-section-head {
    flex-direction: column;
  }

  .fs-scope-badge {
    white-space: normal;
  }

  .fs-report-submit {
    width: auto;
    flex: 1;
  }

  .fs-user-editor,
  .fs-user-editor[open] {
    grid-column: 1;
  }

  .fs-password-form {
    grid-template-columns: 1fr;
  }

  .fs-workspace-welcome h2 {
    font-size: 23px;
  }
}

/* Narrow phones: three per row before the label has to wrap to four lines. */
@media (max-width: 339px) {
  .fs-quick-access {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}