/* Status page.

   Centered editorial state for empty / 404 / 500 pages — mascot,
   heading, body copy, and a single primary CTA. The page-frame
   variants (404 vs empty saved vs server error) only swap copy and
   CTA target; the visual shape is constant.

   Used in: /404 + 500 handlers, /saved (empty state), /dev/playground/status-page.

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

@layer components {
  .status-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--space-section) var(--space-page);
  }

  /* The .status-page root is a full-viewport centering shell; the inner
     content column takes the --content-form tier (spacing-foundation D2).
     Was 28rem (448px); --content-form is 512px, an intended widening. */
  .status-page__inner {
    max-width: var(--content-form);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
  }

  .status-page__mascot {
    width: 80px;
    height: 80px;
    margin-block-end: var(--space-4);
  }

  .status-page__heading {
    font-family: var(--font-heading);
    font-size: var(--text-3xl);
    font-weight: 500;
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  .status-page__body {
    color: var(--md-on-surface-variant);
    font-size: var(--text-base);
    text-wrap: pretty;
  }

  .status-page__cta {
    margin-block-start: var(--space-4);
    display: inline-flex;
    align-items: center;
    padding: var(--space-3) var(--space-6);
    background: var(--md-primary);
    color: var(--md-on-primary);
    border-radius: var(--radius-pill);
    font-weight: 500;
    font-size: var(--text-sm);
    transition:
      background-color var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects),
      transform var(--motion-spring-fast-effects-duration) var(--motion-spring-fast-effects);

    /* The CTA opts into .state-layer (globals.css) for the hover/active
       overlay per slice B Drift (g); see paste-form.css for the
       foreground-overlay rationale on white-on-tomato surfaces. */
    &.state-layer::after {
      background: var(--md-on-surface);
    }

    &:is(:active, [data-force~="active"]),
    [data-force~="active"] & {
      transform: translateY(1px);
    }
  }
}