/* ========================================================================
   Shared top-bar — used on every .ofself page (index + all narratives).
   Pair with topbar.js, which injects the markup and sets the active state.
   All colours/fonts come from tokens.css — link tokens.css BEFORE this.
   ========================================================================
*/

.top-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Horizontal inset tuned to be visually equidistant from the top edge —
     the bar is 40px tall, so 16px keeps the wordmark, hamburger, and X
     equally inset on all four sides. */
  padding: 0 16px;
  background: #000;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: default;
  /* No border-bottom — when the submenu opens, topbar + submenu read
     as one continuous panel. The submenu carries its own bottom rule. */
}
.top-bar, .top-bar * { cursor: default; }
.top-bar a, .top-bar a *,
.top-bar button, .top-bar button *,
.top-bar [role="button"], .top-bar [role="button"] * { cursor: pointer; }
.top-bar-submenu, .top-bar-submenu * { cursor: default; }
.top-bar-submenu a, .top-bar-submenu a * { cursor: pointer; }

.top-bar-word {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  border: none;
  transition: color 0.15s ease;
}
.top-bar-word:hover { color: rgba(255, 255, 255, 1); }

.top-bar-nav {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 4px;
  align-items: center;
}

.top-bar-link {
  font-family: 'Menlo', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  border: none;
  padding: 6px 12px;
  border-radius: 3px;
  transition: color 0.15s ease, background 0.15s ease;
  line-height: 1;
}
.top-bar-link:hover {
  color: rgba(255, 255, 255, 0.98);
  background: rgba(255, 255, 255, 0.08);
}
/* Active page — slightly lifted bg + full-bright text. Underline
   removed for cleaner read; the bg lift alone marks the active state. */
.top-bar-link.active {
  color: rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.08);
}

/* Parent items (Apps, Philosophy) are pure submenu triggers — they
   render as <span> with no navigation. Cursor stays "default" so it
   doesn't read as a clickable link, but hover highlight still confirms
   it's interactive (it opens the dropdown). */
.top-bar-link--parent {
  cursor: default;
  user-select: none;
}

/* Login CTA — terra-lt accent (matches the .of italic in the wordmark
   and other terra accents across the site). Both text and border carry
   the colour; hover fills the rectangle with terra and inverts to dark. */
.top-bar-cta {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  border: 1px solid #fff;
  padding: 5px 12px;
  border-radius: 3px;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
/* External-link indicator — small NE arrow signals that login opens
   in a new tab to nucleus.ofself.ai. Pseudo-element so the textContent
   stays clean for screen readers. */
.top-bar-cta::after {
  content: ' ↗';
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  letter-spacing: 0;
  transition: transform 0.18s ease;
}
.top-bar-cta:hover {
  color: #000;
  background: #fff;
  border-color: #fff;
}
.top-bar-cta:hover::after {
  transform: translate(1px, -1px);
}

/* Portal link — persistent shortcut to portal.html, always visible next
   to the login/CTA button. Styled like the wordmark: quiet mono, cream,
   no border — a subtle wayfinder, not a call-to-action. */
.top-bar-portal {
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 3px;
  transition: color 0.15s ease, background 0.15s ease;
}
.top-bar-portal:hover {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.06);
}

/* Right group — login + hamburger live together at the bar's right edge.
   Login hides at the mobile breakpoint and the hamburger takes over. */
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Hamburger — two long thin lines, 24px wide, hairlines at 1px.
   On open, both lines converge to center and rotate into an X.
   Hidden by default; revealed at ≤900px in place of the login button. */
.top-bar-hamb {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  /* Box sized to the icon itself (no internal slack). The two 24px spans
     define the closed-state width; rotated into an X, the diagonal lines
     sit inside the same box. The bar's 16px outer padding becomes the
     only inset to the viewport edge, matching the wordmark on the left
     so the icon is equidistant from the top and right of the screen. */
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.top-bar-hamb span {
  display: block;
  width: 24px;
  height: 1px;
  background: rgba(255, 255, 255, 0.72);
  transform-origin: center;
  transition: transform 0.32s cubic-bezier(0.6, 0.05, 0.28, 1),
              background 0.2s ease;
}
.top-bar-hamb:hover span { background: rgba(255, 255, 255, 1); }
.top-bar-hamb.open span:nth-child(1) {
  transform: translateY(2.5px) rotate(45deg);
}
.top-bar-hamb.open span:nth-child(2) {
  transform: translateY(-2.5px) rotate(-45deg);
}

/* Drawer — full-bleed slide-down panel with all nav + login. Starts
   below the 40px top-bar so the bar (and its X-toggle) stay accessible. */
.top-bar-drawer {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 199;
  background: #000;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
  pointer-events: none;
  cursor: default;
}
.top-bar-drawer, .top-bar-drawer * { cursor: default; }
.top-bar-drawer a, .top-bar-drawer a *,
.top-bar-drawer button, .top-bar-drawer button * { cursor: pointer; }
.top-bar-drawer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.top-bar-drawer-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;
  padding: 24px 16px 60px 36px;
  gap: 28px;
  text-align: left;
  overflow-y: auto;
}
.top-bar-drawer-section {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}
.top-bar-drawer-heading {
  font-family: 'Menlo', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  padding: 14px 0 6px;
  user-select: none;
}
/* Leaf nav item rendered as a heading-styled link (e.g. external COSM).
   Brighter than the dim section labels so it reads as tappable. */
.top-bar-drawer-heading--link {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color 0.15s ease;
}
.top-bar-drawer-heading--link:hover { color: #fff; }
.top-bar-drawer-item {
  font-family: 'Menlo', 'JetBrains Mono', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  padding: 12px 0;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  transition: color 0.15s ease;
}
.top-bar-drawer-item:hover,
.top-bar-drawer-item:active { color: #fff; }
.top-bar-drawer-cta {
  margin-top: 32px;
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 14px 28px;
  border: 1px solid #fff;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}
.top-bar-drawer-cta::after {
  content: ' ↗';
  display: inline-block;
  margin-left: 6px;
  font-size: 13px;
  letter-spacing: 0;
}
.top-bar-drawer-cta:hover {
  color: #000;
  background: #fff;
}

/* Hover submenu — full-bleed panel pinned under the topbar. The outer
   container spans the viewport (dark bg + faint bottom rule). Content
   sits in a max-width inner column. Hidden by default; .open fades
   + slides it down. Sits at z:198 so the bar (z:200) overlays cleanly. */
.top-bar-submenu {
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 198;
  background: #000;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  max-height: min(620px, calc(100vh - 40px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease,
              transform 0.22s cubic-bezier(0.22, 1.12, 0.32, 1),
              visibility 0.18s ease;
}
.top-bar-submenu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.top-bar-submenu-inner {
  max-width: none;
  margin: 0;
  /* Default padding/gap — sized for single-column menus where the column
     and graphic occupy opposite ends with generous breathing room. The
     two-column ecosystem menu opts into a tighter layout via .is-wide
     so the second column + graphic still fit on narrower desktops. */
  padding: 32px max(160px, 20vw) 36px max(156px, 20vw);
  display: flex;
  gap: 64px;
  justify-content: flex-start;
  align-items: flex-start;
  /* Crossfade contents when switching between top-level submenus —
     JS toggles .is-swapping briefly, then re-renders and removes it.
     Promote to its own compositor layer so Safari doesn't bleed the
     pre-swap content into the post-swap content during the transition. */
  transition: opacity 0.18s ease;
  will-change: opacity;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.top-bar-submenu-inner.is-swapping {
  opacity: 0;
}
/* Wide variant — used by submenus with multiple columns (ecosystem's
   Native Apps + App Store). Tighter horizontal padding + smaller gap
   so the graphic still gets its full width on narrower desktops. */
.top-bar-submenu-inner.is-wide {
  padding: 32px max(96px, 12vw) 36px max(92px, 12vw);
  gap: 48px;
}
.top-bar-submenu-image {
  margin-left: auto;
  align-self: center;
  pointer-events: none;
  width: clamp(220px, 26vw, 380px);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.top-bar-submenu-image svg {
  width: 100%;
  height: auto;
  max-height: 380px;
}
/* Default: dim every node and connecting line so the mandala reads as
   a soft constellation. Hovering a submenu item lights only its mapped
   nodes (see setActiveNodes in topbar.js). */
.top-bar-submenu-image svg line,
.top-bar-submenu-image svg path {
  opacity: 0.2;
  transition: opacity 0.35s ease;
}
.top-bar-submenu-image svg circle {
  opacity: 0.35;
  r: 0.9;
  transition: opacity 0.35s ease, r 0.35s ease, fill-opacity 0.35s ease;
}
.top-bar-submenu-image svg circle.active {
  opacity: 1;
  r: 1.3;
}
.top-bar-submenu-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-width: 150px;
  max-height: 460px;
  overflow-y: auto;
  position: relative;
}
/* Fade hint at top and bottom edges when the group is scrollable.
   Uses mask-image so content dissolves into the background naturally. */
.top-bar-submenu-group.is-scrollable {
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 0%,
    black calc(100% - 48px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 0%,
    black calc(100% - 48px),
    transparent 100%
  );
}
/* Once scrolled to the bottom, remove the bottom fade. */
.top-bar-submenu-group.is-scrollable.scrolled-end {
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 48px,
    black 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 48px,
    black 100%
  );
}
/* At the very top (default), only fade the bottom. */
.top-bar-submenu-group.is-scrollable.scrolled-top {
  mask-image: linear-gradient(
    to bottom,
    black 0%,
    black calc(100% - 48px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 0%,
    black calc(100% - 48px),
    transparent 100%
  );
}
/* Scrolled somewhere in the middle — fade both edges. */
.top-bar-submenu-group.is-scrollable.scrolled-mid {
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 48px,
    black calc(100% - 48px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 48px,
    black calc(100% - 48px),
    transparent 100%
  );
}
/* Flat variant — single left-aligned column. Each item is a flex row:
   cube icon + label, so all items share a common left edge. */
.top-bar-submenu-group--flat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 200px;
}
.top-bar-submenu-label {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px;
}
.top-bar-submenu-item {
  font-family: 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: 6px 0;
  line-height: 1.15;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  opacity: 0.72;
  transition: color 0.15s ease, opacity 0.15s ease;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}
.top-bar-submenu-item:hover {
  color: #fff;
  opacity: 1;
}
/* When an item has a description, stack name + desc vertically. */
.top-bar-submenu-item:has(.top-bar-submenu-desc) {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 5px 0;
}
.top-bar-submenu-desc {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.32);
  line-height: 1.35;
  transition: color 0.15s ease;
}
.top-bar-submenu-item:hover .top-bar-submenu-desc {
  color: rgba(255, 255, 255, 0.48);
}
/* "Coming soon" verbiage under a section title (e.g. App Store column).
   Visually matches .top-bar-submenu-item (same family/size/weight/smoothing)
   but dimmed and non-interactive to read as an anticipatory note. */
.top-bar-submenu-coming-soon {
  font-family: 'Helvetica Neue', system-ui, -apple-system, sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.32);
  padding: 8px 0;
  line-height: 1.15;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

@media (max-width: 900px) {
  .top-bar-nav { display: none; }
  .top-bar-hamb { display: flex; }
  .top-bar-submenu { display: none; }
}