@layer modules {

  .forms-index {
    width: 100%;
  }

  .forms-index__header {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .forms-index__title {
    font-weight: var(--font-weight-bold);
    font-size: var(--text-4xl);
    line-height: var(--text-4xl--line-height);
  }

  .forms-index__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .forms-index__body {
    min-width: 100%;
  }

  .forms-empty {
    text-align: center;
    padding-block: 3rem;
  }

  .forms-empty__icon {
    margin-inline: auto;
    height: 3rem;
    width: 3rem;
    color: var(--color-gray-400);
  }

  .forms-empty__title {
    margin-top: 0.5rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-900);
  }

  .forms-empty__text {
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-gray-500);
  }

  .forms-empty__cta {
    margin-top: 1.5rem;
  }

  .forms-show {
    margin-inline: auto;
    width: 100%;

    @media (min-width: 48rem) {
      width: 66.6667%;
    }
  }

  .forms-show__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    padding-top: 1rem;
    margin-bottom: 1.25rem;
  }

  .forms-show__identity {
    flex: 1 1 18rem;
    min-width: 0;
  }

  .forms-show__title {
    font-weight: var(--font-weight-extrabold);
    font-size: var(--text-3xl);
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  .forms-show__lede {
    margin-top: 0.625rem;
    max-width: 62ch;
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    color: var(--color-text-soft);
    text-wrap: pretty;
    white-space: pre-line;
  }

  .forms-show__lede--blank {
    color: var(--color-text-muted);
  }

  .forms-show__state {
    margin-inline-start: 0.5rem;
    vertical-align: middle;
  }

  .forms-show__state--stamped {
    --stamp-opacity: 1;
    animation: var(--animate-stamp);
  }

  .forms-show__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    margin-inline-start: auto;

    & .btn {
      --btn-padding: 0.5rem 1rem;
    }
  }

  .forms-show__actions :is(.forms-bell, .forms-show__more) {
    --btn-padding: 0.5rem;
    font-size: var(--text-xl);
  }

  .forms-bell {
    display: inline-grid;

    &:disabled {
      opacity: 1;
    }

    &::after {
      display: none;
    }

    > .icon {
      grid-area: 1 / 1;
    }
  }

  .forms-bell--toggled .forms-bell__slash {
    animation: slash-draw 0.5s var(--ease-in-out);
  }

  .forms-bell--toggled.forms-bell--on .forms-bell__slash {
    animation-name: slash-erase;
  }

  .forms-bell--on .forms-bell__slash {
    clip-path: inset(0 100% 100% 0);
  }

  .forms-show__card {
    margin-bottom: 1.5rem;
  }

  .forms-notice {
    max-width: 62ch;
    margin-bottom: 0.875rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  .forms-meta {
    --raised-bg: var(--color-gray-500);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    margin-bottom: 1.75rem;
    padding: 1rem;
    border-radius: var(--radius-2xl);
    background: var(--gradient-pillow);
    box-shadow: var(--shadow-pillow);
  }

  .forms-meta--shared {
    --raised-bg: var(--color-blue-600);
  }

  .forms-meta__sharing {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex: 1 1 22rem;
    padding-inline-start: 0.25rem;
  }

  .forms-meta__disc {
    --icon-size: 1.25rem;
    --raised-sheen-amount: 30%;

    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-full);
    color: var(--color-white);
    background-image: var(--raised-sheen);
    box-shadow: var(--bevel-sm), 0 2px 6px -1px color-mix(in srgb, var(--raised-bg) 40%, transparent);
  }

  .forms-meta__title {
    font-size: var(--text-base);
    line-height: var(--text-base--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
  }

  .forms-meta__note {
    max-width: 58ch;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--color-text-muted);
    text-wrap: pretty;
  }

  .forms-meta__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    flex: 1 1 18rem;
    max-width: 22rem;

    @media (width < 40rem) {
      max-width: none;
    }
  }

  .forms-meta__fact {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-lg);
    background-color: color-mix(in srgb, var(--color-slate-100) 70%, transparent);
    box-shadow: var(--bevel-well);

    dt {
      font-size: var(--text-xs);
      line-height: var(--text-xs--line-height);
      font-weight: var(--font-weight-medium);
      letter-spacing: var(--tracking-wide);
      color: var(--color-text-muted);
    }

    dd {
      font-size: var(--text-sm);
      line-height: var(--text-sm--line-height);
      color: var(--color-text);
    }
  }

  .forms-share {
    & > :not(:last-child) {
      margin-bottom: 1rem;
    }
  }

  /* Share panel reuses .empty-state; only the padding and the gap below the
     blurb before the generate button are feature-specific. */
  .empty-state--forms-share {
    --empty-state-padding-block: 1.5rem;
  }

  .empty-state--forms-share .empty-state__text {
    margin-bottom: 1rem;
  }
}