/*
 * Shells
 *
 * Marketing and public visitor layout wrappers.
 */

.marketing-shell {
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.marketing-shell__surface {
  position: relative;
  overflow: hidden;
  background-color: var(--color-surface-muted);
}

.marketing-shell__content {
  position: relative;
  padding-block: 1.5rem 3rem;
}

@media (min-width: 640px) {
  .marketing-shell__content {
    padding-block-end: 4rem;
  }
}

@media (min-width: 768px) {
  .marketing-shell__content {
    padding-block-end: 5rem;
  }
}

@media (min-width: 1024px) {
  .marketing-shell__content {
    padding-block-end: 7rem;
  }
}

@media (min-width: 1280px) {
  .marketing-shell__content {
    padding-block-end: 8rem;
  }
}

.marketing-shell__main {
  max-inline-size: 1280px;
  margin-block-start: 2.5rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 640px) {
  .marketing-shell__main {
    margin-block-start: 3rem;
    padding-inline: 1.5rem;
  }
}

@media (min-width: 768px) {
  .marketing-shell__main {
    margin-block-start: 4rem;
  }
}

@media (min-width: 1024px) {
  .marketing-shell__main {
    margin-block-start: 5rem;
  }
}

@media (min-width: 1280px) {
  .marketing-shell__main {
    margin-block-start: 7rem;
  }
}

.visitor-shell {
  position: relative;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  overflow-x: hidden;
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.visitor-shell__background {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  pointer-events: none;
}

.visitor-shell__blob {
  position: absolute;
  inline-size: 20rem;
  block-size: 20rem;
  border-radius: var(--radius-pill);
  filter: blur(64px);
  mix-blend-mode: multiply;
}

.visitor-shell__blob--one {
  inset-block-start: 0;
  inset-inline-start: -10rem;
  opacity: 0.4;
  animation: visitorBlob 8s ease-in-out infinite;
  background-color: var(--theme-blob-1-light);
}

.visitor-shell__blob--two {
  inset-block-start: 10rem;
  inset-inline-end: -10rem;
  opacity: 0.4;
  animation: visitorBlob 8s ease-in-out infinite 2s;
  background-color: var(--theme-blob-2-light);
}

.visitor-shell__blob--three {
  inset-block-end: 10rem;
  inset-inline-start: 33.3333%;
  opacity: 0.3;
  animation: visitorBlob 8s ease-in-out infinite 4s;
  background-color: var(--theme-blob-3-light);
}

@keyframes visitorBlob {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(30px, -50px) scale(1.1);
  }

  66% {
    transform: translate(-20px, 20px) scale(0.9);
  }
}

/* ------------------------------------------------------------------ */
/* Public auth and signup screens                                     */
/* ------------------------------------------------------------------ */

.public-auth-shell {
  display: flex;
  justify-content: center;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  background-image: linear-gradient(
    to right,
    rgb(var(--palette-pink-100)) 10%,
    rgb(var(--palette-blue-200)) 90%
  );
}

.public-auth-container {
  inline-size: min(100% - 3rem, 42rem);
  margin-inline: 1.5rem;
  padding-block-start: 2rem;
}

.public-auth-container--compact {
  inline-size: min(66.6667%, 32rem);
}

.public-auth-container--wide {
  inline-size: min(66.6667%, 48rem);
}

.public-auth-container--account {
  inline-size: min(100% - 3rem, 36rem);
}

.public-auth-logo-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.public-auth-logo {
  inline-size: 24rem;
  max-inline-size: 100%;
  block-size: auto;
}

.public-auth-card {
  margin-block-start: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.public-auth-card--large-offset {
  margin-block-start: 3.5rem;
}

.public-auth-card--padded {
  padding: 2rem 1rem;
  border-radius: var(--radius-lg);
}

.public-auth-form {
  padding-block: 1rem;
}

.public-auth-form--inset {
  padding-block: 1rem;
  padding-inline: 2.5rem;
}

.public-auth-title {
  margin: 0 0 1.5rem;
  color: var(--color-ink);
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 2.25rem;
  text-align: center;
}

.public-auth-title--account {
  font-size: 1.5rem;
}

.public-auth-title--hero {
  margin-block-start: 1.5rem;
  margin-block-end: 0;
  font-size: 2.25rem;
  text-align: start;
}

.public-auth-subtitle {
  margin-block: 1rem;
  color: var(--color-ink-light);
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.public-auth-card-heading {
  margin-block: 1rem 0;
  color: var(--color-ink);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 2.25rem;
  text-align: center;
}

.public-auth-alert {
  padding: 1rem;
  border-inline-start: 4px solid rgb(var(--palette-yellow-400));
  background-color: rgb(var(--palette-yellow-50));
}

.public-auth-alert__content {
  display: flex;
  align-items: center;
}

.public-auth-alert__content--start {
  align-items: flex-start;
}

.public-auth-alert__icon-wrap {
  flex-shrink: 0;
}

.public-auth-alert__icon {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: rgb(var(--palette-yellow-400));
}

.public-auth-alert__body {
  margin-inline-start: 0.75rem;
}

.public-auth-alert__message {
  margin: 0;
  color: rgb(var(--palette-yellow-700));
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.public-auth-field-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  inline-size: 100%;
  margin-block-start: 1rem;
}

.public-auth-field-row--top-action {
  align-items: flex-start;
}

.public-auth-field {
  inline-size: 100%;
}

.public-auth-field-icon,
.public-auth-toggle-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.public-auth-toggle {
  z-index: 20;
  display: flex;
  align-items: center;
  padding-inline-start: 0.5rem;
  border: 0;
  background: transparent;
  color: var(--color-ink-medium);
  cursor: pointer;
}

.public-auth-toggle:hover {
  color: var(--color-ink-light);
}

.public-auth-toggle:focus {
  outline: none;
}

.public-auth-toggle--aligned {
  margin-block-start: 1.75rem;
}

.public-auth-toggle--bottom {
  align-self: flex-end;
  padding-block-end: 0.75rem;
}

.public-auth-actions {
  margin-block-start: 1.5rem;
}


.public-auth-button-shell {
  display: block;
  inline-size: 100%;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.public-auth-submit {
  display: flex;
  justify-content: center;
  inline-size: 100%;
  padding: 0.5rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background-color: rgb(var(--palette-blue-700));
  color: var(--color-ink-inverted);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.75rem;
  transition:
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.public-auth-submit:hover {
  background-color: var(--color-info-strong);
}

.public-auth-submit:focus {
  outline: none;
  border-color: rgb(var(--palette-blue-800));
  box-shadow: 0 0 0 3px rgb(var(--palette-blue-300));
}

.public-auth-submit:active {
  background-color: rgb(var(--palette-blue-800));
}

.public-auth-link-row {
  margin-block-start: 1.5rem;
  font-size: 1rem;
  line-height: 1.25rem;
  text-align: end;
}

.public-auth-footer {
  margin-block-start: 1.5rem;
  font-size: 1.25rem;
  line-height: 1.25rem;
  text-align: center;
}

.public-signup-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-block-start: 2rem;
}

.public-signup-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.public-signup-lede {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 2.25rem;
  text-align: center;
}

.public-signup-error-wrap {
  padding-block: 1rem;
}

.public-signup-demo {
  margin-block-start: 2.5rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  text-align: center;
}

.public-signup-success-text {
  margin: 0;
  color: var(--color-ink);
  font-size: 1.125rem;
  line-height: 1.25rem;
}

.public-signup-success-text + .public-signup-success-text {
  margin-block-start: 1rem;
}

.public-signup-success-text--strong {
  font-weight: 600;
}

.public-unsubscribe-shell {
  display: flex;
  justify-content: center;
  min-block-size: 100vh;
  min-block-size: 100dvh;
  background-image: linear-gradient(
    to right,
    rgb(var(--palette-pink-100)) 10%,
    rgb(var(--palette-blue-200)) 90%
  );
}

.public-unsubscribe-panel {
  display: flex;
  justify-content: center;
  margin-block-start: 5rem;
}

.public-unsubscribe-message {
  margin: 0 0 2rem;
  color: var(--color-ink-light);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.75rem;
  text-align: center;
}

.public-unsubscribe-actions {
  display: flex;
  justify-content: center;
}

.public-unsubscribe-submit {
  padding: 0.5rem 0.875rem;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: rgb(var(--palette-fuchsia-700));
  color: var(--color-ink-inverted);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.public-unsubscribe-submit:hover {
  background-color: rgb(var(--palette-fuchsia-500));
}

.public-unsubscribe-submit:focus-visible {
  outline: 2px solid rgb(var(--palette-fuchsia-700));
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* PWA instruction snippets                                           */
/* ------------------------------------------------------------------ */

.pwa-instructions-section {
  margin-block-start: 1.5rem;
}

.pwa-instructions-section--install {
  margin-block-start: 2rem;
}

.pwa-instructions-copy {
  margin-block: 1.5rem;
}

.pwa-instructions-list {
  margin-block: 1rem;
}

.pwa-instructions-list--spacious {
  margin-block: 1.5rem;
}

.pwa-instructions-item--start {
  align-items: flex-start;
}

.pwa-instructions-actions {
  margin-block-start: 1.5rem;
}

.pwa-instructions-action-icon {
  margin-inline-end: 0.5rem;
}

@media (min-width: 640px) {
  .public-auth-card--padded {
    padding-inline: 2.5rem;
  }

  .public-signup-shell {
    margin-block-end: 6rem;
  }
}

@media (min-width: 768px) {
  .public-auth-container {
    margin-inline: 2.5rem;
  }
}

@media (min-width: 1024px) {
  .public-auth-container--compact {
    inline-size: min(33.3333%, 32rem);
  }

  .public-auth-container--wide {
    inline-size: min(50%, 48rem);
  }

  .public-auth-subtitle {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .public-auth-submit,
  .public-auth-footer {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .public-signup-content {
    order: 9999;
  }
}