/* BlackBook v14.7.0 — NJS navigation islands.
   Stable icon geometry, persistent main pinning, horizontal-only context expansion,
   pre-paint hydration, and navigation-continuity handoff. */
:root{
  --bb-main-compact:64px;
  --bb-main-open:184px;
  --bb-context-compact:66px;
  --bb-context-open:272px;
  --bb-nav-gap:12px;
  --bb-nav-top:82px;
  --bb-nav-x:18px;
}
html.nav-hydrating .bb-nav-islands-v147 :is(.primary-island-v1442,.secondary-sidebar,.main-island-toggle-v147,.primary-nav-item,.secondary-nav-pane>a){transition:none!important;animation:none!important}
html.context-resume-open .bb-nav-islands-v147 .secondary-sidebar{width:var(--bb-context-open)!important;min-width:var(--bb-context-open)!important}

/* Detached home mark; Create now belongs to the primary island. */
.bb-nav-islands-v147 .bb-nav-orbit-v1442{left:var(--bb-nav-x)!important;top:18px!important;width:var(--bb-main-compact)!important;gap:0!important}
.bb-nav-islands-v147 .bb-nav-logo-v1442{width:48px!important;height:48px!important;border-radius:16px!important}
.bb-nav-islands-v147 .bb-nav-logo-v1442:hover{transform:translateY(-1px)!important}

/* Floating shell: main/context animations never change page layout. */
.bb-nav-islands-v147 .navigation-shell-v1442{left:var(--bb-nav-x)!important;top:var(--bb-nav-top)!important;height:calc(100vh - var(--bb-nav-top) - 18px)!important;overflow:visible!important}
.bb-nav-islands-v147 .app-main,
.bb-nav-islands-v147.secondary-collapsed .app-main{margin-left:calc(var(--bb-nav-x) + var(--bb-main-open) + var(--bb-nav-gap) + var(--bb-context-compact) + 22px)!important;transition:none!important}

.bb-nav-islands-v147 .primary-island-v1442,
.bb-nav-islands-v147 .secondary-sidebar{
  top:0!important;bottom:0!important;
  border:1px solid rgba(32,38,36,.07)!important;
  background:rgba(250,251,249,.90)!important;
  box-shadow:0 18px 46px rgba(26,32,30,.08),inset 0 1px 0 rgba(255,255,255,.92)!important;
  backdrop-filter:blur(22px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(22px) saturate(1.08)!important;
}
.bb-nav-islands-v147 .primary-island-v1442{
  left:0!important;width:var(--bb-main-compact)!important;min-width:var(--bb-main-compact)!important;
  padding:8px!important;overflow:visible!important;
  display:flex!important;flex-direction:column!important;
  transition:width .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease!important;
}
.bb-nav-islands-v147.main-hover-open .primary-island-v1442,
.bb-nav-islands-v147.main-expanded .primary-island-v1442,
html.main-expanded .bb-nav-islands-v147 .primary-island-v1442{
  width:var(--bb-main-open)!important;min-width:var(--bb-main-open)!important;
}
/* Defeat legacy :hover expansion; JS controls hover so Collapse is respected until re-entry. */
.bb-nav-islands-v147 .primary-island-v1442:hover{width:var(--bb-main-compact)!important;min-width:var(--bb-main-compact)!important}
.bb-nav-islands-v147.main-hover-open .primary-island-v1442:hover,
.bb-nav-islands-v147.main-expanded .primary-island-v1442:hover,
html.main-expanded .bb-nav-islands-v147 .primary-island-v1442:hover{width:var(--bb-main-open)!important;min-width:var(--bb-main-open)!important}

.bb-nav-islands-v147 .secondary-sidebar{
  left:calc(var(--bb-main-compact) + var(--bb-nav-gap))!important;
  width:var(--bb-context-compact)!important;min-width:var(--bb-context-compact)!important;
  display:flex!important;opacity:1!important;pointer-events:auto!important;transform:none!important;
  overflow:visible!important;padding:8px!important;
  transition:left .18s cubic-bezier(.2,.8,.2,1),width .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease!important;
}
.bb-nav-islands-v147.main-hover-open .secondary-sidebar,
.bb-nav-islands-v147.main-expanded .secondary-sidebar,
html.main-expanded .bb-nav-islands-v147 .secondary-sidebar{
  left:calc(var(--bb-main-open) + var(--bb-nav-gap))!important;
}
.bb-nav-islands-v147.context-open .secondary-sidebar,
.bb-nav-islands-v147 .secondary-sidebar:focus-within{
  width:var(--bb-context-open)!important;min-width:var(--bb-context-open)!important;
}

/* Main rows — exact icon column remains fixed in both widths. */
.bb-nav-islands-v147 .primary-nav-v1442{display:grid!important;gap:4px!important;padding:0!important;overflow:visible!important}
.bb-nav-islands-v147 .primary-nav-item{
  position:relative!important;width:100%!important;height:48px!important;min-height:48px!important;
  display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;align-items:center!important;gap:7px!important;
  padding:0!important;border:0!important;border-radius:13px!important;background:transparent!important;color:#737a78!important;
  overflow:hidden!important;text-align:left!important;cursor:pointer!important;
}
.bb-nav-islands-v147 .primary-nav-item .ui-icon{width:18px!important;height:18px!important;justify-self:center!important;grid-column:1!important}
.bb-nav-islands-v147 .primary-nav-item>span{grid-column:2!important;min-width:0!important;opacity:0!important;transform:translateX(-4px)!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;transition:opacity .1s ease,transform .14s ease!important}
.bb-nav-islands-v147.main-hover-open .primary-nav-item>span,
.bb-nav-islands-v147.main-expanded .primary-nav-item>span,
html.main-expanded .bb-nav-islands-v147 .primary-nav-item>span,
.bb-nav-islands-v147 .primary-island-v1442:focus-within .primary-nav-item>span{opacity:1!important;transform:none!important}
.bb-nav-islands-v147 .primary-island-v1442:hover .primary-nav-item>span{opacity:0!important;transform:translateX(-4px)!important}
.bb-nav-islands-v147.main-hover-open .primary-island-v1442:hover .primary-nav-item>span,
.bb-nav-islands-v147.main-expanded .primary-island-v1442:hover .primary-nav-item>span,
html.main-expanded .bb-nav-islands-v147 .primary-island-v1442:hover .primary-nav-item>span{opacity:1!important;transform:none!important}
.bb-nav-islands-v147 .primary-nav-item:hover{background:rgba(30,36,34,.045)!important;color:#151817!important}
.bb-nav-islands-v147 .primary-nav-item.active{background:var(--bb-domain-soft)!important;color:var(--bb-domain-accent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bb-domain-accent) 12%,transparent)!important}
.bb-nav-islands-v147 .primary-nav-item.active:after{content:"";position:absolute;left:3px;top:14px;bottom:14px;width:3px;border-radius:4px;background:var(--bb-domain-accent)}
.bb-nav-islands-v147 .primary-nav-item.active .ui-icon{color:var(--bb-domain-accent)!important}
.bb-nav-islands-v147 .primary-create-item-v147{background:#151817!important;color:#fff!important;margin-bottom:5px!important}
.bb-nav-islands-v147 .primary-create-item-v147:hover,.bb-nav-islands-v147 .primary-create-item-v147[aria-expanded="true"]{background:#000!important;color:#fff!important}
.bb-nav-islands-v147 .primary-create-item-v147:after{display:none!important}
.bb-nav-islands-v147 .bb-main-create-v147{position:relative!important;overflow:visible!important}
.bb-nav-islands-v147 .bb-nav-create-menu-v147{left:calc(100% + 14px)!important;right:auto!important;top:0!important;width:252px!important;max-width:min(252px,calc(100vw - 96px))!important;z-index:240!important}

/* Main pin toggle sits on the island edge and controls persistence only. */
.bb-nav-islands-v147 .main-island-toggle-v147{
  pointer-events:auto;position:absolute;z-index:8;left:calc(var(--bb-main-compact) - 10px);top:18px;
  width:22px;height:22px;display:grid;place-items:center;padding:0;border:1px solid rgba(30,36,34,.09);border-radius:999px;
  background:rgba(255,255,255,.96);color:#707775;box-shadow:0 5px 15px rgba(30,36,34,.09);cursor:pointer;
  transition:left .18s cubic-bezier(.2,.8,.2,1),transform .16s ease!important;
}
.bb-nav-islands-v147 .main-island-toggle-v147 .ui-icon{width:12px;height:12px;transform:rotate(0deg);transition:transform .16s ease}
.bb-nav-islands-v147.main-hover-open .main-island-toggle-v147,
.bb-nav-islands-v147.main-expanded .main-island-toggle-v147,
html.main-expanded .bb-nav-islands-v147 .main-island-toggle-v147{left:calc(var(--bb-main-open) - 10px)}
.bb-nav-islands-v147.main-expanded .main-island-toggle-v147 .ui-icon,
html.main-expanded .bb-nav-islands-v147 .main-island-toggle-v147 .ui-icon{transform:rotate(180deg)}

/* Organization stays at the bottom; long names never widen the island. */
.bb-nav-islands-v147 .primary-bottom-v147{margin-top:auto!important;min-width:0!important;display:grid!important;gap:4px!important}
.bb-nav-islands-v147 .primary-org-v147{position:relative!important;padding:0!important;min-width:0!important}
.bb-nav-islands-v147 .primary-org-v147 .org-switcher{
  width:100%!important;height:48px!important;min-height:48px!important;display:grid!important;grid-template-columns:46px minmax(0,1fr) 14px!important;gap:7px!important;
  padding:0!important;border:0!important;border-radius:13px!important;background:transparent!important;overflow:hidden!important;
}
.bb-nav-islands-v147 .primary-org-v147 .org-avatar{grid-column:1;width:30px!important;height:30px!important;justify-self:center!important}
.bb-nav-islands-v147 .org-copy-v147{grid-column:2;min-width:0!important;opacity:0;overflow:hidden;transition:opacity .1s ease}
.bb-nav-islands-v147 .org-copy-v147 strong,.bb-nav-islands-v147 .org-copy-v147 small{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.bb-nav-islands-v147 .org-chevron-v147{grid-column:3;width:12px!important;height:12px!important;opacity:0}
.bb-nav-islands-v147.main-hover-open :is(.org-copy-v147,.org-chevron-v147),
.bb-nav-islands-v147.main-expanded :is(.org-copy-v147,.org-chevron-v147),
html.main-expanded .bb-nav-islands-v147 :is(.org-copy-v147,.org-chevron-v147),
.bb-nav-islands-v147 .primary-island-v1442:focus-within :is(.org-copy-v147,.org-chevron-v147){opacity:1}
.bb-nav-islands-v147 .primary-org-v147 .org-switch-menu{left:calc(100% + 14px)!important;right:auto!important;bottom:0!important;top:auto!important;width:260px!important;z-index:240!important}
.bb-nav-islands-v147 .primary-sidebar-foot{width:100%!important;display:grid!important;grid-template-columns:46px minmax(0,1fr)!important;align-items:center!important;justify-items:start!important;padding:4px 0 0!important;border:0!important}
.bb-nav-islands-v147 .primary-sidebar-foot .status-online{justify-self:center!important}
.bb-nav-islands-v147 .primary-sidebar-foot small{min-width:0;opacity:0;white-space:nowrap;transition:opacity .1s ease}
.bb-nav-islands-v147.main-hover-open .primary-sidebar-foot small,.bb-nav-islands-v147.main-expanded .primary-sidebar-foot small,html.main-expanded .bb-nav-islands-v147 .primary-sidebar-foot small{opacity:1}

/* Context island is icon-first and horizontal-only: row count, row height, padding and total height never change. */
.bb-nav-islands-v147 .secondary-mobile-close{display:none!important}
.bb-nav-islands-v147 .secondary-nav{width:100%!important;flex:1!important;overflow:auto!important;padding:0!important;scrollbar-width:none!important}
.bb-nav-islands-v147 .secondary-nav-pane{display:none!important;gap:4px!important}
.bb-nav-islands-v147 .secondary-nav-pane.is-active{display:grid!important;grid-auto-rows:48px!important;align-content:start!important}
.bb-nav-islands-v147 .secondary-nav-pane>a{
  width:100%!important;height:48px!important;min-height:48px!important;display:grid!important;grid-template-columns:48px minmax(0,1fr) auto!important;
  align-items:center!important;gap:8px!important;padding:0!important;border-radius:13px!important;overflow:hidden!important;color:#727977!important;
  transition:background .14s ease,color .14s ease,box-shadow .14s ease!important;
}
.bb-nav-islands-v147 .secondary-nav-pane>a>.ui-icon{grid-column:1;width:21px!important;height:21px!important;justify-self:center!important;color:currentColor!important}
.bb-nav-islands-v147 .secondary-nav-pane>a>span{grid-column:2;min-width:0!important;opacity:0;transform:translateX(-4px);transition:opacity .1s ease,transform .14s ease!important}
.bb-nav-islands-v147 .secondary-nav-pane>a strong{font-size:10.5px!important;color:inherit!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.bb-nav-islands-v147 .secondary-nav-pane>a small{display:none!important}
.bb-nav-islands-v147 .secondary-nav-pane>a>em{grid-column:3;opacity:0;white-space:nowrap}
.bb-nav-islands-v147.context-open .secondary-nav-pane>a>span,
.bb-nav-islands-v147.context-open .secondary-nav-pane>a>em,
.bb-nav-islands-v147 .secondary-sidebar:focus-within .secondary-nav-pane>a>span,
.bb-nav-islands-v147 .secondary-sidebar:focus-within .secondary-nav-pane>a>em{opacity:1;transform:none}
.bb-nav-islands-v147 .secondary-nav-pane>a:hover{background:rgba(30,36,34,.045)!important;color:#151817!important;transform:none!important}
.bb-nav-islands-v147 .secondary-nav-pane>a.active{background:var(--bb-domain-soft)!important;color:var(--bb-domain-accent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bb-domain-accent) 12%,transparent)!important}
.bb-nav-islands-v147 .secondary-nav-pane>a.active:before{left:3px!important;top:14px!important;bottom:14px!important;width:3px!important;background:var(--bb-domain-accent)!important}

/* Popovers float; they never contribute to island dimensions. */
.bb-nav-islands-v147 .dropdown-menu{position:absolute!important;max-height:min(480px,calc(100vh - 36px))!important;overflow:auto!important}

@media (prefers-color-scheme:dark){
  :root{--bb-hub-bg:#111312;--su-bg:#111312;--su-bg-2:#161918;--su-ink:#f3f5f3;--su-text:#d5dad7;--su-muted:#959e99;--su-faint:#6e7772;--su-line:rgba(255,255,255,.07)}
  body.bb-nav-islands-v147{background:radial-gradient(circle at 84% 9%,var(--bb-domain-soft),transparent 30%),linear-gradient(135deg,#111312 0%,#151817 100%)!important;color:#d5dad7!important}
  .bb-nav-islands-v147 .primary-island-v1442,.bb-nav-islands-v147 .secondary-sidebar,.bb-nav-islands-v147 .bb-nav-logo-v1442{background:rgba(22,25,24,.91)!important;border-color:rgba(255,255,255,.055)!important;box-shadow:0 20px 52px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.035)!important}
  .bb-nav-islands-v147 .primary-nav-item,.bb-nav-islands-v147 .secondary-nav-pane>a{color:#909994!important}
  .bb-nav-islands-v147 .primary-nav-item:hover,.bb-nav-islands-v147 .secondary-nav-pane>a:hover{background:rgba(255,255,255,.045)!important;color:#f0f3f1!important}
  .bb-nav-islands-v147 .primary-nav-item.active,.bb-nav-islands-v147 .secondary-nav-pane>a.active{background:color-mix(in srgb,var(--bb-domain-accent) 17%,#171a18)!important}
  .bb-nav-islands-v147 .primary-create-item-v147{background:#f0f3f1!important;color:#101211!important}
  .bb-nav-islands-v147 .main-island-toggle-v147{background:#202422;color:#b9c0bc;border-color:rgba(255,255,255,.06);box-shadow:0 5px 18px rgba(0,0,0,.28)}
  .bb-nav-islands-v147 .org-switcher{color:#e7ebe8!important}.bb-nav-islands-v147 .org-avatar{background:#29312d!important;color:#c8d5ce!important}
  .bb-nav-islands-v147 .dropdown-menu{background:#1b1f1d!important;border-color:rgba(255,255,255,.07)!important;color:#e5e9e6!important;box-shadow:0 18px 48px rgba(0,0,0,.42)!important}
}

@media (max-width:1120px) and (min-width:961px){
  :root{--bb-main-open:170px;--bb-context-open:244px}
}
@media (max-width:960px){
  .bb-nav-islands-v147 .navigation-shell-v1442{inset:0 auto 0 0!important;width:min(340px,94vw)!important;height:100vh!important;display:flex!important;transform:translateX(-100%)!important;overflow:hidden!important}
  .bb-nav-islands-v147.nav-open .navigation-shell-v1442{transform:none!important}
  .bb-nav-islands-v147 .app-main{margin-left:0!important}
  .bb-nav-islands-v147 .primary-island-v1442,.bb-nav-islands-v147 .primary-island-v1442:hover,.bb-nav-islands-v147.main-expanded .primary-island-v1442,.bb-nav-islands-v147.main-hover-open .primary-island-v1442{position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;width:68px!important;min-width:68px!important;flex:0 0 68px!important;border-radius:0!important;padding:8px!important}
  .bb-nav-islands-v147 .primary-nav-item{grid-template-columns:50px 0!important}.bb-nav-islands-v147 .primary-nav-item>span,.bb-nav-islands-v147 .org-copy-v147,.bb-nav-islands-v147 .org-chevron-v147,.bb-nav-islands-v147 .primary-sidebar-foot small{display:none!important}
  .bb-nav-islands-v147 .main-island-toggle-v147{display:none!important}
  .bb-nav-islands-v147 .secondary-sidebar,.bb-nav-islands-v147.context-open .secondary-sidebar{position:relative!important;left:auto!important;top:auto!important;bottom:auto!important;width:calc(min(340px,94vw) - 68px)!important;min-width:0!important;flex:1!important;border-radius:0!important;padding:10px!important}
  .bb-nav-islands-v147 .secondary-nav-pane>a>span,.bb-nav-islands-v147 .secondary-nav-pane>a>em{opacity:1!important;transform:none!important}
  .bb-nav-islands-v147 .secondary-mobile-close{display:grid!important;position:absolute;z-index:5;right:8px;top:8px}
  .bb-nav-islands-v147 .bb-nav-orbit-v1442{display:none!important}
  .bb-nav-islands-v147 .bb-nav-create-menu-v147,.bb-nav-islands-v147 .primary-org-v147 .org-switch-menu{position:fixed!important;left:74px!important;right:12px!important;width:auto!important;max-width:none!important}
}
@media (hover:none){
  .bb-nav-islands-v147 .primary-island-v1442:hover{width:var(--bb-main-compact)!important;min-width:var(--bb-main-compact)!important}
}
@media (prefers-reduced-motion:reduce){
  .bb-nav-islands-v147 :is(.primary-island-v1442,.secondary-sidebar,.main-island-toggle-v147,.primary-nav-item,.secondary-nav-pane>a){transition:none!important}
}
/* Legacy hover geometry used an adjacent-sibling selector; neutralize it unless JS has explicitly opened/pinned the main island. */
.bb-nav-islands-v147 .primary-island-v1442:hover + .secondary-sidebar{left:calc(var(--bb-main-compact) + var(--bb-nav-gap))!important}
.bb-nav-islands-v147.main-hover-open .primary-island-v1442:hover + .secondary-sidebar,
.bb-nav-islands-v147.main-expanded .primary-island-v1442:hover + .secondary-sidebar,
html.main-expanded .bb-nav-islands-v147 .primary-island-v1442:hover + .secondary-sidebar{left:calc(var(--bb-main-open) + var(--bb-nav-gap))!important}

.bb-nav-islands-v147 .bb-context-a11y-v147{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Keyboard focus always wins over pointer-hover suppression. */
.bb-nav-islands-v147 .primary-island-v1442:focus-within .primary-nav-item>span{opacity:1!important;transform:none!important}

@media (max-width:960px){
  /* Touch/non-hover users can still pin the main island open. */
  .bb-nav-islands-v147 .main-island-toggle-v147{display:grid!important;left:58px!important;top:18px!important}
  .bb-nav-islands-v147.main-expanded .main-island-toggle-v147,
  html.main-expanded .bb-nav-islands-v147 .main-island-toggle-v147{left:150px!important}
  .bb-nav-islands-v147.main-expanded .primary-island-v1442,
  html.main-expanded .bb-nav-islands-v147 .primary-island-v1442{width:160px!important;min-width:160px!important;flex-basis:160px!important}
  .bb-nav-islands-v147.main-expanded .primary-nav-item,
  html.main-expanded .bb-nav-islands-v147 .primary-nav-item{grid-template-columns:50px minmax(0,1fr)!important}
  .bb-nav-islands-v147.main-expanded .primary-nav-item>span,
  html.main-expanded .bb-nav-islands-v147 .primary-nav-item>span,
  .bb-nav-islands-v147.main-expanded :is(.org-copy-v147,.org-chevron-v147,.primary-sidebar-foot small),
  html.main-expanded .bb-nav-islands-v147 :is(.org-copy-v147,.org-chevron-v147,.primary-sidebar-foot small){display:block!important;opacity:1!important;transform:none!important}
  .bb-nav-islands-v147.main-expanded .secondary-sidebar,
  html.main-expanded .bb-nav-islands-v147 .secondary-sidebar{width:calc(min(340px,94vw) - 160px)!important;flex-basis:calc(min(340px,94vw) - 160px)!important}
  .bb-nav-islands-v147 .secondary-nav{padding-top:38px!important}
  .bb-nav-islands-v147.main-expanded .bb-nav-create-menu-v147,
  .bb-nav-islands-v147.main-expanded .primary-org-v147 .org-switch-menu,
  html.main-expanded .bb-nav-islands-v147 .bb-nav-create-menu-v147,
  html.main-expanded .bb-nav-islands-v147 .primary-org-v147 .org-switch-menu{left:166px!important}
}

/* v14.7.0 hover hotfix — both navigation islands expand directly on pointer hover.
   This is intentionally CSS-native so hover works even before/without JS state classes. */
@media (hover:hover) and (pointer:fine) and (min-width:961px){
  .bb-nav-islands-v147 .primary-island-v1442:hover{
    width:var(--bb-main-open)!important;
    min-width:var(--bb-main-open)!important;
  }
  .bb-nav-islands-v147 .primary-island-v1442:hover ~ .main-island-toggle-v147{
    left:calc(var(--bb-main-open) - 10px)!important;
  }
  .bb-nav-islands-v147 .primary-island-v1442:hover ~ .secondary-sidebar{
    left:calc(var(--bb-main-open) + var(--bb-nav-gap))!important;
  }
  .bb-nav-islands-v147 .primary-island-v1442:hover .primary-nav-item>span,
  .bb-nav-islands-v147 .primary-island-v1442:hover :is(.org-copy-v147,.org-chevron-v147),
  .bb-nav-islands-v147 .primary-island-v1442:hover .primary-sidebar-foot small{
    opacity:1!important;
    transform:none!important;
  }

  .bb-nav-islands-v147 .secondary-sidebar:hover{
    width:var(--bb-context-open)!important;
    min-width:var(--bb-context-open)!important;
  }
  .bb-nav-islands-v147 .secondary-sidebar:hover .secondary-nav-pane>a>span,
  .bb-nav-islands-v147 .secondary-sidebar:hover .secondary-nav-pane>a>em{
    opacity:1!important;
    transform:none!important;
  }
}