/* Shared Signitic app screen for the live mock-ups (users.css, template.css, statistics.css): 1440x810 stage, top bar, avatars. */
/* Selectors start with :where(.sg-mkapp) so each mock-up's own CSS wins even when a later block links this file again. */

.sg-mkapp {
  --mk-w: 1440;
  --mk-h: 810;
  --mkapp-violet: #7c3aed;
  --mkapp-line: #e4e4e7;
}

:where(.sg-mkapp) { background: var(--mk-white); }

.sg-homepage_features-tab-image.sg-mk-host { aspect-ratio: 16 / 9; }

/* Empty svg after the mock-up, as wide as the screenshot it replaces and 0 high, for tab columns sized by their content (.sg-mk has inline-size containment). */
.sg-mkapp__sizer {
  display: block;
  max-width: 100%;
  height: 0;
  visibility: hidden;
}

/* No container query units: the page's old screenshot instead, set on the host as --mk-fallback and fetched only here. */
@supports not (width: 1cqw) {
  .sg-mkapp:not(.sg-mkus) { background: var(--mk-fallback, none) 0 0 / 100% 100% no-repeat #fff; }
  :where(.sg-mkapp) .sg-mkapp__stage { display: none; }
}

:where(.sg-mkapp) .sg-mkapp__stage {
  font-size: calc(14.3 * var(--u));
  line-height: 1.4;
  font-weight: 400;
  color: #27272a;
  letter-spacing: 0;
  font-feature-settings: normal;
  font-variant-numeric: normal;
  font-variant-ligatures: normal;
  text-align: left;
  white-space: nowrap;
}

:where(.sg-mkapp) svg {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:where(.sg-mkapp) .sg-mkapp__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- top bar ---- */

:where(.sg-mkapp) .sg-mkapp__bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(72 * var(--u));
  background: #f3f3f5;
}

:where(.sg-mkapp) .sg-mkapp__logo {
  position: absolute;
  left: calc(96 * var(--u));
  top: calc(23 * var(--u));
  width: calc(90 * var(--u));
  height: calc(25 * var(--u));
  fill: #ff5b49;
  stroke: none;
}

:where(.sg-mkapp) .sg-mkapp__nav {
  position: absolute;
  left: calc(225 * var(--u));
  top: calc(18 * var(--u));
  display: flex;
  gap: calc(4 * var(--u));
}

:where(.sg-mkapp) .sg-mkapp__nav span {
  height: calc(36 * var(--u));
  padding: 0 calc(14 * var(--u));
  border-radius: calc(7 * var(--u));
  line-height: calc(36 * var(--u));
  color: #18181b;
}

:where(.sg-mkapp) .sg-mkapp__nav .is-active { background: var(--mk-white); }

:where(.sg-mkapp) .sg-mkapp__tools {
  position: absolute;
  right: calc(96 * var(--u));
  top: calc(16 * var(--u));
  display: flex;
  align-items: center;
}

:where(.sg-mkapp) .sg-mkapp__sub {
  gap: calc(6 * var(--u));
  height: calc(36 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(11 * var(--u));
  border-radius: calc(7 * var(--u));
  background: #efeafe;
  color: var(--mkapp-violet);
  line-height: inherit;
}

:where(.sg-mkapp) .sg-mkapp__sub svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); stroke-width: 1.8; }

:where(.sg-mkapp) .sg-mkapp__sync {
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  margin-left: calc(15 * var(--u));
  color: #a1a1a6;
  stroke-width: 1.6;
}

:where(.sg-mkapp) .sg-mkapp__ai {
  position: relative;
  width: calc(26 * var(--u));
  height: calc(26 * var(--u));
  margin-left: calc(24 * var(--u));
  border-radius: 50%;
  background: linear-gradient(135deg, #7b2ff7 0%, #c02fe0 55%, #f43f5e 100%);
}

:where(.sg-mkapp) .sg-mkapp__ai svg {
  position: absolute;
  inset: calc(5 * var(--u));
  fill: var(--mk-white);
  stroke: none;
}

/* ---- avatars: kit .sg-mk-avatar, one image with 7 cells ---- */

:where(.sg-mkapp) .sg-mk-avatar {
  --mk-av: calc(32 * var(--u));
  margin-left: 0;
  border: 0;
  background: #ece8fb url("/assets/img/sg-users-mock-avatars.webp") 0 0 / 700% 100% no-repeat;
}

:where(.sg-mkapp) .sg-mk-avatar.is-2 { background-position: 16.667% 0; }
:where(.sg-mkapp) .sg-mk-avatar.is-3 { background-position: 33.333% 0; }
:where(.sg-mkapp) .sg-mk-avatar.is-4 { background-position: 50% 0; }
:where(.sg-mkapp) .sg-mk-avatar.is-5 { background-position: 66.667% 0; }
:where(.sg-mkapp) .sg-mk-avatar.is-6 { background-position: 83.333% 0; }
:where(.sg-mkapp) .sg-mk-avatar.is-7 { background-position: 100% 0; }

:where(.sg-mkapp) .sg-mkapp__me {
  margin-left: calc(15 * var(--u));
  border: calc(1.5 * var(--u)) solid #d9d9de;
}

/* ---- page head shared by the template and statistics screens ---- */

:where(.sg-mkapp) .sg-mkapp__title {
  position: absolute;
  left: calc(96 * var(--u));
  font-size: calc(25.5 * var(--u));
  line-height: calc(36 * var(--u));
  font-weight: 600;
  color: #232326;
}

:where(.sg-mkapp) .sg-mkapp__btn {
  gap: calc(8 * var(--u));
  height: calc(44 * var(--u));
  padding: 0 calc(12 * var(--u));
  border: calc(1 * var(--u)) solid var(--mkapp-line);
  border-radius: calc(7 * var(--u));
  background: var(--mk-white);
  color: #18181b;
  font-size: calc(16.3 * var(--u));
  line-height: inherit;
}