/* The "no credits left" dialog. A native <dialog open>, so focus and Escape are
   the browser's business rather than ours. */
.paywall {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: var(--space-md);
  border: none;
  background-color: rgb(16 24 40 / 0.45);
}

.paywall__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: min(26rem, 100%);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.paywall__mark {
  width: 2.5rem;
  height: 2.5rem;
  margin: 0 auto;
  border-radius: var(--radius-full);
  background-color: var(--color-building-soft);
  background-image: radial-gradient(circle at center, var(--color-danger) 0 0.375rem, transparent 0.375rem);
}

.paywall__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
}

.paywall__text {
  color: var(--color-text-soft);
  font-size: var(--text-sm);
}

.paywall__text--soft {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}

.paywall__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.paywall__form {
  display: contents;
}

.paywall__link {
  color: var(--color-text-soft);
  font-size: var(--text-xs);
}