/* ─── page chrome: back-link header ────────────────────────────────
   The minimal sticky "frosted bar" header used by every standalone page
   reached from the H0M3 hub — /flow, /logs, /stats, /settings. A back
   link to H0M3 on the left, then either a page title or (on /logs) a
   createTabStrip sub-tab nav. The operator dashboard uses its own richer
   sticky chrome (`.dashboard-chrome`); these classes cover the simple
   pages.

   Shared across packages via @hive/shared so a new page only links the
   stylesheet + writes the three-element header markup:

     <header class="page-header">
       <a class="page-back" href="/">← home</a>
       <span class="page-title">TITLE</span>
     </header>
*/
.page-header {
  /* Stickiness lives on the `.sticky-top` wrapper (common.css) that
     common.js wraps this header in, alongside the server-warning banner,
     so the two stack instead of colliding. */
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  border-bottom: 1px solid var(--purple-dim);
  display: flex;
  /* Keep the back-link + sub-tab nav on one row. Without an explicit
     nowrap a flex:1 sub-tab strip (e.g. /logs.html's `.logs-tabbar`)
     whose intrinsic min-content width can't shrink (default
     `min-width: auto`) gets pushed onto its own line. The strip pairs
     this with `min-width: 0` so it can shrink instead of wrapping. */
  flex-wrap: nowrap;
  align-items: center;
  gap: 1.5em;
  padding: 0.5em 1.5em;
}

.page-back {
  color: var(--purple);
  text-decoration: none;
  font-size: 0.88em;
  white-space: nowrap;
  flex: none;
}
.page-back:hover { text-decoration: underline; }

.page-title {
  color: var(--subtext0);
  font-size: 0.85em;
  letter-spacing: 0.05em;
  flex: none;
}