/* ZenithUI — ZenPageLayout / ZenPageHeader
 * The page-pattern anatomy: one repeated rhythm (header -> toolbar -> body)
 * and one repeated header shape (breadcrumb -> title + actions -> description)
 * so every module reads as the same product. Content-side chrome: theme
 * tokens (NOT shell tokens) — pages follow the user's light/dark choice.
 */
@layer zenith-components {
  .zen-page {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-5, 20px);
    min-width: 0;
  }

  /* Constrained pages (forms, detail) — readable line lengths, centered. */
  .zen-page--constrained {
    max-width: var(--zen-page-max-width, 720px);
    margin-inline: auto;
    width: 100%;
  }

  /* ─────────────────────────────────────────────
     Page header
     ───────────────────────────────────────────── */
  .zen-page-header {
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-2, 8px);
  }

  .zen-page-header__breadcrumb {
    font-size: var(--zen-font-size-sm, 0.75rem);
  }

  .zen-page-header__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--zen-space-4, 16px);
    flex-wrap: wrap;
  }

  .zen-page-header__heading {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-1, 4px);
  }

  .zen-page-header__title {
    margin: 0;
    font-size: var(--zen-font-size-2xl, 1.5rem);
    font-weight: var(--zen-font-weight-semibold, 600);
    line-height: var(--zen-line-height-tight, 1.25);
    color: var(--zen-text-primary);
    display: flex;
    align-items: center;
    gap: var(--zen-space-2, 8px);
    flex-wrap: wrap;
  }

  .zen-page-header__description {
    margin: 0;
    font-size: var(--zen-font-size-sm, 0.75rem);
    color: var(--zen-text-tertiary);
    max-width: 70ch;
  }

  .zen-page-header__actions {
    display: flex;
    align-items: center;
    gap: var(--zen-space-2, 8px);
    flex-shrink: 0;
    flex-wrap: wrap;
  }

  /* ─────────────────────────────────────────────
     Toolbar strip (list pages: filters + quick actions)
     ───────────────────────────────────────────── */
  .zen-page__toolbar {
    display: flex;
    align-items: center;
    gap: var(--zen-space-3, 12px);
    flex-wrap: wrap;
  }

  /* Push everything after the spacer to the right (export, view toggles). */
  .zen-page__toolbar-spacer {
    flex: 1 1 auto;
  }

  .zen-page__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--zen-space-5, 20px);
  }
}