/* A single geometry and glass material for the public and console navigation.
   Keep the native React controls, menus, keyboard shortcuts and routing. */
html:has(header.pointer-events-none),
html:has([data-slot="sidebar-wrapper"]) {
  scrollbar-gutter: stable;
  --ad-nav-height: 56px;
  --ad-nav-space: 84px;
  --ad-nav-glass: rgba(255, 255, 255, .64);
  --ad-nav-border: rgba(255, 255, 255, .78);
  --ad-nav-shadow: 0 6px 24px rgba(20, 25, 30, .045), 0 0 0 .5px rgba(20, 25, 30, .04), inset 0 1px 0 rgba(255, 255, 255, .9);
}
html.dark:has(header.pointer-events-none),
html.dark:has([data-slot="sidebar-wrapper"]) {
  --ad-nav-glass: rgba(30, 31, 33, .70);
  --ad-nav-border: rgba(255, 255, 255, .10);
  --ad-nav-shadow: 0 6px 24px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* Shared expanded navigation. Native public scroll state controls contraction. */
header.pointer-events-none > div {
  width: 100%;
  max-width: 1280px;
  padding: 16px 24px 12px;
  transition: none;
}
header.pointer-events-none > div > nav,
[data-slot="sidebar-wrapper"] > header > div {
  box-sizing: border-box;
  height: var(--ad-nav-height);
  min-height: var(--ad-nav-height);
  padding: 8px 16px;
  gap: 6px;
  border: 1px solid var(--ad-nav-border);
  border-radius: 999px;
  background: var(--ad-nav-glass);
  box-shadow: var(--ad-nav-shadow);
  --tw-ring-shadow: 0 0 #0000;
  --tw-ring-offset-shadow: 0 0 #0000;
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  transition: background-color .2s, box-shadow .2s;
}

/* The console reserves the same top space; sidebar and viewport calculations
   inherit it, so neither the page nor its fixed sidebar sits under the pill. */
[data-slot="sidebar-wrapper"] {
  --app-header-height: var(--ad-nav-space);
}
[data-slot="sidebar-wrapper"] > header {
  height: var(--ad-nav-space);
  min-height: var(--ad-nav-space);
  z-index: 50;
  background: transparent;
  border: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
[data-slot="sidebar-wrapper"] > header > div {
  width: calc(100% - 48px);
  max-width: 1232px;
  margin: 16px auto 12px;
}

/* Match brand size and weight across the two native component trees. */
[data-slot="sidebar-wrapper"] > header [class*="system-brand"] {
  order: 0;
  flex: 1 1 auto;
  min-width: 0;
}
[data-slot="sidebar-wrapper"] > header [class*="system-brand"] > button[aria-haspopup="dialog"] {
  display: none;
}
[data-slot="sidebar-wrapper"] > header [class*="system-brand"] > a[href="/"] {
  height: auto;
  padding: 0;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
}
[data-slot="sidebar-wrapper"] > header [class*="system-brand"] > a[href="/"] > div {
  width: 28px;
  height: 28px;
  border-radius: 0;
  overflow: visible;
}
[data-slot="sidebar-wrapper"] > header [class*="system-brand"] > a[href="/"] img {
  object-fit: contain;
  border-radius: 0;
}

/* Flatten only layout wrappers; keep every native menu trigger operational. */
[data-slot="sidebar-wrapper"] > header > div > div:last-child {
  display: contents;
}
[data-slot="sidebar-wrapper"] > header > div > div:last-child > div:first-child {
  display: block;
  order: 1;
  margin: 0 6px 0 0;
}
[data-slot="sidebar-wrapper"] > header nav {
  gap: 2px;
}
[data-slot="sidebar-wrapper"] > header nav > a {
  margin: 0;
  padding: 6px 12px;
  border-radius: 8px;
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
[data-slot="sidebar-wrapper"] > header nav > a:is(:hover, [aria-current="page"]) {
  color: var(--foreground);
}
[data-slot="sidebar-wrapper"] > header nav > a[aria-current="page"] {
  font-weight: 600;
}
[data-slot="sidebar-wrapper"] > header [data-slot="sidebar-trigger"] { order: 2; }
[data-slot="sidebar-wrapper"] > header button:has(> svg.lucide-search) { order: 3; }
[data-slot="sidebar-wrapper"] > header button:has(.lucide-languages) { order: 4; }
[data-slot="sidebar-wrapper"] > header button:is([data-ad-theme-toggle], :has(> svg.lucide-palette), :has(> svg.lucide-sun), :has(> svg.lucide-moon)) { order: 5; }
[data-slot="sidebar-wrapper"] > header button:has(> svg.lucide-bell) { order: 6; }
[data-slot="sidebar-wrapper"] > header button:has([data-slot="avatar"]) { order: 7; }
[data-slot="sidebar-wrapper"] > header > div > button,
[data-slot="sidebar-wrapper"] > header > div > div:last-child > button {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 10px;
}
[data-slot="sidebar-wrapper"] > header button:has(> svg.lucide-search) {
  justify-content: center;
  border-color: transparent;
  background: transparent;
  color: var(--foreground);
}
[data-slot="sidebar-wrapper"] > header button:has(> svg.lucide-search) > :is(span, kbd) {
  display: none;
}
[data-slot="sidebar-wrapper"] > header button:has(> svg.lucide-search) > svg {
  position: static;
  transform: none;
  translate: none;
  inset: auto;
  width: 19.2px;
  height: 19.2px;
}
:is(header.pointer-events-none, [data-slot="sidebar-wrapper"] > header) [data-slot="avatar"] {
  width: 28px;
  height: 28px;
}

@media (max-width: 767px) {
  html:has(header.pointer-events-none),
  html:has([data-slot="sidebar-wrapper"]) { --ad-nav-space: 80px; }
  header.pointer-events-none > div { padding: 12px 12px; }
  [data-slot="sidebar-wrapper"] > header > div {
    width: calc(100% - 24px);
    margin: 12px auto;
  }
  header.pointer-events-none > div > nav,
  [data-slot="sidebar-wrapper"] > header > div { padding: 8px 10px; gap: 2px; }
  [data-slot="sidebar-wrapper"] > header > div > button,
  [data-slot="sidebar-wrapper"] > header > div > div:last-child > button {
    width: 32px;
    min-width: 32px;
  }
}
@media (max-width: 480px) {
  [data-slot="sidebar-wrapper"] > header [class*="system-brand"] > a[href="/"] > span,
  header.pointer-events-none nav > [class*="system-brand"] > a > span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  header.pointer-events-none > div > nav,
  [data-slot="sidebar-wrapper"] > header > div { transition: none; }
}

/* Animate the used width, so viewport clamping cannot cut expansion short.
   Both endpoints retain their existing size and content arrangement. */
header.pointer-events-none > div {
  width: min(100%, 1280px);
  max-width: 1280px;
  transition: width .6s cubic-bezier(.4, 0, .2, 1), padding .6s cubic-bezier(.4, 0, .2, 1);
}
header.pointer-events-none > div > nav {
  transition: height .6s cubic-bezier(.4, 0, .2, 1), min-height .6s cubic-bezier(.4, 0, .2, 1),
    padding .6s cubic-bezier(.4, 0, .2, 1), border-color .6s cubic-bezier(.4, 0, .2, 1),
    background-color .6s cubic-bezier(.4, 0, .2, 1), box-shadow .6s cubic-bezier(.4, 0, .2, 1),
    backdrop-filter .6s cubic-bezier(.4, 0, .2, 1), -webkit-backdrop-filter .6s cubic-bezier(.4, 0, .2, 1);
}
header.pointer-events-none > div:has(> nav.h-12) {
  width: min(100%, max(832px, calc(var(--ad-nav-required, 0px) + 26px)));
  max-width: 1280px;
  padding: 12px;
}
header.pointer-events-none > div > nav.h-12 {
  height: 48px;
  min-height: 48px;
  padding-top: 4px;
  padding-bottom: 4px;
}
@media (prefers-reduced-motion: reduce) {
  header.pointer-events-none > div,
  header.pointer-events-none > div > nav,
  [data-slot="sidebar-wrapper"] > header > div { transition: none; }
}

/* Console stays expanded. Its main links share the public header's positions;
   console-only actions occupy the free space beside the brand instead. */
[data-slot="sidebar-wrapper"] > header > div {
  position: relative;
  transition: background-color .2s, box-shadow .2s;
}
[data-slot="sidebar-wrapper"] > header [class*="system-brand"] > a[href="/"] {
  letter-spacing: -.025em;
}
/* Content determines the breakpoint; both native header trees keep their menus. */
header.pointer-events-none nav[data-ad-nav-layout="expanded"] > div:nth-child(2) {
  display: flex;
  flex: 0 0 auto;
  min-width: max-content;
}
header.pointer-events-none nav[data-ad-nav-layout="expanded"] > div:first-child {
  min-width: 136px;
}
header.pointer-events-none nav[data-ad-nav-layout="expanded"] > div:last-child,
header.pointer-events-none > div:has(nav[data-ad-nav-layout="expanded"]) > :not(nav) {
  display: none;
}
header.pointer-events-none nav[data-ad-nav-layout="collapsed"] > div:nth-child(2) { display: none; }
header.pointer-events-none nav[data-ad-nav-layout="collapsed"] > div:last-child { display: flex; }

[data-slot="sidebar-wrapper"] > header > div:not([data-ad-nav-layout="collapsed"]) { gap: 2px; }
[data-slot="sidebar-wrapper"] > header > div:not([data-ad-nav-layout="collapsed"]) > div:last-child > div:first-child {
  margin: 0 19px 0 0;
  flex: 0 0 auto;
}
[data-slot="sidebar-wrapper"] > header > div:not([data-ad-nav-layout="collapsed"]) nav {
  display: flex;
  width: max-content;
}
[data-slot="sidebar-wrapper"] > header > div:not([data-ad-nav-layout="collapsed"]) > div:last-child > div:first-child > div { display: none; }
[data-slot="sidebar-wrapper"] > header > div:not([data-ad-nav-layout="collapsed"]) [class*="system-brand"] { min-width: 224px; }
[data-slot="sidebar-wrapper"] > header > div:not([data-ad-nav-layout="collapsed"]) :is([data-slot="sidebar-trigger"], button:has(> svg.lucide-search)) {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
[data-slot="sidebar-wrapper"] > header > div:not([data-ad-nav-layout="collapsed"]) [data-slot="sidebar-trigger"] { left: 144px; }
[data-slot="sidebar-wrapper"] > header > div:not([data-ad-nav-layout="collapsed"]) button:has(> svg.lucide-search) { left: 184px; }
[data-slot="sidebar-wrapper"] > header > div:not([data-ad-nav-layout="collapsed"]) > div:last-child > button:has([data-slot="avatar"]) {
  width: 24px;
  min-width: 24px;
  margin-left: 11px;
}
[data-slot="sidebar-wrapper"] > header > div:not([data-ad-nav-layout="collapsed"]) button:has(.lucide-languages) { position: relative; }
[data-slot="sidebar-wrapper"] > header > div:not([data-ad-nav-layout="collapsed"]) button:has(.lucide-languages)::before {
  content: "";
  position: absolute;
  left: -11px;
  width: 1px;
  height: 16px;
  background: var(--border);
  opacity: .4;
}
[data-slot="sidebar-wrapper"] > header > div[data-ad-nav-layout="collapsed"] nav { display: none; }
[data-slot="sidebar-wrapper"] > header > div[data-ad-nav-layout="collapsed"] > div:last-child > div:first-child > div { display: block; }
[data-slot="sidebar-wrapper"] > header nav > a { white-space: nowrap; flex-shrink: 0; }

/* Sample the actual page behind the public navigation at both scroll states.
   Keep the edge highlights and geometry; avoid painting a substitute tint. */
html:not(.dark) :is(header.pointer-events-none > div > nav:is(.h-12, :not(.h-12)), [data-slot="sidebar-wrapper"] > header > div) {
  background: rgba(255, 255, 255, .32);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}
html.dark :is(header.pointer-events-none > div > nav:is(.h-12, :not(.h-12)), [data-slot="sidebar-wrapper"] > header > div) {
  background: rgba(30, 31, 33, .52);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
}

/* Native controls must not tween from their default size when a route mounts.
   Public and console account triggers share the same expanded geometry. */
[data-slot="sidebar-wrapper"] > header button {
  transition-property: color, background-color, border-color, box-shadow, opacity;
}
[data-slot="sidebar-wrapper"] > header > div:not([data-ad-nav-layout="collapsed"]) > div:last-child > button:has([data-slot="avatar"]) {
  height: 24px;
}