/*
 * Shared top utility bar — every owner/portal page.
 * Single horizontal strip across the top with left and right slots.
 * Replaces scattered fixed buttons (theme toggle, sign-in, sign-out, home,
 * camera, settings) so they stop fighting for corners.
 *
 * Layout:
 *   [☰] [logo|owner photo]                    [theme] [sign-in OR sign-out]
 *        ^left slot                                     ^right slot
 *
 * GEOMETRY IS NOT DEFINED HERE. Height, edge inset, control size and the
 * brand-mark size all come from header-contract.css, which the dashboard's
 * .profile-topbar and the aiexec.me .topnav read from too. That is what keeps
 * the three of them on the same pixel. Changing a number below that belongs in
 * the contract will put this bar back out of step with the other two.
 *
 * Z-index from --hdr-z — above signin-launcher (9500) and sip-logout-btn (9501),
 * because legacy free-floating versions auto-suppress when the bar is present.
 */

@import url('/prep/_shared/header-contract.css?v=20260816');

#sip-top-bar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  margin: 0 !important;
  /* Declared height — never derived from whichever controls this page renders.
     This bar used to measure 45px on a profile page and 49px on a talk page
     purely because one had a 28px pill and the other a 32px icon. */
  height: var(--hdr-h) !important;
  min-height: var(--hdr-h);
  max-height: var(--hdr-h);
  box-sizing: border-box;
  z-index: var(--hdr-z);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hdr-gap);
  padding: 0 var(--hdr-inset);
  background: var(--hdr-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hdr-line);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  pointer-events: none; /* container is click-through; children opt back in */
}

#sip-top-bar > * {
  pointer-events: auto;
}

#sip-top-bar .stb-slot {
  display: flex;
  align-items: center;
  gap: var(--hdr-gap);
  flex-wrap: nowrap;
  height: 100%;
  min-width: 0;
}

#sip-top-bar .stb-slot.left {
  justify-content: flex-start;
}

#sip-top-bar .stb-slot.right {
  justify-content: flex-end;
  flex-shrink: 0;
}

/* AI Executive logo link (unauthenticated left slot) */
.stb-logo-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;   /* same mark-to-wordmark gap as aiexec.me's .brand */
  text-decoration: none;
  /* No left padding: the mark's left edge IS the lockup's left edge, so it
     lands at burger + --hdr-gap, exactly like aiexec.me's .brand. A 3px inset
     here put the two marks 3px apart across the two surfaces. */
  padding: 3px 8px 3px 0;
  border-radius: 8px;
  transition: background 0.15s;
}
.stb-logo-link:hover { background: rgba(255,255,255,0.06); }
.stb-aiexec-logo {
  height: var(--hdr-mark);
  width: var(--hdr-mark);
  object-fit: cover;
  display: block;
  border-radius: 6px;
  flex: 0 0 auto;
}
.stb-aiexec-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--hdr-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
/* Full wordmark lockup (brand.lockupSrc) - one image carries mark + name, so
   no separate .stb-aiexec-name sits next to it. Height picked to clear
   comfortably inside --hdr-h (56px / 52px mobile) with margin, matching the
   real site's own header logo sizing rather than the small 26px square mark. */
.stb-brand-lockup {
  height: 34px;
  width: auto;
  max-width: 62vw;
  object-fit: contain;
  object-position: left center;
  display: block;
}
@media (max-width: 520px) {
  .stb-brand-lockup { height: 28px; }
}

/* Hamburger — the universal one. Geometry from the contract so it lands on the
   same pixel as the dashboard's and the marketing site's. Rendered on EVERY
   page now, signed in or out; see top-bar.js. */
#sip-top-bar .stb-burger {
  flex: 0 0 auto;
  width: var(--hdr-ctl);
  height: var(--hdr-ctl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 9px;
  background: rgba(148, 163, 184, 0.10);
  border: 1px solid rgba(148, 163, 184, 0.20);
  color: var(--hdr-fg);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
}
#sip-top-bar .stb-burger:hover {
  background: rgba(148, 163, 184, 0.20);
  border-color: rgba(148, 163, 184, 0.34);
}
#sip-top-bar .stb-burger:focus-visible { outline: 2px solid #6366F1; outline-offset: 2px; }
#sip-top-bar .stb-burger svg { width: 18px; height: 18px; display: block; }

/* Owner photo + HOME (authenticated left slot) */
.stb-owner-home {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  /* Same zero left padding as .stb-logo-link: the owner photo replaces the
     brand mark in this slot, so it has to start on the same x. */
  padding: 3px 10px 3px 0;
  border-radius: 8px;
  transition: background 0.15s;
}
.stb-owner-home:hover { background: rgba(255,255,255,0.06); }
.stb-owner-avatar {
  height: var(--hdr-mark);
  width: var(--hdr-mark);
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255,255,255,0.22);
  display: block;
}
.stb-home-label {
  font-size: 11px;
  font-weight: 700;
  color: #C7D2FE;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Generic pill button used by bar-native buttons */
.stb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(99, 102, 241, 0.14);
  border: 1px solid rgba(99, 102, 241, 0.32);
  color: #C7D2FE;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.18s ease;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.stb-btn:hover {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(99, 102, 241, 0.6);
  transform: translateY(-1px);
}
.stb-btn:active { transform: translateY(0); }

/* Icon-only square variant for theme/camera/settings */
.stb-icon {
  width: var(--hdr-ctl);
  height: var(--hdr-ctl);
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #E5E7EB;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.stb-icon:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

/* Sign-in pill — indigo */
.stb-btn.stb-signin {
  background: rgba(99, 102, 241, 0.14);
  border-color: rgba(99, 102, 241, 0.35);
  color: #A5B4FC;
}
.stb-btn.stb-signin:hover {
  background: rgba(99, 102, 241, 0.22);
  border-color: rgba(99, 102, 241, 0.6);
}
.stb-btn.stb-signin .stb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6366F1; box-shadow: 0 0 10px rgba(99,102,241,0.9);
}

/* Sign-out pill — red */
.stb-btn.stb-signout {
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.35);
  color: #FCA5A5;
}
.stb-btn.stb-signout:hover {
  background: rgba(248, 113, 113, 0.22);
  border-color: rgba(248, 113, 113, 0.6);
}
.stb-btn.stb-signout .stb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #F87171; box-shadow: 0 0 10px rgba(248,113,113,0.9);
}

/* Admin visiting a page they don't own — neutral preview badge, no Sign In/Out. */
.stb-admin-preview {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid rgba(251, 191, 36, 0.35);
  background: rgba(251, 191, 36, 0.10);
  color: #FCD34D;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: default;
  pointer-events: auto;
  user-select: none;
}

/* Page content reserves EXACTLY the bar height — not a rounded-up guess.
   It used to reserve 48px for a bar that measured 45px, so content sat three
   pixels under the bar on one page type and flush on another. */
body.stb-mounted {
  padding-top: var(--hdr-h);
}

/* Mobile. The bar's own height and inset already shrink at 640px via the
   contract, on every surface at once. What is left here is purely which
   controls survive the narrow width. */
@media (max-width: 640px) {
  .stb-btn { padding: 5px 10px; font-size: 10px; }
  .stb-icon { width: var(--hdr-ctl); height: var(--hdr-ctl); font-size: 13px; }
  /* Hide text labels — mark/avatar only on small screens */
  .stb-aiexec-name { display: none; }
  .stb-home-label { display: none; }
  /* Allow the right slot to hide secondary buttons if it overflows */
  #sip-top-bar .stb-slot.right .stb-secondary { display: none; }
}

/* Light-mode variant — pills + icons need real contrast on light bg.
   The bar's own background/border now come from the contract's light tokens;
   only the pill colours are restated here. */
body.light-mode .stb-btn {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.4);
  color: #4338CA;
}
body.light-mode .stb-btn:hover {
  background: rgba(99, 102, 241, 0.2);
  border-color: rgba(99, 102, 241, 0.65);
}
body.light-mode .stb-btn.stb-signin {
  background: rgba(99, 102, 241, 0.15);
  border-color: rgba(99, 102, 241, 0.45);
  color: #3730A3;
}
body.light-mode .stb-btn.stb-signout {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.4);
  color: #B91C1C;
}
body.light-mode .stb-btn.stb-signout .stb-dot {
  background: #DC2626;
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
}
body.light-mode .stb-icon {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.14);
  color: #1E293B;
}
body.light-mode .stb-icon:hover {
  background: rgba(15, 23, 42, 0.12);
}

/* Suppress legacy in-page top bars / back links once the shared bar is up.
   Kid + voice pages used to mount their own .topbar+.back-link which now
   duplicates the bar's HOME button. Page authors can opt out by adding
   the .stb-keep class to their .topbar element. */
body.stb-mounted .topbar:not(.stb-keep),
body.stb-mounted .home-nav-float:not(.stb-keep),
body.stb-mounted .back-nav-float:not(.stb-keep) {
  display: none !important;
}

/* 2026-04-29: when the pullout drawer is mounted, the SIGN OUT pill moves
 * INTO the drawer's user card. Suppress the top-bar pill so it doesn't
 * duplicate. Also push the theme toggle further right with padding so it
 * sits cleanly in the corner. SIGN IN pill (unauthed) stays in the bar
 * because the drawer doesn't mount until auth. */
body.pd-mounted #sip-top-bar .stb-btn.stb-signout,
body.pd-mounted #sip-top-bar #stb-signout-btn {
  display: none !important;
}
body.pd-mounted #sip-top-bar {
  padding-right: var(--hdr-inset) !important;
}

/* When the top bar is mounted, suppress the legacy free-floating pills and inline .tr-bar.
 * 2026-04-28: also suppress `.signin-pill` (bottom-left fixed pill on every
 * landing page) so Davin/Marla/Haley/everyone don't show two SIGN IN pills. */
body.stb-mounted .signin-launcher,
body.stb-mounted #sip-logout-btn,
body.stb-mounted .tr-bar,
body.stb-mounted #sip-landing-logo,
body.stb-mounted .signin-pill {
  display: none !important;
}

/* Brand mark slot for window.SIP_BRAND.markHTML (2026-08-07). The booking pages
   hand the bar the same inline SVG lockup the page body uses, so the header
   reads as one product instead of three. Sized like the img it replaces; without
   an explicit height an unsized SVG expands to fill the viewport, which is
   exactly what happened the first time the bar mounted on the booking page. */
#sip-top-bar .stb-brand-mark{display:inline-flex;align-items:center}
#sip-top-bar .stb-brand-mark svg{height:22px;width:auto;display:block}