/* ── Shared page header ───────────────────────────────────────────────────────
   One consistent top bar for the app's secondary pages (settings.html,
   help.html, docs.html): the page title on the left and a "← Back to Builder"
   link on the right, with the same type scale, colours and spacing. Kept in its
   own file so each standalone page can opt in without pulling the app's CSS. */

.page-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 14px 24px;
}

.page-header-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-header-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  color: #111827;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.page-header-back {
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
  white-space: nowrap;
}
.page-header-back:hover { text-decoration: underline; }

.page-header-subtitle {
  margin: 0;
  font-size: 13px;
  color: #6b7280;
}

.page-header-search {
  width: 100%;
  max-width: 520px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  background: #f8fafc;
  color: #111827;
  box-sizing: border-box;
}
.page-header-search:focus { outline: 2px solid #2563eb; outline-offset: 0; }

/* Inline search variant (docs portal + help keep their filter inside the bar).
   The search takes the free space (margin-left:auto) so it is right-anchored;
   the following back link then sits immediately after it, giving an identical
   search position on every page regardless of the title width. */
.page-header-search--inline {
  width: 320px;
  max-width: 40vw;
  margin: 0 0 0 auto;
}
.page-header-search--inline + .page-header-back {
  margin-left: 0;
}

.page-header-count {
  font-size: 12px;
  color: #6b7280;
  min-height: 14px;
}