/* ──────────────────────────────────────────────────────────────────────────
   CX Brand Switcher · cross-property navigation
   ──────────────────────────────────────────────────────────────────────────
   Component appears top-left of the topbar on every page in the calendar
   surface (and, in subsequent rollouts, every page across CX Vault, CX
   Exchange, and VirtualLGS). Three brand chips with the active brand
   highlighted; on mobile, collapses to a single active-brand chip with a
   swap affordance that opens a bottom sheet.

   Mount point:
     <div id="cx-brand-switcher" data-active="vault|exchange|lgs"></div>

   Markup is injected by /assets/cx-brand-switcher.js so consumers only
   need this stylesheet plus the script tag.
   ────────────────────────────────────────────────────────────────────── */

:root {
  --cxbs-vault: #C9A84C;
  --cxbs-exchange: #5a9fd4;
  --cxbs-lgs: #dc2626;
  --cxbs-bg: rgba(255,255,255,0.02);
  --cxbs-border: rgba(255,255,255,0.08);
  --cxbs-border-2: rgba(255,255,255,0.14);
  --cxbs-ink: #f2f2f2;
  --cxbs-ink-2: rgba(255,255,255,0.7);
  --cxbs-ink-3: rgba(255,255,255,0.45);
}

/* ── Wrapper ─────────────────────────────────────────────────────────── */
.cxbs {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  flex-shrink: 0;
  min-width: 0;
}
/* Mount points themselves shouldn't squish either */
#cx-brand-switcher,
[data-cxbs-right] { flex-shrink: 0; }

/* ── Master brand (CollectorExchange) ────────────────────────────────────
   Sits to the LEFT of the property-switcher chips on every page so the
   platform identity stays anchored. Echoes index.html's .header-logo
   styling. Wordmark drops on phones; just the gold glyph stays. */
.cxbs-master {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.cxbs-master-mark {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--cxbs-vault), #E8C96A);
  border-radius: 6px;
  display: grid; place-items: center;
  font-weight: 900;
  font-size: 0.6875rem;
  color: #0a0a0a;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.cxbs-master-name {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--cxbs-ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.cxbs-master-name span { color: var(--cxbs-vault); }

/* Vertical divider between master brand and the property switcher */
.cxbs-master-divider {
  width: 1px;
  height: 22px;
  background: var(--cxbs-border-2);
  flex-shrink: 0;
}

/* On medium and small viewports drop the wordmark — keep only the glyph
   so the master brand still anchors the page without crowding the chips. */
@media (max-width: 1100px) {
  .cxbs-master-name { display: none; }
}
/* On phones the divider competes for pixels with the master glyph and the
   compact switcher pill — drop it. Keeps the topbar legible at 360px. */
@media (max-width: 900px) {
  .cxbs-master-divider { display: none; }
  .cxbs-master-mark { width: 24px; height: 24px; font-size: 0.625rem; }
  .cxbs { gap: 8px; }
}

/* ── Desktop chips (Option A — split-tag) ────────────────────────────── */
.cxbs-chips {
  display: flex;
  gap: 6px;
  align-items: center;
}
.cxbs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border: 1px solid var(--cxbs-border);
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cxbs-ink-3);
  background: var(--cxbs-bg);
  transition: border-color .15s, background .15s, color .15s;
  white-space: nowrap;
}
.cxbs-chip:hover { color: var(--cxbs-ink); border-color: var(--cxbs-border-2); background: rgba(255,255,255,0.05); }
.cxbs-chip .cxbs-lo {
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0;
}
.cxbs-chip .cxbs-nm {
  letter-spacing: 0.06em;
}
.cxbs-chip .cxbs-nm i { font-style: normal; }

.cxbs-chip[data-b="vault"]    .cxbs-lo { background: rgba(201,168,76,0.15); color: var(--cxbs-vault); }
.cxbs-chip[data-b="exchange"] .cxbs-lo { background: rgba(90,159,212,0.15); color: var(--cxbs-exchange); }
.cxbs-chip[data-b="lgs"]      .cxbs-lo { background: rgba(220,38,38,0.18); color: #fca5a5; }

.cxbs-chip.is-active                      { color: var(--cxbs-ink); background: rgba(255,255,255,0.06); border-color: var(--cxbs-border-2); }
.cxbs-chip.is-active[data-b="vault"]      { box-shadow: inset 0 -2px 0 var(--cxbs-vault); }
.cxbs-chip.is-active[data-b="exchange"]   { box-shadow: inset 0 -2px 0 var(--cxbs-exchange); }
.cxbs-chip.is-active[data-b="lgs"]        { box-shadow: inset 0 -2px 0 var(--cxbs-lgs); }

/* ── Mobile compact (Pattern 2 — active-only + swap → sheet) ─────────── */
.cxbs-compact {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 8px;
  border: 1px solid var(--cxbs-border);
  border-radius: 8px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cxbs-ink);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.cxbs-compact .cxbs-dot {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.4);
}
.cxbs-compact[data-b="vault"]    .cxbs-dot { background: var(--cxbs-vault); }
.cxbs-compact[data-b="exchange"] .cxbs-dot { background: var(--cxbs-exchange); }
.cxbs-compact[data-b="lgs"]      .cxbs-dot { background: var(--cxbs-lgs); }
.cxbs-compact .cxbs-nm i { font-style: normal; }
.cxbs-compact .cxbs-swap {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  font-size: 0.625rem;
  color: var(--cxbs-ink-2);
  margin-left: 2px;
}

/* ── Bottom sheet (mobile) ───────────────────────────────────────────── */
.cxbs-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9990;
  backdrop-filter: blur(4px);
}
.cxbs-sheet-backdrop.is-open { display: block; }
.cxbs-sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #14141a;
  border-top: 1px solid var(--cxbs-border-2);
  border-radius: 16px 16px 0 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 9991;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  transform: translateY(100%);
  transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.cxbs-sheet.is-open { transform: translateY(0); }
.cxbs-sheet .cxbs-sheet-grip {
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  margin: 0 auto 12px;
}
.cxbs-sheet h5 {
  margin: 0 0 10px;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cxbs-ink-3);
}
.cxbs-sheet a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  text-decoration: none;
  color: var(--cxbs-ink);
  border-radius: 6px;
}
.cxbs-sheet a:hover { background: rgba(255,255,255,0.04); }
.cxbs-sheet a.is-active { background: rgba(255,255,255,0.06); }
.cxbs-sheet a .cxbs-dot { width: 10px; height: 10px; border-radius: 50%; }
.cxbs-sheet a[data-b="vault"]    .cxbs-dot { background: var(--cxbs-vault); }
.cxbs-sheet a[data-b="exchange"] .cxbs-dot { background: var(--cxbs-exchange); }
.cxbs-sheet a[data-b="lgs"]      .cxbs-dot { background: var(--cxbs-lgs); }
.cxbs-sheet a .cxbs-meta { display: flex; flex-direction: column; gap: 2px; }
.cxbs-sheet a .cxbs-meta b { font-size: 0.875rem; font-weight: 800; }
.cxbs-sheet a .cxbs-meta span { font-size: 0.6875rem; color: var(--cxbs-ink-3); }

/* ── Right-side strip (admin pill + profile chip) ────────────────────── */
.cxbs-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.cxbs-admin {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid rgba(201,168,76,0.4);
  color: var(--cxbs-vault);
  border-radius: 6px;
  text-decoration: none;
  background: rgba(201,168,76,0.06);
}
.cxbs-admin:hover { background: rgba(201,168,76,0.12); }

.cxbs-signin {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 11px;
  border: 1px solid var(--cxbs-border-2);
  border-radius: 6px;
  color: var(--cxbs-ink-2);
  text-decoration: none;
  background: rgba(255,255,255,0.03);
}
.cxbs-signin:hover { color: var(--cxbs-ink); background: rgba(255,255,255,0.06); }

.cxbs-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 0.6875rem;
  color: #0a0a0a;
  text-decoration: none;
  background: linear-gradient(135deg, var(--cxbs-vault), #E8C96A);
  overflow: hidden;
}
.cxbs-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Responsive switch: full chips on desktop, compact on phones ─────── */
/* Aligned to 900px (rather than 768px) so the switcher collapses BEFORE
   the LGS topbar tightens its padding — keeps the row from overflowing
   on small tablets and large phones. */
@media (max-width: 900px) {
  .cxbs-chips    { display: none; }
  .cxbs-compact  { display: inline-flex; }
  .cxbs-admin    { display: none; }   /* admin link is in the sheet on mobile */
}