/* Universal top nav (js/ui/topbar.js) — logo, site-wide destinations,
   search, notification/friend-request icons, log out. Fixed-height,
   pinned chrome (see css/shell.css's file comment) — that only works if
   this row NEVER wraps vertically, so unlike a normal responsive flex
   row, wrapping is deliberately disabled everywhere here. Instead the nav
   list scrolls horizontally and the search input shrinks first if space
   runs out; the logo/icons/logout stay fixed-size and always fully
   visible. (A previous version allowed wrapping, which — combined with
   the fixed height needed elsewhere — made overflow content spill past
   the bar's bottom edge and visually overlap the sidebar/main below it,
   reading as the search box being "clipped.") */

#app-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  padding: 0.6rem 1.25rem;
  background: var(--tilt-surface);
  border-bottom: 2px solid var(--tilt-accent);
  /* No overflow:hidden here — the "More" dropdown below is deliberately
     positioned outside this box's own height, and hiding overflow at this
     level would clip it along with any accidental horizontal overflow.
     .topbar-nav's own overflow-x:auto is what actually contains a
     too-long nav list; nothing else here should ever need to overflow. */
}

/* The Blackbird wordmark (assets/blackbird.png) now renders white-on-black
   itself, so it already reads cleanly against this bar's dark background
   with no separate backing needed — unlike the earlier textured/black-
   shadow version this chip existed to prop up. */
.topbar-logo-link {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.3rem 1rem;
}

.topbar-logo {
  display: block;
  height: 3.5rem;
  width: auto;
}

/* Below a certain width the 9 links don't all fit and this scrolls
   internally rather than wrapping (kept — no "More" dropdown, every link
   stays reachable directly in this bar, by request). Left unstyled, that
   scroll boundary used to read as a bug: the last visible link got a hard
   mid-character clip with no scrollbar and no gap, and the search box
   sat immediately next to that cut edge, looking like it was overlapping/
   clipping into the nav. Two fixes below, both purely visual (no layout
   change): a right-edge fade so a truncated link fades to transparent
   instead of hard-clipping, and a visibly-present (not default-invisible)
   scrollbar, so the boundary reads as "scroll for more" on sight. */
.topbar-nav {
  flex: 1 1 auto;
  min-width: 3rem;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--tilt-accent) transparent;
  /* The "CSS scroll shadow" technique: two solid-to-transparent gradients
     (background-attachment: local) scroll WITH the content and mask the
     two shadow gradients (background-attachment: scroll, fixed to the
     visible box) everywhere except right at a genuinely scrollable edge —
     so the fade only appears when there's actually more to scroll to,
     without any JS/scroll-position tracking. */
  background-image: linear-gradient(to right, var(--tilt-surface), var(--tilt-surface) 60%, transparent), linear-gradient(to left, var(--tilt-surface), var(--tilt-surface) 60%, transparent),
    linear-gradient(to right, rgba(0, 0, 0, 0.55), transparent), linear-gradient(to left, rgba(0, 0, 0, 0.55), transparent);
  background-position: left, right, left, right;
  background-repeat: no-repeat;
  background-color: var(--tilt-surface);
  background-size: 2rem 100%, 2rem 100%, 0.85rem 100%, 0.85rem 100%;
  background-attachment: local, local, scroll, scroll;
}

.topbar-nav::-webkit-scrollbar {
  height: 0.4rem;
}

.topbar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.topbar-nav::-webkit-scrollbar-thumb {
  background: var(--tilt-accent);
  border-radius: 0.2rem;
}

.topbar-nav ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
}

.topbar-nav a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: calc(var(--tilt-radius) / 2);
  color: var(--tilt-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

.topbar-nav a:hover {
  background: rgba(255, 45, 149, 0.12);
  color: var(--tilt-accent);
}

.topbar-nav a[aria-current="page"] {
  color: var(--tilt-accent);
}

.topbar-more {
  position: relative;
  flex-shrink: 0;
}

.topbar-more summary {
  list-style: none;
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border-radius: calc(var(--tilt-radius) / 2);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

.topbar-more summary::-webkit-details-marker {
  display: none;
}

.topbar-more summary:hover {
  background: rgba(255, 45, 149, 0.12);
  color: var(--tilt-accent);
}

.topbar-more[open] summary {
  color: var(--tilt-accent);
}

.topbar-more ul {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 9rem;
  padding: 0.4rem;
  background: var(--tilt-surface);
  border: 1px solid var(--tilt-border);
  border-radius: var(--tilt-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 31;
}

.topbar-more a {
  display: block;
  padding: 0.4rem 0.6rem;
  border-radius: calc(var(--tilt-radius) / 2);
  color: var(--tilt-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}

.topbar-more a:hover {
  background: rgba(255, 45, 149, 0.12);
  color: var(--tilt-accent);
}

.topbar-more a[aria-current="page"] {
  color: var(--tilt-accent);
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 1 auto;
  min-width: 0;
}

/* margin: 0 on both rules below isn't decorative — css/editor.css has a
   bare, unscoped `form input, form select, form textarea { margin-top:
   0.25rem }` and `form button { margin-top: 1rem }` (meant for editor.html's
   own field-editing forms) that otherwise leaks onto ANY <form> on any
   page that loads editor.css, this search form included — the button
   picking up a 1rem top margin the input doesn't get any of that pushes
   it 12px lower than the input, out of alignment. Pages that don't load
   editor.css (games.html, messages.html, people.html) never saw this,
   which is why "some pages look perfect and others don't" even though
   this is the exact same shared topbar component everywhere. Both rules
   here already out-specificity editor.css's bare-element selectors
   (0,1,1 beats 0,0,1/0,0,2), so this wins regardless of page/load order. */
.topbar-search input {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--tilt-border);
  border-radius: calc(var(--tilt-radius) / 2);
  background: var(--tilt-bg);
  color: var(--tilt-text);
  width: 12rem;
  min-width: 4rem;
  flex-shrink: 1;
  margin: 0;
}

.topbar-search button {
  margin: 0;
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.topbar-icons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.topbar-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: 2px solid transparent;
  font-size: 1.05rem;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.topbar-icon:hover {
  background: rgba(255, 45, 149, 0.12);
  border-color: var(--tilt-accent);
  transform: translateY(-1px) rotate(-4deg);
}

.topbar-icon-badge {
  position: absolute;
  top: -0.25rem;
  right: -0.25rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.2rem;
  border-radius: 1rem;
  background: var(--tilt-accent);
  color: var(--tilt-accent-contrast);
  border: 2px solid var(--tilt-surface);
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.topbar-logout {
  flex-shrink: 0;
}

@media (max-width: 60rem) {
  /* css/shell.css drops #app-topbar back to position:static/height:auto
     below this width, so the nowrap-everything approach above (needed to
     protect a FIXED height) is no longer necessary — wrapping is fine and
     actually more usable once the bar can grow with its content. */
  #app-topbar {
    flex-wrap: wrap;
    overflow: visible;
  }

  .topbar-nav {
    overflow: visible;
    min-width: 0;
    /* The scroll-shadow background trick above is meaningless once nav
       wraps instead of scrolling — reset to a plain fill so it doesn't
       render a static half-fade with nothing actually scrollable behind it. */
    background: var(--tilt-surface);
  }

  .topbar-nav ul {
    flex-wrap: wrap;
  }

  .topbar-search input {
    width: 8rem;
  }
}