@layer components {
  /* Project list: ruled rows, not cards. */
  .project-list {
    display: grid;
    max-inline-size: 48rem;
    margin-inline: auto;
    padding: var(--block-space-quarter) var(--inline-space) var(--block-space);
  }

  .project-card {
    border-block-start: var(--border);
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
    gap: calc(var(--block-space) * 0.4);
    padding-block: calc(var(--block-space) * 0.9);
    text-decoration: none;
    transition: background-color var(--transition-fast);
  }

  .project-card:last-child {
    border-block-end: var(--border);
  }

  @media (hover: hover) {
    .project-card:hover {
      background-color: var(--color-surface);
    }
  }

  .project-card__title {
    font-family: var(--font-prose);
    font-size: var(--text-normal);
    font-weight: 500;
    min-inline-size: 0;
    overflow-wrap: anywhere;
  }

  .project-card__meta {
    color: var(--color-ink-muted);
    display: flex;
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    gap: var(--inline-space);
  }

  .project-card__genre {
    border: var(--border);
    border-radius: var(--radius);
    color: var(--color-ink-muted);
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.4;
    padding: 0 0.45em;
  }

  .project-card__logline {
    color: var(--color-ink-secondary);
    font-family: var(--font-prose);
    font-size: 0.8125rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Project form */
  .project-form {
    max-inline-size: 36rem;
    margin-inline: auto;
    padding: var(--block-space) var(--inline-space);
  }

  .project-form__header {
    margin-block-end: var(--block-space-double);
  }

  /* Full-page headings: the story's face, quiet. */
  :is(.projects-header, .project-form__header) h1 {
    font-family: var(--font-prose);
    font-size: var(--text-large);
    font-weight: 500;
    line-height: 1.3;
  }

  /* The writer's words about the story are typed in the story's face. */
  .project-form :is(.input, .textarea) {
    font-family: var(--font-prose);
    font-size: 0.9375rem;
  }

  .project-form :is(.input, .textarea)::placeholder {
    font-family: var(--font-sans);
  }

  .project-form__actions {
    display: flex;
    gap: var(--inline-space);
    margin-block-start: var(--block-space-double);
  }

  /* Project show -- editor placeholder.
   *
   * Lives inside .app-main__content (a flex column constrained by the layout
   * grid). Uses flex: 1 to fill remaining space rather than viewport-unit
   * min-height, which can't account for sibling elements (view-switcher,
   * flash messages) and produces unwanted scrollbars.
   */
  .project-workspace {
    align-items: center;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding: var(--block-space-double) var(--inline-space);
  }

  /* Project home. A definite inline size holds it to the main pane: sized by
     its auto margins alone, an unwrappable chat preview would widen it past
     the viewport. */
  .project-home {
    display: flex;
    flex-direction: column;
    gap: calc(var(--block-space) * 1.75);
    inline-size: 100%;
    margin-inline: auto;
    max-inline-size: var(--editor-max-width);
    padding: var(--block-space) var(--inline-space);
  }

  .project-home__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--block-space-half);
  }

  .project-home__title {
    font-family: var(--font-prose);
    font-size: var(--text-large);
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .project-home__logline {
    color: var(--color-ink-secondary);
    font-family: var(--font-prose);
    font-size: var(--text-small);
    line-height: 1.6;
  }

  .project-home__section {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  .project-home__section-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
  }

  /* Section headings are the app's labels: small sans in muted ink. */
  .project-home__heading {
    color: var(--color-ink-muted);
    font-size: var(--text-small);
    font-weight: 500;
  }

  .project-home__continue {
    border-block: var(--border);
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-quarter);
    padding-block: calc(var(--block-space) * 0.75);
    text-decoration: none;
    transition: background-color var(--transition-fast);
  }

  a.project-home__continue:hover {
    background-color: var(--color-surface);
  }

  .project-home__continue-title {
    font-family: var(--font-prose);
    font-size: var(--text-normal);
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  .project-home__continue-meta {
    color: var(--color-ink-muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
  }

  .project-home__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space-half);
  }

  /* Projects page header */
  .projects-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    max-inline-size: 48rem;
    margin-inline: auto;
    padding: var(--block-space) var(--inline-space);
  }

  /* Standalone projects page: the fixed mobile tab-bar is removed from flow,
     so reserve its full height (plus the existing content spacing) on the list
     and empty state so the last card / bottom content is not hidden behind it. */
  @media (max-width: 799px) {
    .projects:has(+ .tab-bar) > :is(.project-list, .empty-state) {
      padding-block-end: calc(var(--tab-bar-height) + var(--safe-inset-bottom) + var(--block-space));
    }
  }
}