/* ============================================================
   Cognuum — TOP BAR
   Wordmark (left) + icon cluster & avatar (right).
   ============================================================ */

header{
  position:fixed; top:0; left:0; right:0;
  height:128px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad-x);
  z-index:100;
  border-bottom:1px solid transparent;
  transition:height .32s ease, background .32s ease, border-color .32s ease, backdrop-filter .32s ease;
}
/* condensed + frosted once the page scrolls (dark default) */
header.scrolled{
  height:72px;
  background:var(--topbar-scrolled-bg);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  backdrop-filter:blur(18px) saturate(1.15);
  border-bottom-color:var(--topbar-scrolled-border);
}

/* The wordmark is an <a href="/"> on every page: a real, crawlable link home.
   On the landing page chrome.js intercepts it and scrolls to the hero instead
   (see assets/js/chrome.js) — the markup stays identical either way. */
.wordmark{
  font-size:21px;
  font-weight:400;
  letter-spacing:0.42em;
  color:var(--ink-wordmark);
  text-decoration:none;
  cursor:pointer;
}
.wordmark:hover{ color:var(--ink-wordmark); }

.nav-right{ display:flex; align-items:center; gap:18px; }

/* top-bar access buttons */
.nav-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:13px; font-weight:400; letter-spacing:0.06em;
  padding:10px 20px; border-radius:2px; cursor:pointer; white-space:nowrap;
  background:transparent; color:var(--cta-ink);
  border:1px solid transparent; text-decoration:none;
  transition:color .25s ease, border-color .25s ease, background .25s ease;
}
.nav-btn:hover{ color:var(--cta-ink-hover); }
.nav-btn .nb-ico{ display:none; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.nav-btn.primary{
  color:var(--text-primary); border-color:var(--cta-border);
}
body.light .nav-btn.primary{ color:#1f2025; }
.nav-btn.primary:hover{ border-color:var(--cta-border-hover); }

/* DESKTOP: an elegant, container-free theme glyph — fixed (sticky) bottom-right */
#theme-toggle{
  position:fixed; bottom:26px; right:26px; z-index:120;
  width:30px; height:30px; padding:0;
  background:none; border:0; box-shadow:none;
  color:var(--text-secondary); opacity:0.55;
  transition:opacity .3s ease, transform .35s cubic-bezier(.22,.61,.18,1), color .3s ease;
}
#theme-toggle:hover{ opacity:1; transform:rotate(15deg); color:var(--text-primary); }
#theme-toggle svg{ width:22px; height:22px; stroke-width:1.25; }

.icon-btn{
  background:none; border:none; cursor:pointer; color:var(--ink-icon);
  display:flex; align-items:center; justify-content:center;
  position:relative; padding:0;
}
.icon-btn svg{ width:24px; height:24px; stroke:currentColor; stroke-width:1.6; fill:none; }

/* magenta = narrative; the unread marker */
.bell-dot{
  position:absolute; top:-1px; right:-1px;
  width:8px; height:8px; border-radius:50%;
  background:var(--magenta);
  box-shadow:0 0 6px rgba(237,18,128,0.9);
}

.avatar{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold);
  font-size:13px; font-weight:500; letter-spacing:0.08em;
}

/* ---- mobile bottom dock: a quiet container for the footer trigger + theme
   toggle, so they sit on their own bar clear of section content ---- */
.m-dock{ display:none; }
@media (max-width:767px){
  .m-dock{
    display:block; position:fixed; left:0; right:0; bottom:0; height:58px; z-index:118;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(7,8,11,0) 0%, rgba(7,8,11,0.82) 42%, rgba(7,8,11,0.97) 100%);
    border-top:1px solid rgba(255,255,255,0.07);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    opacity:0; transition:opacity .45s ease;       /* no backing at the top of the page */
  }
  body.page-scrolled .m-dock{ opacity:1; }          /* fades in once the user scrolls */
  /* always show the dock backing inside the lens / access / assess layers */
  body.lens-active .m-dock,
  body.access-active .m-dock,
  body.assess-active .m-dock{ opacity:1; }
  body.light .m-dock{
    background:linear-gradient(180deg, rgba(244,242,238,0) 0%, rgba(244,242,238,0.84) 42%, rgba(244,242,238,0.97) 100%);
    border-top-color:rgba(0,0,0,0.08);
  }
  /* both icons centre vertically inside the 58px dock */
  #theme-toggle{ bottom:14px; right:20px; }
  /* footer trigger handled in footer.css (it relocates to top-right when open) */
  /* hide the dock + theme toggle while the footer index is open (keeps it clean) */
  body.footer-open .m-dock,
  body.footer-open #theme-toggle{ opacity:0; pointer-events:none; transition:opacity .3s ease; }
}