@layer layout {
  .fp-shell {
    min-height: 100vh;
  }

  .fp-shell__header {
    position: sticky;
    top: 0;
    z-index: var(--fp-z-header);
  }

  .fp-shell__main,
  .fp-page {
    width: min(100% - 2rem, var(--fp-content-max));
    margin-inline: auto;
  }

  .fp-page--wide {
    width: min(100% - 2rem, var(--fp-admin-content-max));
  }

  .fp-page--narrow {
    width: min(100% - 2rem, 820px);
  }

  .fp-page--admin {
    width: min(100% - 2rem, var(--fp-admin-content-max));
  }

  .fp-stack {
    display: grid;
    gap: var(--fp-space-4);
  }

  .fp-stack--tight {
    gap: var(--fp-space-2);
  }

  .fp-grid {
    display: grid;
    gap: var(--fp-space-4);
  }

  .fp-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fp-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .fp-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .fp-form-grid {
    display: grid;
    gap: var(--fp-space-4);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }

  .fp-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--fp-space-3);
  }

  .fp-card-grid {
    display: grid;
    gap: var(--fp-space-4);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }

  .fp-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--fp-color-border-subtle);
    border-radius: var(--fp-radius-lg);
  }

  .fp-section-header,
  .fp-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--fp-space-4);
    margin-bottom: var(--fp-space-4);
  }

  .fp-page-header__text {
    min-width: 0;
  }

  .fp-page-header__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--fp-space-2);
  }

  @media (max-width: 768px) {
    .fp-shell__main,
    .fp-page,
    .fp-page--wide,
    .fp-page--admin,
    .fp-page--narrow {
      width: min(100% - 1rem, 100%);
    }

    .fp-grid--2,
    .fp-grid--3,
    .fp-grid--4 {
      grid-template-columns: 1fr;
    }

    .fp-page-header {
      display: grid;
    }

    .fp-page-header__actions {
      justify-content: flex-start;
    }
  }
}