:root {
  --rr-nav-height: 3rem;
  --rr-nav-bg: oklch(0.985 0 0);
  --rr-nav-fg: oklch(0.145 0 0);
  --rr-nav-accent: oklch(0.97 0 0);
  --rr-nav-accent-fg: oklch(0.205 0 0);
  --rr-nav-border: oklch(0.922 0 0);
  --rr-muted-fg: oklch(0.556 0 0);
  --rr-destructive: oklch(0.577 0.245 27.325);
  --rr-nav-item-hover: oklch(0.945 0 0);
  --rr-nav-item-current: oklch(0.93 0 0);
  --rr-radius-md: 0.5rem;
  --rr-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --rr-chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='oklch(0.556 0 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
}

body.has-app-nav {
  display: block !important;
  align-items: stretch !important;
  width: 100%;
  min-height: 100vh;
}

.app-shell,
.app-shell * {
  box-sizing: border-box;
}

.app-shell {
  position: relative;
  min-width: 0;
  min-height: 100vh;
}

#main-content {
  width: 100%;
}

/* ---------------------------------------------------------------- header */

.app-shell-header,
.app-public-header {
  display: flex;
  width: 100%;
  height: var(--rr-nav-height);
  align-items: center;
  gap: 0.25rem;
  padding-inline: 0.75rem;
  border-bottom: 1px solid var(--rr-nav-border);
  background: rgb(255 255 255 / 0.95);
  color: var(--rr-nav-fg);
  font-family: "Fira Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-shell-header {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(4px);
}

.app-nav-home {
  display: inline-flex;
  height: 2rem;
  flex: none;
  align-items: center;
  padding-inline: 0.5rem;
  border-radius: var(--rr-radius-md);
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------------------ nav bar */

.app-nav {
  min-width: 0;
  margin-inline-start: 0.5rem;
}

.app-nav-sections {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-nav-section {
  position: relative;
  margin: 0;
  padding: 0;
}

.app-nav-trigger {
  display: inline-flex;
  width: auto;
  height: 2rem;
  align-items: center;
  gap: 0.375rem;
  border: 0;
  border-radius: var(--rr-radius-md);
  padding: 0 0.625rem;
  background: transparent;
  color: var(--rr-nav-fg);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 120ms var(--rr-ease),
    color 120ms var(--rr-ease),
    transform 120ms var(--rr-ease);
}

.app-nav-trigger--menu::after {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  background: currentColor;
  content: "";
  mask-image: var(--rr-chevron);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 0.875rem;
  opacity: 0.55;
  rotate: 0deg;
  transition:
    rotate 150ms var(--rr-ease),
    opacity 120ms var(--rr-ease);
}

.app-nav-trigger[aria-expanded="true"]::after {
  opacity: 1;
  rotate: 180deg;
}

.app-nav-trigger[data-active="true"]::after {
  opacity: 1;
}

.app-nav-trigger[aria-expanded="true"] {
  background: var(--rr-nav-accent);
  color: var(--rr-nav-accent-fg);
}

.app-nav-trigger[data-active="true"] {
  background: var(--rr-nav-item-current);
  color: var(--rr-nav-accent-fg);
  font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
  .app-nav-trigger:hover,
  .app-nav-home:hover {
    background: var(--rr-nav-accent);
    color: var(--rr-nav-accent-fg);
  }

  .app-nav-trigger[data-active="true"]:hover {
    background: var(--rr-nav-item-current);
  }
}

.app-nav-trigger:active {
  transform: scale(0.96);
}

/* --------------------------------------------------------------- account */

.app-nav-account {
  position: relative;
  margin-inline-start: auto;
  flex: none;
}

.app-nav-avatar-trigger {
  display: inline-flex;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  cursor: pointer;
  transition: transform 120ms var(--rr-ease);
}

.app-nav-avatar-trigger:active {
  transform: scale(0.96);
}

.app-nav-avatar {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: oklch(92.8% 0.006 264.531);
  color: oklch(44.6% 0.03 256.802);
  font-size: 0.75rem;
  font-weight: 600;
  transition: box-shadow 120ms var(--rr-ease);
}

.app-nav-avatar-trigger:hover .app-nav-avatar,
.app-nav-avatar-trigger[aria-expanded="true"] .app-nav-avatar {
  box-shadow: 0 0 0 2px white, 0 0 0 4px var(--rr-nav-item-current);
}

/* ---------------------------------------------------------------- panels */

.app-nav-panel {
  position: fixed;
  z-index: 70;
  width: max-content;
  min-width: 12rem;
  max-width: 20rem;
  max-height: calc(100vh - var(--rr-nav-height) - 1rem);
  overflow-y: auto;
  padding: 0.375rem;
  border: 1px solid var(--rr-nav-border);
  border-radius: 0.875rem;
  background: white;
  color: var(--rr-nav-fg);
  box-shadow:
    0 12px 24px -8px rgb(0 0 0 / 0.16),
    0 3px 8px -3px rgb(0 0 0 / 0.1);
  scrollbar-width: thin;
}

.app-nav-panel[hidden] {
  display: none;
}

.app-nav-panel:not([hidden]) {
  animation: app-nav-panel-in 120ms var(--rr-ease);
  transform-origin: top left;
}

.app-nav-panel--account:not([hidden]) {
  transform-origin: top right;
}

@keyframes app-nav-panel-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

.app-nav-panel > header {
  margin-block-end: 0.25rem;
  padding: 0.5rem 0.625rem;
  border-block-end: 1px solid var(--rr-nav-border);
}

.app-nav-panel > header h2 {
  margin: 0;
  color: var(--rr-nav-fg);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.app-nav-panel > header p {
  overflow: hidden;
  margin: 0.125rem 0 0;
  color: var(--rr-muted-fg);
  font-size: 0.75rem;
  line-height: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-nav-panel ul {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-nav-panel li {
  margin: 0;
  padding: 0;
}

.app-nav-panel a {
  display: flex;
  min-height: 2rem;
  align-items: center;
  border-radius: var(--rr-radius-md);
  padding: 0.375rem 0.625rem;
  color: inherit;
  font-size: 0.875rem;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 120ms var(--rr-ease),
    color 120ms var(--rr-ease),
    transform 120ms var(--rr-ease);
}

.app-nav-panel a[aria-current="page"] {
  background: var(--rr-nav-item-current);
  color: var(--rr-nav-accent-fg);
  font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
  .app-nav-panel a:hover {
    background: var(--rr-nav-item-hover);
    color: var(--rr-nav-accent-fg);
  }

  .app-nav-panel a[aria-current="page"]:hover {
    background: var(--rr-nav-item-current);
  }

  .app-nav-panel .app-nav-destructive:hover {
    background: color-mix(in oklab, var(--rr-destructive) 10%, white);
    color: var(--rr-destructive);
  }
}

.app-nav-panel a:active {
  transform: scale(0.96);
}

.app-nav-panel-separator {
  margin-block-start: 0.25rem;
  padding-block-start: 0.25rem;
  border-block-start: 1px solid var(--rr-nav-border);
}

.app-nav-destructive {
  color: var(--rr-destructive);
}

/* ----------------------------------------------------------------- focus */

.app-nav-home:focus-visible,
.app-nav-trigger:focus-visible,
.app-nav-avatar-trigger:focus-visible,
.app-nav-panel a:focus-visible,
.app-skip-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.app-skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 80;
  translate: 0 -5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--rr-radius-md);
  background: white;
  color: var(--rr-nav-fg);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.app-skip-link:focus {
  translate: 0;
}

/* --------------------------------------------------------------- avatars */

[data-user-avatar].bg-violet-100 { background: oklch(94.3% 0.029 294.588); }
[data-user-avatar].text-violet-700 { color: oklch(49.1% 0.27 292.581); }
[data-user-avatar].bg-blue-100 { background: oklch(93.2% 0.032 255.585); }
[data-user-avatar].text-blue-700 { color: oklch(48.8% 0.243 264.376); }
[data-user-avatar].bg-emerald-100 { background: oklch(95% 0.052 163.051); }
[data-user-avatar].text-emerald-700 { color: oklch(50.8% 0.118 165.612); }
[data-user-avatar].bg-amber-100 { background: oklch(96.2% 0.059 95.617); }
[data-user-avatar].text-amber-700 { color: oklch(55.5% 0.163 48.998); }
[data-user-avatar].bg-rose-100 { background: oklch(94.1% 0.03 12.58); }
[data-user-avatar].text-rose-700 { color: oklch(51.4% 0.222 16.935); }
[data-user-avatar].bg-cyan-100 { background: oklch(95.6% 0.045 203.388); }
[data-user-avatar].text-cyan-700 { color: oklch(52% 0.105 223.128); }
[data-user-avatar].bg-orange-100 { background: oklch(95.4% 0.038 75.164); }
[data-user-avatar].text-orange-700 { color: oklch(55.3% 0.195 38.402); }
[data-user-avatar].bg-indigo-100 { background: oklch(93% 0.034 272.788); }
[data-user-avatar].text-indigo-700 { color: oklch(45.7% 0.24 277.023); }

@media (prefers-reduced-motion: reduce) {
  .app-nav-trigger,
  .app-nav-trigger--menu::after,
  .app-nav-avatar,
  .app-nav-avatar-trigger,
  .app-nav-panel a {
    transition-duration: 0ms;
  }

  .app-nav-panel:not([hidden]) {
    animation: none;
  }

  .app-nav-trigger:active,
  .app-nav-avatar-trigger:active,
  .app-nav-panel a:active {
    transform: none;
  }
}