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

html,
body,
#demo {
  margin: 0;
  padding: 0;
  min-block-size: 100%;
}

/* Platform menu styles */

.platform-menu__logo,
.platform-menu__start,
.platform-menu__center,
.platform-menu__end {
  display: contents;
}

/* App demo styles */

.demo-app {
  /* position: relative;
  display: flex;
  align-items: stretch; */
}

.demo-app__inner {
  position: relative;
  flex: 1;
  padding-block-start: calc(var(--prisma--dimension--space) * 0);
  padding-block-end: calc(var(--prisma--dimension--space) * 12);
  padding-inline: var(--prisma--shell--app-outlet--content--inline-gutter);
}

.demo-app__inner:before {
  z-index: 0;
  display: none;
  position: absolute;
  content: " ";
  inset: calc(var(--prisma--dimension--space) * 5.5)
    calc(var(--prisma--dimension--space) * 6);
  background: repeating-linear-gradient(
    var(--prisma--color--background--disabled),
    var(--prisma--color--background--disabled)
      calc(var(--prisma--dimension--space) * 5),
    transparent calc(var(--prisma--dimension--space) * 5),
    transparent calc(var(--prisma--dimension--space) * 10)
  );
  pointer-events: none;
}

.demo-app__tab-list {
  margin-block-end: calc(var(--prisma--dimension--space) * 6);
}

.demo-grid {
  display: grid;
  gap: calc(var(--prisma--dimension--space) * 1);
  grid-template-columns: repeat(6, 1fr);
  margin-block-end: calc(var(--prisma--dimension--space) * 9);
  margin-inline: calc(var(--prisma--dimension--space) * -6);
  border-radius: var(--prisma--border--corner--large);
  overflow: hidden;
}

.demo-grid__item {
  aspect-ratio: 1 / 1;
}

.demo-header {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--prisma--dimension--space) * 12);
  align-items: center;
}

.demo-header .start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
}

.demo-header .middle {
  display: flex;
  justify-content: center;
  align-items: center;
  min-inline-size: 0;
}

.demo-header .middle > * {
  flex: 1;
}

.demo-header .end {
  display: flex;
  justify-content: flex-end;
  min-inline-size: max-content;
}

/* Temporary, until a system-banner arrives */

.system-banner {
  display: flex;
  min-block-size: 48px;
  padding: calc(var(--prisma--dimension--space) * 2)
    calc(var(--prisma--dimension--space) * 6);
  align-items: center;
  justify-content: center;
  gap: calc(var(--prisma--dimension--space) * 3);
  text-align: center;
  color: var(--prisma--color--content--neutral);
  background-color: var(--prisma--color--background--accent--noon);
}

/* */