@import '/src/brand/editorial-wordmark.css';
@import '/src/brand/tokens.css';
/* ============================================================================
   splatlas-nav.css — the persistent global navigation bar + global search.

   Wears the Splatlas atlas design system (splatlas-ui.css tokens). It is the
   ONE chrome that appears on the atlas and every sub-page, so the look is
   defined once here and injected by splatlas-nav.js. Restrained: a hairline
   navy-glass bar, the wordmark, the enabled verticals, and a search affordance.
   Nothing else — every element justified (Jason's bar: beautiful, not cluttered).
   ========================================================================== */

:root {
  --spnav-h: 44px;
}

/* The bar floats at the very top, above all page chrome (atlas panels are z<=1200). */
#spnav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--spnav-h);
  z-index: 2000;
  display: flex; align-items: center; gap: 4px;
  padding: 0 12px;
  background: rgba(16, 20, 16, 0.92);
  border-bottom: 1px solid rgba(var(--site-line-rgb), 0.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-family: var(--site-font);
  color: var(--site-text);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  box-sizing: border-box;
}
#spnav * { box-sizing: border-box; }

/* Wordmark home → the canonical atlas map. */
#spnav .spnav-home {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; flex: none; padding-right: 6px;
}
#spnav .site-wordmark { font-size: 25px; }
#spnav :focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }

/* The vertical links. */
#spnav .spnav-links { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; overflow: hidden; }
#spnav a.spnav-link {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; white-space: nowrap;
  color: var(--site-muted); font: 500 13px var(--site-font);
  padding: 6px 10px; border-radius: 7px; transition: background .12s ease, color .12s ease;
  border: 1px solid transparent;
}
#spnav a.spnav-link .ic { font-size: 13px; line-height: 1; opacity: .85; }
#spnav a.spnav-link:hover { background: rgba(var(--site-accent-rgb), 0.12); color: var(--site-text); }
#spnav a.spnav-link.active {
  background: rgba(var(--site-accent-rgb), 0.16); color: var(--site-accent);
  border-color: rgba(var(--site-accent-rgb), 0.42);
}

/* Search affordance — collapsed pill that expands to an input + results popover. */
#spnav .spnav-search { position: relative; flex: none; margin-left: auto; }
#spnav .spnav-search-input {
  width: 190px; max-width: 38vw;
  background: rgba(255, 255, 255, 0.05); color: var(--site-text);
  border: 1px solid rgba(var(--site-line-rgb), 0.22); border-radius: 8px;
  font: 400 13px var(--site-font); padding: 7px 10px 7px 30px;
  transition: border-color .12s ease, width .16s ease;
}
#spnav .spnav-search-input::placeholder { color: var(--site-muted); }
#spnav .spnav-search-input:focus { outline: none; border-color: rgba(var(--site-accent-rgb), 0.6); width: 260px; }
#spnav .spnav-search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--site-muted); pointer-events: none;
}

#spnav .spnav-results {
  position: absolute; top: calc(100% + 6px); right: 0; width: 320px; max-width: 92vw;
  max-height: 60vh; overflow-y: auto;
  background: rgba(16, 20, 16, 0.97); border: 1px solid rgba(var(--site-line-rgb), 0.22);
  border-radius: 11px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  padding: 5px; display: none;
}
#spnav .spnav-results.open { display: block; }
#spnav .spnav-result {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  padding: 8px 9px; border-radius: 8px; color: var(--site-text);
}
#spnav .spnav-result:hover, #spnav .spnav-result.cur { background: rgba(var(--site-accent-rgb), 0.14); }
#spnav .spnav-result .r-kind {
  font: 700 8.5px var(--site-font); letter-spacing: .08em; text-transform: uppercase;
  color: #04121b; background: var(--site-accent); border-radius: 4px; padding: 3px 6px; flex: none;
}
#spnav .spnav-result .r-text { flex: 1; min-width: 0; }
/* Ellipsis needs a bounded block box; inline spans escape the result column.
   Keep the complete strings in the DOM and accessible option name. */
#spnav .spnav-result .r-name,
#spnav .spnav-result .r-sub { display: block; min-width: 0; max-width: 100%; }
#spnav .spnav-result .r-name { font: 500 14px var(--site-font); color: var(--site-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#spnav .spnav-result .r-sub { font: 500 11px var(--site-font); color: var(--site-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#spnav .spnav-empty { padding: 12px 10px; color: var(--site-muted); font: 500 12px var(--site-font); text-align: center; }

#spnav .spnav-profile {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  margin-left: 4px; padding: 4px 8px 4px 5px;
  color: var(--site-muted); text-decoration: none; font: 700 12px var(--site-font);
  border: 1px solid rgba(var(--site-line-rgb), 0.22); border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
#spnav .spnav-profile:hover,
#spnav .spnav-profile.active {
  color: var(--site-text); border-color: rgba(var(--site-accent-rgb), 0.5); background: rgba(var(--site-accent-rgb), 0.12);
}
#spnav .spnav-profile-avatar {
  width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  background: var(--site-accent);
  color: #071019; font: 800 12px var(--site-font);
}

/* The "More" overflow menu (mobile / narrow). */
#spnav .spnav-more { position: relative; flex: none; }
#spnav .spnav-more-btn {
  background: none; border: 1px solid rgba(var(--site-line-rgb), 0.22); color: var(--site-muted);
  font: 500 13px var(--site-font); padding: 6px 10px; border-radius: 7px; cursor: pointer;
}
/* Reserve the auth label's intrinsic width before allocating search space.
   A shrinkable slot lets fallback fonts wrap SIGN IN into a clipped second row.
   Flex also removes the inline button's inherited baseline/descender space. */
#spnav .spnav-auth-slot { display: flex; align-items: center; flex: none; }
#spnav .spnav-auth-chip {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; line-height: 1.25;
}
#spnav .spnav-more-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px;
  background: rgba(16, 20, 16, 0.97); border: 1px solid rgba(var(--site-line-rgb), 0.22);
  border-radius: 11px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); padding: 5px; display: none;
}
#spnav .spnav-more-menu.open { display: block; }
#spnav .spnav-more-menu a { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; text-decoration: none; color: var(--site-text); font: 600 12.5px var(--site-font); }
#spnav .spnav-more-menu a:hover, #spnav .spnav-more-menu a.active { background: rgba(var(--site-accent-rgb), 0.14); color: var(--site-text); }

/* Pages opt into a top offset so the bar never covers their own chrome. The
   atlas (full-bleed canvas) does NOT need this — the bar floats over the globe.
   Sub-pages that scroll add the class to <body>. */
body.spnav-pushed { padding-top: var(--spnav-h); }

/* Breadcrumb / "you are here" — a thin row sub-pages can drop under the bar. */
.spnav-crumbs {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font: 500 11.5px var(--site-font); color: var(--site-muted);
}
.spnav-crumbs a { color: #9fb3c6; text-decoration: none; }
.spnav-crumbs a:hover { color: var(--site-accent); }
.spnav-crumbs .sep { color: var(--site-muted); }
.spnav-crumbs .here { color: var(--site-text); font-weight: 600; }

/* Hop affordances — the "related · back to hub · up to map" chips on a node. */
.spnav-hops { display: flex; flex-wrap: wrap; gap: 8px; }
.spnav-hop {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  font: 600 11.5px var(--site-font); color: var(--site-muted);
  background: rgba(var(--site-accent-rgb), 0.10); border: 1px solid rgba(var(--site-accent-rgb), 0.30);
  border-radius: 7px; padding: 6px 11px; transition: background .12s ease;
}
.spnav-hop:hover { background: rgba(var(--site-accent-rgb), 0.22); color: var(--site-text); }

/* Narrow screens: hide vertical labels (keep icons), collapse into More. */
@media (max-width: 880px) {
  #spnav .spnav-links { display: none; }
  #spnav .spnav-search-input { width: 140px; }
  #spnav .spnav-profile-label { display: none; }
  #spnav .spnav-profile { padding-right: 5px; }
}

/* Phone-width chrome: use a compact editorial wordmark and let search take only the space left by
   Home, Menu, and auth. Popovers are pinned to viewport gutters because their
   triggering controls are no longer wide enough to be useful anchors. */
@media (max-width: 520px) {
  #spnav {
    gap: 4px;
    padding: 0 8px;
  }
  #spnav .spnav-home {
    gap: 0;
    padding-right: 2px;
  }
  #spnav .site-wordmark { font-size: 22px; }
  #spnav .spnav-more-btn {
    padding-right: 8px;
    padding-left: 8px;
  }
  #spnav .spnav-search {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
  }
  #spnav .spnav-search-input,
  #spnav .spnav-search-input:focus {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  #spnav .spnav-results,
  #spnav .spnav-more-menu {
    position: fixed;
    top: calc(var(--spnav-h) + 6px);
    right: 8px;
    left: 8px;
    width: auto;
    max-width: none;
    min-width: 0;
  }
}
@media (min-width: 881px) { #spnav .spnav-more { display: none; } }

/* Profile page — local-first user surface. */
body.profile-page {
  margin: 0; min-height: 100vh;
  background:
    radial-gradient(900px 460px at 82% -12%, rgba(var(--site-accent-rgb), 0.12), transparent 62%),
    radial-gradient(760px 420px at -8% 18%, rgba(255, 145, 77, 0.10), transparent 62%),
    var(--site-bg);
  color: var(--site-text); font-family: var(--site-font);
  -webkit-font-smoothing: antialiased;
}
.profile-wrap { max-width: 1120px; margin: 0 auto; padding: 26px 22px 82px; }
.profile-hero {
  display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: center;
  margin: 14px 0 24px; padding: 24px;
  border: 1px solid rgba(var(--site-line-rgb), 0.16); border-radius: 8px;
  background: rgba(255, 255, 255, 0.026);
}
.profile-avatar-panel { display: grid; justify-items: center; gap: 14px; }
.profile-avatar {
  width: 142px; height: 142px; display: grid; place-items: center; border-radius: 50%;
  color: #071019; font: 800 58px var(--site-font);
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.72), transparent 26%),
    linear-gradient(135deg, var(--site-accent) 0%, var(--site-accent) 46%, #ff914d 100%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.34);
}
.avatar-picker { display: flex; gap: 8px; }
.avatar-picker button {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(var(--site-line-rgb), 0.26);
  background: rgba(255, 255, 255, 0.05); color: var(--site-text); cursor: pointer;
  font: 800 13px var(--site-font);
}
.avatar-picker button:hover,
.avatar-picker button.active { border-color: rgba(var(--site-accent-rgb), 0.72); color: var(--site-text); background: rgba(var(--site-accent-rgb), 0.14); }
.profile-kicker {
  margin: 0 0 8px; color: var(--site-accent); font: 800 11px var(--site-font);
  letter-spacing: .12em; text-transform: uppercase;
}
.profile-copy h1 {
  margin: 0 0 10px; color: var(--site-text);
  font: 800 clamp(30px, 5vw, 52px)/1.02 var(--site-font);
}
.profile-bio { max-width: 680px; margin: 0; color: var(--site-muted); font-size: 16px; line-height: 1.62; }
.profile-stats { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.profile-stats span {
  display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 10px;
  border-radius: 7px; border: 1px solid rgba(var(--site-line-rgb), 0.18);
  background: rgba(255, 255, 255, 0.035); color: var(--site-muted); font: 700 12px var(--site-font);
}
.profile-stats b { color: var(--site-text); font-size: 15px; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: 14px; align-items: start; }
.profile-section {
  border: 1px solid rgba(var(--site-line-rgb), 0.14); border-radius: 8px;
  background: rgba(255, 255, 255, 0.022); padding: 18px;
}
.profile-wide { grid-row: span 2; }
.profile-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.profile-section-head h2 { margin: 0; color: var(--site-text); font: 800 18px var(--site-font); }
.profile-section-head a { color: var(--site-accent); font: 700 12px var(--site-font); text-decoration: none; }
.profile-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-app-card,
.profile-list-row {
  display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none;
  border: 1px solid rgba(var(--site-line-rgb), 0.14); border-radius: 8px;
  background: rgba(255, 255, 255, 0.025); transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.profile-app-card { padding: 14px; }
.profile-app-card:hover,
.profile-list-row:hover { border-color: rgba(var(--site-accent-rgb), 0.52); background: rgba(var(--site-accent-rgb), 0.07); transform: translateY(-1px); }
.profile-app-icon {
  width: 38px; height: 38px; display: grid; place-items: center; flex: none;
  border-radius: 8px; color: var(--site-accent); background: rgba(var(--site-accent-rgb), 0.10); font-size: 19px;
}
.profile-app-card strong,
.profile-list-row strong { display: block; color: var(--site-text); font: 800 14px var(--site-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-app-card small,
.profile-list-row small { display: block; margin-top: 3px; color: var(--site-muted); font: 500 13px var(--site-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-list { display: grid; gap: 9px; }
.profile-list-row { justify-content: space-between; padding: 12px 13px; color: var(--site-muted); }
.profile-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.profile-activity li { display: grid; gap: 3px; padding-bottom: 10px; border-bottom: 1px solid rgba(var(--site-line-rgb), 0.12); }
.profile-activity li:last-child { border-bottom: 0; padding-bottom: 0; }
.profile-activity span { color: #dbe4ef; font: 700 13px var(--site-font); }
.profile-activity time { color: var(--site-muted); font: 700 11px var(--site-font); }

@media (max-width: 760px) {
  .profile-wrap { padding: 18px 14px 64px; }
  .profile-hero { grid-template-columns: 1fr; padding: 20px 16px; text-align: center; }
  .profile-bio { margin-inline: auto; }
  .profile-stats { justify-content: center; }
  .profile-grid,
  .profile-card-grid { grid-template-columns: 1fr; }
  .profile-wide { grid-row: auto; }
}