/* ==========================================================================
   header-service.css — single-state header for authed app pages
   (cabinet, settings, booking flow, public auth-aware pages).
   Reuses the generic .bar grid / nav / hamburger atoms from header.css; locks
   the chrome into the "strip" visual (full-width, no pill, no scroll-snap)
   and adds the right-group atoms that replace guest CTAs:

     <header class="site service">
       <div class="bar">
         <button class="hamburger">…</button>
         <a class="brand"><img class="logo"></a>
         <nav class="primary"> … </nav>
         <div class="auth-actions">
           <a class="verify-chip">…</a>
           <button class="bell">…</button>
           <a class="user-pill">…</a>
         </div>
       </div>
     </header>

   No JS needed: position: sticky pins to top on scroll, no class toggle.
   ========================================================================== */


/* ── Chrome: lock the floating-pill defaults from header.css into the strip
      visual. Same layout token as header.site.scrolled, applied always.       */
header.site.service {
  position: sticky;
  top: 0;
  /* Cancel the left/transform centering that header.css applies for
     fixed-positioned floating pill. */
  left: auto;
  right: auto;
  transform: none;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  z-index: 50;
  /* Soft drop only — no 1px hairline. The strip floats over content
     instead of sitting on a divider line. */
  box-shadow: 0 4px 14px rgba(var(--ink-rgb), .04);
  transition: none;
}

header.site.service .bar {
  height: 56px;
  /* Full-width strip — brand hugs the left viewport edge, auth-actions hug
     the right edge. Only --container-pad keeps content off the absolute
     screen edge. The internal grid still centers the nav on the viewport
     midline because the bar itself is symmetric. */
  max-width: none;
  margin: 0;
  padding: 0 var(--container-pad);
  transition: none;
}

header.site.service.scrolled {
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 0 !important;
  background: var(--bg) !important;
  box-shadow: 0 4px 14px rgba(var(--ink-rgb), .04) !important;
}

header.site.service.scrolled .bar {
  height: 56px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 var(--container-pad) !important;
}


/* Primary nav items get a leading Solar icon in the service header. */
header.site.service nav.primary { gap: var(--space-8); position: relative; min-width: 0; }

/* "···" button for links that don't fit the bar — same pill as a nav link. */
header.site.service nav.primary a.nav-more {
  justify-content: center;
  width: 36px;
  padding: 0;
}
header.site.service nav.primary a.nav-more .nav-icon { margin: 0; }

/* Off-screen copy of the links, only used to measure their widths. Anchored
   right so it overflows leftward, which never adds a horizontal scrollbar. */
header.site.service nav.primary .nav-measure {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  width: max-content;
  visibility: hidden;
  pointer-events: none;
}

/* Overflow dropdown rows: icon, label, optional count. */
.sm-user-menu .nav-more__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.sm-user-menu .nav-more__item .nav-count {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--pill);
  background: var(--brand-soft-2);
  color: var(--brand-ink);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  line-height: 18px;
  text-align: center;
}
header.site.service nav.primary a {
  gap: var(--space-8);
  padding: 0 var(--space-18);
}
header.site.service nav.primary a .nav-icon {
  width: 18px;
  height: 18px;
  color: var(--ink-3);
  flex-shrink: 0;
}
header.site.service nav.primary a:hover .nav-icon { color: var(--ink); }
header.site.service nav.primary a.active .nav-icon { color: var(--brand-ink); }

/* Inline count badge next to nav label (Favorites, Inbox). */
header.site.service nav.primary a .nav-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 var(--space-6);
  background: var(--bg-3);
  color: var(--ink-2);
  border-radius: var(--pill);
  font-size: var(--fs-count-sm);
  font-weight: var(--fw-bold);
  line-height: 1;
}
header.site.service nav.primary a:hover .nav-count {
  background: var(--bg);
  color: var(--ink);
}
header.site.service nav.primary a.active .nav-count {
  background: var(--brand);
  color: white;
}


/* ── Right-group atoms ─────────────────────────────────────────────────── */
/* Verify-identity chip */
.auth-actions .verify-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-7);
  height: 36px;
  padding: 0 var(--space-14);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
  white-space: nowrap;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.auth-actions .verify-chip:hover {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--bg-3);
}
.auth-actions .verify-chip .warn {
  width: 16px;
  height: 16px;
  color: var(--star);
  flex-shrink: 0;
}

/* Notification bell */
.auth-actions .bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-3);
  border: 0;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.auth-actions .bell:hover {
  background: var(--brand-soft);
  color: var(--brand-ink);
}
.auth-actions .bell:hover svg,
.auth-actions .bell:hover i,
.auth-actions .bell:hover .bell-icon,
.auth-actions .bell:hover path {
  color: var(--brand-ink) !important;
  fill: var(--brand-ink) !important;
}
.auth-actions .bell svg,
.auth-actions .bell i,
.auth-actions .bell .bell-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.auth-actions .bell .badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-5);
  background: var(--brand);
  color: white;
  border-radius: var(--pill);
  font-size: var(--fs-count-sm);
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-align: center;
  /* Strip header always sits on solid --bg, so the badge ring matches that. */
  border: 2px solid var(--bg);
}

/* User pill (avatar + name + dropdown caret) */
.auth-actions .user-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  height: 36px;
  padding: 0 var(--space-10) 0 var(--space-3);
  border: 0;
  border-radius: var(--pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.auth-actions .user-pill:hover {
  background: var(--bg-3);
  color: var(--ink);
}
.auth-actions .user-pill .caret {
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.auth-actions .user-pill .avatar {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  color: white;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  overflow: hidden;
}
.auth-actions .user-pill .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* Tablet + mobile: keep the strip full-bleed flush to the top (no side
     gaps, no top inset). Reverts the earlier 8px-gap experiment per design
     direction — the strip should occupy the entire top edge. */
  header.site.service {
    width: 100%;
    margin: 0;
    border-radius: 0;
    top: 0;
  }
  header.site.service .bar { height: 52px; }
}
@media (max-width: 720px) {
  header.site.service .bar { padding: 0 var(--space-12); }
  /* Hide chip text + name + caret to save space, keep glyphs only */
  .auth-actions .verify-chip span:not(.warn) { display: none; }
  .auth-actions .verify-chip { padding: 0 var(--space-10); width: 36px; justify-content: center; }
  .auth-actions .user-pill .name { display: none; }
  .auth-actions .user-pill .caret { display: none; }
  .auth-actions .user-pill { padding: 0; width: 36px; justify-content: center; }
  .auth-actions .user-pill .avatar { width: 28px; height: 28px; flex: 0 0 28px; margin: 0 auto; }
}