/* Back tile on global page headers — same look as the project header's back arrow */
.pgBack5Host { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.pgBack5Host > :not(.pgBack5) { grid-column: 2; min-width: 0; }
.pgBack5 {
  grid-column: 1; grid-row: 1 / span 6; align-self: center;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 12px; cursor: pointer;
  background: color-mix(in srgb, var(--st-primary, #167da0) 10%, var(--st-surface, #fff)); color: var(--st-primary, #167da0);
  transition: background-color .15s ease, transform .15s ease;
}
.pgBack5 svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.pgBack5:hover { background: color-mix(in srgb, var(--st-primary, #167da0) 18%, var(--st-surface, #fff)); transform: translateX(-1px); }
.pgBack5:focus-visible { outline: 2px solid var(--st-primary, #167da0); outline-offset: 2px; }
/* New Project: the header's right-hand "Back to projects" button is replaced by the tile (markup kept) */
#viewNewProject .pageHead [data-np-cancel] { display: none; }
/* Workspace Settings / Integrations headers sat flush against the top edge — same 24px rhythm as the other pages */
#viewWorkspace .tab-panel-inner > .pageHead:first-child { margin-top: 24px; }

/* Header card — same card as the project header: back tile, title, one-line description, actions on the right */
.pgBack5Head {
  display: flex !important; align-items: center; justify-content: space-between; gap: 20px; min-height: 58px;
  margin-bottom: 18px; padding: 16px 20px; border: 1px solid var(--st-line, #cddfe4); border-radius: 18px;
  background: radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--st-primary-2, #24aa9f) 14%, transparent), transparent 40%), linear-gradient(135deg, var(--st-surface, #fff), color-mix(in srgb, var(--st-soft, #deeff7) 70%, var(--st-surface, #fff)));
  box-shadow: var(--st-shadow, 0 14px 40px rgba(21, 82, 101, .12)); color: var(--st-ink, #17252b);
}
.pgBack5Head > .pgBack5Host { flex: 1 1 auto; min-width: 0; }
.pgBack5Head > :not(.pgBack5Host) { flex: 0 0 auto; }
.pgBack5Head .eyebrow, .pgBack5Head [class*="eyebrow"] { display: none; }
.pgBack5Head h1 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.pgBack5Head p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--st-muted, #566a73); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 700px) { .pgBack5Head { flex-wrap: wrap; padding: 14px 16px; } .pgBack5Head > :not(.pgBack5Host) { flex: 1 1 100%; } }

/* Projects page: the SAME header card as Build Queue / Approvals / Users. It is the Projects page itself, so the tile is a (non-interactive)
   Projects icon instead of a back arrow; the primary action keeps the Create-user button's proportions. */
/* (specificity matches projects-v5.css's own `#viewProjects .pv5 .pd-header.page-header.pv5-head { margin-top:0; padding-top:24px }`, which left the card flush to the top edge) */
#viewProjects .pv5 .pd-header.page-header.pv5-head.pgBack5Head { align-items: center; margin: 24px 24px 18px; padding: 16px 20px; }
#viewProjects .pv5-head.pgBack5Head .pd-title { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: inherit; }
#viewProjects .pv5-head.pgBack5Head .pv5-sub { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--st-muted, #566a73); }
#viewProjects .pv5-head.pgBack5Head .pv5-new { height: 45px; padding: 0 14px; border-radius: 9px; }
.pgHeadIcon { cursor: default; pointer-events: none; }
.pgHeadIcon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
@media (max-width: 700px) { #viewProjects .pv5-head.pgBack5Head .pv5-new { justify-content: center; } }

/* phone: stack the Projects header so "New Project" is never pushed past the viewport (it sat at x=365 of 390) */
@media (max-width: 700px) {
  #viewProjects .pv5 .pd-header.page-header.pv5-head.pgBack5Head { flex-direction: column; align-items: stretch; margin: 16px 16px 14px; }
  #viewProjects .pv5-head.pgBack5Head .pv5-new { width: 100%; flex: 0 0 auto; }
}

/* Settings (V5): same header card as the other global pages. Settings keeps its own existing back tile (#settingsBackBtn) — no second one is added. */
#viewSettings .st5-head {
  display: flex; align-items: center; justify-content: flex-start; gap: 14px; min-height: 58px; margin: 0 0 18px; padding: 16px 20px;
  border: 1px solid var(--st-line, #cddfe4); border-radius: 18px; color: var(--st-ink, #17252b);
  background: radial-gradient(circle at 92% 0%, color-mix(in srgb, var(--st-primary-2, #24aa9f) 14%, transparent), transparent 40%), linear-gradient(135deg, var(--st-surface, #fff), color-mix(in srgb, var(--st-soft, #deeff7) 70%, var(--st-surface, #fff)));
  box-shadow: var(--st-shadow, 0 14px 40px rgba(21, 82, 101, .12));
}
#viewSettings .st5-head .st5-eyebrow { display: none; }
#viewSettings .st5-head h1 { margin: 0; font-size: 22px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
#viewSettings .st5-head p { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--st-muted, #566a73); }
@media (max-width: 700px) { #viewSettings .st5-head { padding: 14px 16px; } }