:root {
  --app-shell-max: 1320px;
  --app-shell-gutter: max(5vw, 40px);
}

/* One stable shell for every authenticated product page. */
.workspace-page > main {
  width: 100%;
  max-width: var(--app-shell-max);
  padding-right: var(--app-shell-gutter);
  padding-left: var(--app-shell-gutter);
}

.workspace-page .simple-dashboard,
.workspace-page .content-strategy-page {
  max-width: none;
}

.settings-page-body .settings-shell,
.settings-page-body main > .flash {
  width: 100%;
  max-width: none;
}

.workspace-page .page-footer-inner {
  width: 100%;
  max-width: var(--app-shell-max);
  padding-right: var(--app-shell-gutter);
  padding-left: var(--app-shell-gutter);
}

/* The authenticated navbar must not change size or position by page. */
.has-app-header .workspace-nav {
  height: 72px;
  gap: 28px;
  padding: 0 var(--app-shell-gutter);
  border-bottom: 2px solid #121212;
  background: rgba(255, 253, 244, .95);
  backdrop-filter: blur(12px);
}

.has-app-header .workspace-nav .logo {
  min-height: 0;
  color: #121212;
  font-size: 22px;
  letter-spacing: -1.2px;
}

.has-app-header .workspace-nav .logo img {
  width: 36px;
  height: 36px;
}

.has-app-header .workspace-nav .logo span,
.has-app-header .workspace-nav .workspace-site span {
  color: #121212;
}

.has-app-header .workspace-nav .settings-link {
  width: auto;
  min-width: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1.5px solid #121212;
  border-radius: 999px;
  background: #eee9ff;
  color: #121212;
  box-shadow: 2px 2px 0 #121212;
  transform: none;
}

.has-app-header .workspace-nav .settings-link:hover {
  background: #d8ff63;
  color: #121212;
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 #121212;
}

.has-app-header .workspace-nav .settings-link.active {
  border-color: #7457ff;
  background: #fff;
  color: #7457ff;
  transform: none;
  box-shadow: inset 0 -3px #7457ff;
}

@media (max-width: 900px) {
  :root {
    --app-shell-gutter: 24px;
  }
}

@media (max-width: 700px) {
  :root {
    --app-shell-gutter: 18px;
  }

  .has-app-header .workspace-nav {
    gap: 12px;
  }

  .has-app-header .workspace-nav > .workspace-site {
    display: none;
  }

  .settings-page-body .workspace-nav > a:not(.logo):not(.workspace-site):not(.settings-link):not(.profile-link) {
    display: inline-flex;
  }

  .has-app-header .workspace-nav .settings-link {
    width: 40px;
    padding: 0;
  }
}

@media (max-width: 460px) {
  :root {
    --app-shell-gutter: 12px;
  }
}