/*
 * Page header — the "what is this page" block at the top of the app pages.
 *
 * An icon chip beside the title, and under the title a one-line intro that says what the page
 * shows and how it works. That line is the point: a first-time visitor should never have to
 * guess what a screen is for. The intro is capped at the reading measure so it stays one calm
 * sentence on wide screens instead of a wall of text.
 */

.page-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.page-header__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: var(--colour-primary-surface);
    color: var(--colour-primary);
    border-radius: var(--radius-md);
}

.page-header__body {
    min-width: 0;
}

.page-header__title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--colour-ink);
    margin: 0;
    line-height: var(--leading-tight);
}

.page-header__intro {
    font-size: var(--text-sm);
    color: var(--colour-ink-quiet);
    line-height: var(--leading-body);
    margin: var(--space-1) 0 0;
    max-width: var(--measure);
}