/* =========================================================
   Zeal Portal — Page head (Tier 3 functional crown)

   Title + inline supporting metadata (path or counters) on the
   left; action cluster on the right. The whole row sits above
   an optional description on its own line. An eyebrow stays
   above the title for register consistency across surfaces.

   Used by User Admin today. Studio Manager, Roadmap, Profile,
   and any future Tier 3 list will pick it up next.

   Markup:
     <header class="page-head">
       <div class="page-head__row">
         <div class="page-head__main">
           <div class="page-head__eyebrow">user admin</div>
           <div class="page-head__titleline">
             <h1 class="page-head__title">users</h1>
             <span class="page-head__path">tools / access control</span>
           </div>
           <div class="page-head__meta">
             <div class="page-head__meta-item">active <b>24</b></div>
             …
           </div>
         </div>
         <div class="page-head__actions">…buttons…</div>
       </div>
       <p class="page-head__desc">…</p>
     </header>
   ========================================================= */

.page-head {
  padding: 24px 0 18px;
  /* the crown rule is a structural line — ink in the working register */
  border-bottom: 1px solid var(--rule-structural, var(--rule, rgba(0, 0, 0, 0.08)));
  margin-bottom: 20px;
}
.page-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.page-head__main { min-width: 0; }
.page-head__eyebrow {
  font-family: var(--font-cd);
  font-weight: var(--w-medium, 500);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-bottom: 6px;
}
.page-head__titleline {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.page-head__title {
  font-family: var(--font-ex);
  font-weight: var(--w-bold, 700);
  font-size: 28px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: lowercase;
  margin: 0;
  color: var(--ink, #000);
}
.page-head__path {
  font-family: var(--font-cd);
  font-weight: var(--w-medium, 500);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-transform: none;
}
.page-head__meta {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-family: var(--font-cd);
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  letter-spacing: 0.04em;
}
.page-head__meta-item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.page-head__meta-item b {
  font-family: var(--font-std);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #000);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.page-head__meta-item b.accent { color: var(--accent, var(--zeal-orange)); }
.page-head__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.page-head__desc {
  font-family: var(--font-std);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2, rgba(0, 0, 0, 0.72));
  max-width: 640px;
  margin: 8px 0 0;
}