/* V2 header: brand, actions, tab row and profile menu. */

/* ── Header: brand + actions, then a tab row ── */

:root[data-ui="v2"] .app-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "brand actions"
    "nav nav";
  align-items: center;
  gap: 0;
  /* Line the header up with the 1200px content column below it. */
  padding: 0 max(24px, calc((100% - 1200px) / 2 + 24px));
  background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--card-border);
}

:root[data-ui="v2"] .app-brand {
  grid-area: brand;
  height: 56px;
  gap: 10px;
}

:root[data-ui="v2"] .logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  font-size: 12px;
  background: var(--accent);
  box-shadow: none;
}

:root[data-ui="v2"] .app-brand > div:last-child {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

:root[data-ui="v2"] .brand-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

:root[data-ui="v2"] .brand-sub {
  font-size: 13px;
}

:root[data-ui="v2"] .brand-sub::before {
  content: "/";
  margin-right: 8px;
  color: var(--card-border);
}

:root[data-ui="v2"] .app-nav {
  grid-area: nav;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0 -10px;
  /* Sideways only: overflow-x alone makes the bar scroll up/down by a few pixels too. */
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

:root[data-ui="v2"] .app-nav::-webkit-scrollbar {
  display: none;
}

/* When the tabs overflow (phones, or friends with Leaderboard), fade the edge that has
   more tabs past it, so it reads as scrollable rather than cut off. Driven by the nav's
   own scroll position; with no overflow the timeline is inactive and nothing fades. */
@property --v2-nav-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --v2-nav-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@keyframes v2-nav-fade {
  0% {
    --v2-nav-fade-start: 0px;
    --v2-nav-fade-end: 32px;
  }
  12% {
    --v2-nav-fade-start: 32px;
  }
  88% {
    --v2-nav-fade-end: 32px;
  }
  100% {
    --v2-nav-fade-start: 32px;
    --v2-nav-fade-end: 0px;
  }
}

@supports (animation-timeline: scroll()) {
  :root[data-ui="v2"] .app-nav {
    animation: v2-nav-fade linear both;
    animation-duration: auto !important; /* a scroll position, not motion: exempt from reduced-motion */
    animation-timeline: scroll(self inline);
    -webkit-mask-image: linear-gradient(
      to right,
      transparent,
      #000000 var(--v2-nav-fade-start),
      #000000 calc(100% - var(--v2-nav-fade-end)),
      transparent
    );
    mask-image: linear-gradient(
      to right,
      transparent,
      #000000 var(--v2-nav-fade-start),
      #000000 calc(100% - var(--v2-nav-fade-end)),
      transparent
    );
  }
}

:root[data-ui="v2"] .nav-item {
  --nav-pad: 10px;
  position: relative;
  flex-shrink: 0;
  padding: 0 var(--nav-pad);
  height: 44px;
  border: none;
  border-radius: 0;
  background: none;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 400;
  gap: 6px;
}

:root[data-ui="v2"] .nav-item::before {
  content: "";
  position: absolute;
  inset: 8px 2px;
  z-index: -1;
  border-radius: 6px;
  transition: background 0.15s ease;
}

:root[data-ui="v2"] .nav-item:hover {
  color: var(--text-primary);
}

/* Touch screens would keep the tint on the last tab tapped, so hover tint is pointer-only. */
@media (hover: hover) {
  :root[data-ui="v2"] .nav-item:hover::before {
    background: var(--bg-hover);
  }
}

/* The nav scrolls, so a ring on the 44px button is clipped top and bottom.
   Draw it on the inset hover pill instead. */
:root[data-ui="v2"] .nav-item:focus-visible {
  outline: none;
}

:root[data-ui="v2"] .nav-item:focus-visible::before {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 0;
}

:root[data-ui="v2"] .nav-item.is-active {
  color: var(--text-primary);
  background: none;
  border: none;
}

:root[data-ui="v2"] .nav-item.is-active::after {
  content: "";
  position: absolute;
  left: var(--nav-pad);
  right: var(--nav-pad);
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: var(--text-primary);
}

:root[data-ui="v2"] .nav-item .button-icon {
  font-size: 15px;
}

:root[data-ui="v2"] .app-actions {
  grid-area: actions;
  flex: none;
  gap: 8px;
  flex-wrap: nowrap;
}

:root[data-ui="v2"] .beta-chip {
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

:root[data-ui="v2"] .beta-chip:hover {
  color: var(--text-primary);
  border-color: var(--text-tertiary);
}

:root[data-ui="v2"] .app-actions .ghost-button {
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
}

:root[data-ui="v2"] .profile-button {
  border-radius: 999px;
}

/* Same height and hover as the header's other controls; no V1 lift. */
:root[data-ui="v2"] .profile-ring {
  width: 32px;
  height: 32px;
  background: var(--bg-secondary);
  transition: background 0.15s ease, border-color 0.15s ease;
}

:root[data-ui="v2"] .profile-button:hover .profile-ring,
:root[data-ui="v2"] .profile-button[aria-expanded="true"] .profile-ring {
  transform: none;
  box-shadow: none;
  background: var(--bg-hover);
  border-color: var(--text-tertiary);
}

:root[data-ui="v2"] .profile-fallback {
  font-size: 13px;
  font-weight: 600;
}

/* Signed out, the avatar shows a person icon instead of a "?". */
:root[data-ui="v2"] #auth-button[aria-label="Sign in"] .profile-fallback,
:root[data-ui="v2"] #auth-button[aria-label="Sign in"] + .profile-dropdown .profile-card-fallback {
  font-size: 0;
}

:root[data-ui="v2"] #auth-button[aria-label="Sign in"] .profile-fallback::before,
:root[data-ui="v2"] #auth-button[aria-label="Sign in"] + .profile-dropdown .profile-card-fallback::before {
  content: "\e46d"; /* Lucide user-round */
  font-family: "lucide";
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  color: var(--text-secondary);
}

:root[data-ui="v2"] #auth-button[aria-label="Sign in"] + .profile-dropdown .profile-card-fallback::before {
  font-size: 18px;
}

/* Profile menu: a popover like the Add mark and More menus. */
:root[data-ui="v2"] .profile-dropdown {
  top: calc(100% + 6px);
  min-width: 240px;
  padding: 6px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--popover-border);
  background: var(--popover-surface);
  box-shadow: var(--shadow-popover);
}

:root[data-ui="v2"] .profile-card {
  grid-template-columns: 36px minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: 10px;
  padding: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--popover-border);
}

:root[data-ui="v2"] .profile-card-avatar {
  width: 36px;
  height: 36px;
  border-color: var(--popover-border);
  background: var(--bg-depth);
}

:root[data-ui="v2"] .profile-card-fallback {
  font-size: 14px;
  font-weight: 600;
}

:root[data-ui="v2"] .profile-card-name {
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:root[data-ui="v2"] .profile-menu-action {
  display: flex;
  align-items: center;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  background: none;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
}

:root[data-ui="v2"] .profile-menu-action:hover,
:root[data-ui="v2"] .profile-menu-action:focus-visible {
  transform: none;
  box-shadow: none;
  background: var(--bg-hover);
}