/* ldu/page-header.css: the one page header (PageHeaderHelper#page_header; AGENTS.md "Page headers").

   The h1 and a one-sentence description under it on the left, the page's own actions at the top right; under 560px of header the
   actions drop below the text. Title: DM Sans display, --fs-h1 (24 to 32px), 600, ink. Description: --fs-body (16px), ink-2, 8px under
   the title, at most 75ch. A chip or a count in <small> may sit beside the title; an icon sits before it. The header has no outer margin:
   the page frame around it (.page.ldu-page's 32px gap, 24px on a phone) spaces it from what follows, and the rules at the end give the
   same spacing to the pages that are not one .page frame. Colours are tokens only; nothing here moves on hover. */

.page-header {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 16px 24px;
  min-width: 0; margin: 0; padding: 0; border: 0; background: none;
}
.page-header__text { display: grid; gap: 8px; flex: 1 1 320px; min-width: 0; }
.page-header__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin: 0; overflow-wrap: anywhere;
  font-family: var(--display); font-size: var(--fs-h1); font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink);
}
.page-header__title > :is(.icon, svg) { flex: none; width: 24px; height: 24px; color: var(--ink-3); }
.page-header__title > small { font-family: var(--sans); font-size: var(--fs-ui); font-weight: 400; letter-spacing: 0; color: var(--ink-2); }
.page-header__desc { max-width: 75ch; margin: 0; font-size: var(--fs-body); font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--ink-2); }
.page-header__desc a { text-underline-offset: 3px; transition: color var(--dur); }
.page-header__desc a:hover { color: color-mix(in oklab, var(--accent) 72%, var(--ink)); }
.page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; }
.page-header__actions > form { display: contents; }

/* ── where it sits ─────────────────────────────────────────────── */
/* In a .page.ldu-page frame the gap does it; the way back sits 12px above the title. */
.page.ldu-page > .backlink + .page-header, .page.ldu-page > .back-link + .page-header { margin-top: -20px; }
@media (max-width: 720px) { .page.ldu-page > .backlink + .page-header, .page.ldu-page > .back-link + .page-header { margin-top: -12px; } }

/* Straight in the content well (a header over .main--pad blocks): the page inset above and beside it, the same gap under it.
   The [data-herb-debug-outline-type] forms are for development only, where ReActionView's debug mode wraps a .html.herb view's output in a
   display: contents span (config/initializers/reactionview.rb). */
.main > .page-header, .main > [data-herb-debug-outline-type] > .page-header { padding: var(--pad-main, 32px) var(--pad-main, 32px) 0; }
.main > .page-header + .main--pad, .main > [data-herb-debug-outline-type]:has(> .page-header) + .main--pad { padding-top: var(--pad-main, 32px); }
.main > .main--pad:has(> :is(.backlink, .back-link)) { padding-top: var(--pad-main, 32px); padding-bottom: 0; }
.main > .main--pad:has(> :is(.backlink, .back-link)) ~ .page-header { padding-top: 12px; }   /* ~: a flash may sit between */
/* On a phone a plain .main--pad is inset 16px (comms/app.css): the header takes the same inset, so title and content share one edge. */
@media (max-width: 720px) {
  .main > .page-header:has(+ .main--pad:not(.ldu-page)) { padding-inline: 16px; }
}

/* Frames that space their own content 16px apart (the digital-twin pages, Offerings, My Agents): 16px more under the header. A live
   stream's tag takes no room but would be a grid item with a gap of its own, so it is kept out of the frame's grid. */
.page.ldu-page:is(.twin, .offers, .agentspage) > .page-header { margin-bottom: 16px; }
.page.ldu-page:is(.twin, .offers, .agentspage) > :is(.backlink, .back-link) + .page-header { margin-top: -4px; }   /* 12px under the way back */
@media (max-width: 720px) { .page.ldu-page:is(.twin, .offers, .agentspage) > .page-header { margin-bottom: 8px; } }
.page.ldu-page > turbo-cable-stream-source { display: none; }

/* The notes surface and the onboarding page pad themselves; the header only needs the gap under it. */
.surface > .page-header { margin-bottom: var(--pad-main, 32px); }
.obpage__main > .page-header { padding: 0 var(--pad-main, 32px); }
.obpage__main > .page-header + .main--pad { padding-top: var(--pad-main, 32px); }
@media (max-width: 720px) { .obpage__main > .page-header { padding-inline: 16px; } }   /* the phone inset of .main--pad */
.surface > .crumbs + .page-header { margin-top: 12px; }
.main > .backlink + .page-header { padding-top: 12px; }

/* A short status line among the actions (My Profile's LinkedIn line). */
.page-header__note { margin: 0; font-size: var(--fs-ui); line-height: 1.5; color: var(--ink-2); }