.site-header{
  position: sticky;
  top: 0;
  z-index: 1200;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  justify-content: center;
}

/* Header row: left brand, centered admin group (absolute), right nav */
.header-row{
  position: relative; /* enables absolute centering for admin group */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
}

/* Brand (left) */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:inherit;
}
.brand-mark{
  width:36px; height:36px; border-radius:8px;
  display:grid; place-items:center; font-weight:800;
}
.brand-title{ font-weight:800; letter-spacing:.2px; }
.brand-subtitle{ font-size:.9rem; }

/* Center column: admin quick-links */
.admin-topnav{
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; align-items: center;
}

/* Right column: push to the right */
.primary-nav{
  justify-self: end;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}

/* prevent label wrapping inside pills */
.site-header .admin-topnav .btn,
.site-header .primary-nav .btn { white-space: nowrap; }

/* --- Header re-layout: use CSS grid instead of absolute centering --- */

/* wipe the old flex/absolute assumptions */
.header-row { position: static; }

.brand{ justify-self: start; display:flex; align-items:center; gap:12px; }
.admin-topnav{ justify-self: center; display:flex; gap:8px; align-items:center; }
.primary-nav{ justify-self: end; display:flex; gap:8px; align-items:center; flex-wrap: nowrap; }

/* consistent pill sizing in the header */
.site-header .btn,
.site-header .btn.sm { padding: 8px 12px; border-radius: 12px; white-space: nowrap; }

/* mobile/tablet: brand + user pills on top row, admin links full-width under */
@media (max-width: 920px){
  .header-row{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand primary"
      "admin admin";
    row-gap: 8px;
  }
  .brand{ grid-area: brand; }
  .primary-nav{ grid-area: primary; }
  .admin-topnav{
    grid-area: admin;
    justify-self: stretch;
    justify-content: center;
    flex-wrap: wrap;
  }
}


/* left brand */
.brand{ display:flex; align-items:center; gap:12px; justify-self: start; }

/* center: compact admin quick links */
.admin-topnav{
  justify-self: center;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
.site-header .admin-topnav .btn,
.site-header .admin-topnav .btn.sm{
  padding: 6px 10px;            /* compact */
  border-radius: 10px;
  font-size: .95rem;
  line-height: 1.2;
}

/* right: admin email (transparent mini) + sign out */
.primary-nav{
  justify-self: end;
  display:flex; gap:8px; align-items:center; flex-wrap:nowrap;
}

/* make the readonly email pill subtle (even if template still says .secondary) */
.site-header .primary-nav .btn.is-static{
  cursor: default;
  pointer-events: none;
  opacity: .95;
}

/* keep all header pills one-line & same height */
.site-header .btn{ white-space: nowrap; }

/* ===== Header: compact pills & brand tweaks (admin view) ===== */

/* slightly smaller brand block so the center group feels roomier */
.site-header .brand-mark{ width:28px; height:28px; border-radius:8px; }
.site-header .brand-title{ font-size:1.02rem; }
.site-header .brand-subtitle{ font-size:.85rem; }

/* tighter gaps for both center admin group and right-side group */
.admin-topnav{ gap:6px; }
.primary-nav{ gap:6px; }

/* compact pill sizing inside the header (affects center + right) */
.site-header .btn,
.site-header .btn.sm{
  padding: 4px 8px;        /* was ~8x12 */
  font-size: .88rem;        /* a touch smaller */
  line-height: 1.2;
  border-radius: 10px;      /* slightly tighter corners */
}

/* the read-only email "pill" should be subtle/transparent */
.site-header .primary-nav .btn.is-static{
  pointer-events: none;
  opacity: .95;
  padding: 4px 8px;        /* was ~8x12 */
  font-size: .88rem;        /* a touch smaller */
  line-height: 1.2;
  border-radius: 10px;      /* slightly tighter corners */
}

/* optional: reduce inner icon/text spacing inside pills */
.site-header .btn > :where(svg, img, .emj){ margin-right: 6px; }

/* ===== FINAL COMPACT HEADER PILL OVERRIDES ===== */

/* grid layout is already set; we just tighten the pills */
.admin-topnav{ gap:6px !important; }
.primary-nav{ gap:6px !important; }

/* make all header pills smaller (center group + right group) */
.site-header .admin-topnav .btn,
.site-header .admin-topnav .btn.sm,
.site-header .primary-nav .btn,
.site-header .primary-nav .btn.sm{
  padding: 4px 10px !important;   /* ↓ smaller */
  font-size: .90rem !important;   /* ↓ smaller */
  line-height: 1.2 !important;
  border-radius: 10px !important;
}

/* tiny brand nudge (optional) */
.site-header .brand-mark{ width:28px; height:28px; border-radius:8px; }
.site-header .brand-title{ font-size:1.02rem; }
.site-header .brand-subtitle{ font-size:.85rem; }

/* the read-only email chip stays subtle */
.site-header .primary-nav .btn.is-static{
  pointer-events: none;
  opacity: .95;
}

/* tighten icon/text spacing inside header pills */
.site-header .btn > :where(svg, img){ margin-right: 6px; }

/* Header layout overrides moved from styles.css */
.header-row {
  width: min(1200px, calc(100% - 48px));
  margin: 12px auto 6px;
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  border-radius: 18px;
  background: color-mix(in oklab, var(--c-surface) 92%, rgba(255, 255, 255, 0.05));
  border: 1px solid color-mix(in oklab, var(--c-border) 70%, rgba(255, 255, 255, 0.35));
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

html[data-theme="light"] .header-row {
  background: color-mix(in oklab, var(--c-surface) 96%, rgba(255, 255, 255, 0.55));
  border-color: color-mix(in oklab, var(--c-border) 90%, rgba(15, 23, 42, 0.35));
  box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) .header-row {
    background: color-mix(in oklab, var(--c-surface) 96%, rgba(255, 255, 255, 0.55));
    border-color: color-mix(in oklab, var(--c-border) 90%, rgba(15, 23, 42, 0.35));
    box-shadow: 0 16px 30px rgba(15, 23, 42, 0.18);
  }
}
.admin-topnav {
  justify-self: center;
  display: flex;
  gap: 8px;
  align-items: center;
}
.primary-nav {
  justify-self: end;
  display: flex;
  gap: 8px;
  align-items: center;
}
@media (max-width: 820px){
  .admin-topnav{
    position: static;
    transform: none;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 8px;
  }
  .header-row{
    gap: 12px;
    padding: 12px 14px;
  }
}

/* Snap: hide header when snap mode present */
body.snap-mode .site-header{
  position: fixed;
  z-index: -10;
  opacity: 0;
  pointer-events: none;
}



/* =========================================================
   ADMIN HEADER — only apply 3-col grid when admin-topnav
   is present (Admin Dashboard + Compose Email links).
   When there's no center group, fall back to brand | right nav.
   ========================================================= */

/* Default admin: 2-col (brand left, auth right) */
body.is-admin .header-row {
  grid-template-columns: 1fr auto;
}
body.is-admin .primary-nav {
  grid-column: 2;
  justify-self: end;
}

/* Only when admin-topnav is present: 3-col centred layout */
body.is-admin .header-row:has(.admin-topnav) {
  grid-template-columns: 1fr auto 1fr;
}
body.is-admin .header-row:has(.admin-topnav) .admin-topnav {
  grid-column: 2;
  justify-self: center;
  white-space: nowrap;
}
body.is-admin .header-row:has(.admin-topnav) .primary-nav {
  grid-column: 3;
  justify-self: end;
}

body.is-admin .site-header .admin-topnav .btn,
body.is-admin .site-header .admin-topnav .btn.sm {
  font-size: 0.88rem;
  padding: 6px 12px;
  white-space: nowrap;
}
body.is-admin .site-header .primary-nav .btn,
body.is-admin .site-header .primary-nav .btn.sm {
  white-space: nowrap;
}