@layer components {
  /* Generic panel container */
  .panel {
    --panel-bg: var(--color-canvas);
    --panel-padding: var(--block-space) var(--inline-space);

    background-color: var(--panel-bg);
    padding: var(--panel-padding);
  }

  /* Clear the fixed mobile tab-bar so a panel's trailing content (e.g. a
     form's submit button) isn't hidden behind it. The editor/chat panes
     handle this with their own sticky action bars; the generic panel didn't. */
  @media (max-width: 799px) {
    .panel {
      padding-block-end: calc(var(--tab-bar-height) + var(--safe-inset-bottom) + var(--block-space));
    }
  }

  .panel--surface {
    --panel-bg: var(--color-surface);
    border-radius: var(--radius);
  }

  .panel--bordered {
    border: var(--border);
    border-radius: var(--radius);
  }

  /* Panel header */
  .panel__header {
    align-items: center;
    display: flex;
    gap: var(--inline-space);
    justify-content: space-between;
    margin-block-end: var(--block-space);
  }

  .panel__title {
    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. */
  .panel :is(.input, .textarea) {
    font-family: var(--font-prose);
    font-size: 0.9375rem;
  }

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

  /* Versions: ruled rows of dates. */
  .version-list {
    border-block-end: var(--border);
    margin-block-start: var(--block-space);
  }

  .version-list__link {
    border-block-start: var(--border);
    color: var(--color-ink);
    display: block;
    font-variant-numeric: tabular-nums;
    padding-block: calc(var(--block-space) * 0.75);
    text-decoration: none;
    transition: background-color var(--transition-fast);
  }

  @media (hover: hover) {
    .version-list__link:hover {
      background-color: var(--color-surface);
    }
  }

  /* Empty state: one quiet line and the action that fills it. */
  .empty-state {
    align-items: flex-start;
    color: var(--color-ink-muted);
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
    padding: calc(var(--block-space) * 1.25) var(--inline-space);
  }

  .empty-state__heading {
    color: var(--color-ink-secondary);
    font-size: var(--text-normal);
    font-weight: 500;
  }

  .empty-state__description {
    font-size: 0.875rem;
    max-inline-size: 24rem;
  }

  /* The loading line every wait the writer starts shows. Its spinner loops
     only while the wait lasts: the line goes when the wait ends. */
  .loading-line {
    align-items: center;
    color: var(--color-ink-muted);
    display: flex;
    font-size: 0.875rem;
    gap: var(--inline-space-half);
    margin: 0;
  }

  .loading-line__spinner {
    animation: loading-line-spin 1s linear infinite;
    block-size: 1rem;
    border: 2px solid var(--color-ink-muted);
    border-block-start-color: transparent;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    inline-size: 1rem;
  }

  @keyframes loading-line-spin {
    to { transform: rotate(360deg); }
  }
}