/* Paywall — upgrade CTA for non-Pro users.

   The surface a later /plan GET handler renders in place of the meal
   planner when the session user is not Pro (#147). Top-anchored and
   intentionally minimal per design-bible chapter 1: a heading, one
   value line, one CTA. Tokens and the .state-layer overlay match the
   signin submit button.

   Used in: paywall partial (ui/templates/partials/paywall.html).

   Cascade-layer note: lives in `components` so reset/layout never
   overrides it, and utility classes always do. */

@layer components {

/* The .paywall content column takes the --content-form tier
   (spacing-foundation D2). Was 32rem — identical to --content-form (512px),
   a no-op migration off the raw literal. */
.paywall {
  max-width: var(--content-form);
  margin: var(--space-section) auto 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.paywall__heading {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--leading-tight);
}

.paywall__lede {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--md-on-surface-variant);
}

.paywall__cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  height: var(--control-h);
  padding: 0 var(--space-6);
  background: var(--md-primary);
  color: var(--md-on-primary);
  border: 0;
  border-radius: var(--radius-md);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);
}

.paywall__form {
  display: contents;
}

/* Foreground-overlay hover/active per slice B Drift (g) — the same
   white-on-tomato treatment the signin submit uses. */
.paywall__cta.state-layer::after {
  background: var(--md-on-surface);
}

.paywall__cta:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

}