/* One drawer, with a header control on desktop and an edge control on mobile. */
.header-actions { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.nav-trigger, .navigation-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  padding: .75rem;
  border: 1px solid #485044;
  border-radius: .625rem;
  background: #202620;
  color: var(--lime);
  transition: border-color 180ms ease, background 180ms ease;
}
.nav-trigger svg, .navigation-close svg { width: 1.5rem; height: 1.5rem; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nav-trigger:hover, .navigation-close:hover { background: #2b3426; border-color: #79885f; }
.nav-trigger[hidden], .nav-swipe-edge[hidden], .nav-trigger--mobile, .nav-swipe-edge { display: none; }

html.navigation-open, html.navigation-open body { overflow: hidden; overscroll-behavior: none; }
.navigation-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(18rem, calc(100% - 1.5rem));
  max-width: none;
  height: 100%;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) 1.25rem;
  border: 0;
  border-left: 1px solid #485044;
  color: var(--text);
  background:
    repeating-linear-gradient(115deg, transparent 0 3px, rgb(218 231 201 / 1%) 3px 4px),
    radial-gradient(ellipse at 100% 0, rgb(134 151 96 / 12%), transparent 55%),
    linear-gradient(120deg, #282e28, #202620 72%);
  box-shadow: -25px 0 80px #0005;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 380ms cubic-bezier(.22, .8, .25, 1);
}
.navigation-drawer::backdrop { background: rgb(7 10 8 / 0%); transition: background 380ms ease; }
.navigation-drawer.is-open { transform: translateX(0); }
.navigation-drawer.is-open::backdrop { background: rgb(7 10 8 / 65%); }
.navigation-topline { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: .875rem; border-bottom: 1px solid var(--line); }
.navigation-topline h2 { margin: 0; color: #b9c7a7; font: 400 .75rem/1.6 var(--mono); letter-spacing: 1px; }
.navigation-close { width: 2.75rem; height: 2.75rem; padding: .625rem; background: transparent; }
.navigation-drawer nav { margin-top: .75rem; }
.navigation-link { display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: .75rem .25rem; border-bottom: 1px solid var(--line); text-decoration: none; font: 500 1.125rem/1.4 var(--display); letter-spacing: -.2px; transition: color 180ms ease; }
.navigation-link > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.navigation-logout-form { margin: 0; }
.navigation-logout { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; text-align: left; }
.navigation-arrow { margin-left: auto; color: #a6b198; font-size: 1.125rem; transition: color 180ms ease, transform 180ms ease; }
.navigation-link[aria-current='page'], .navigation-link:hover, .navigation-link:focus-visible { color: var(--lime); }
.navigation-link:is(:hover, :focus-visible) .navigation-arrow { color: var(--lime); transform: translate(2px, -2px); }

@media (max-width: 48rem) {
  .nav-trigger--desktop { display: none; }
  .nav-swipe-edge { display: block; position: fixed; inset: 0 0 0 auto; z-index: 2; width: max(1.5rem, env(safe-area-inset-right)); touch-action: pan-y; }
  .nav-trigger--mobile {
    display: grid;
    position: fixed;
    top: 75%;
    right: env(safe-area-inset-right, 0px);
    z-index: 3;
    width: 3rem;
    height: 4rem;
    border-right: 0;
    border-radius: .875rem 0 0 .875rem;
    border-color: var(--lime);
    background: var(--lime);
    color: #22281b;
    box-shadow: -6px 0 25px #0003, 0 0 22px rgb(210 237 145 / 12%);
    transform: translateY(-50%);
    touch-action: pan-y;
    transition: opacity 180ms ease, background 180ms ease;
  }
  .nav-trigger--mobile svg { animation: navigation-nudge 2.6s ease-in-out infinite; }
  .nav-trigger--mobile:is(:hover, :focus-visible) { background: #e1f9ac; border-color: #e1f9ac; }
  .nav-trigger--mobile:focus-visible { outline-color: #22281b; outline-offset: -5px; }
  .navigation-open .nav-trigger--mobile { opacity: 0; pointer-events: none; }
  .navigation-open .nav-swipe-edge { pointer-events: none; }
  .navigation-drawer { padding-left: 1.125rem; padding-right: max(1.125rem, env(safe-area-inset-right)); }
  .navigation-drawer[open] { display: flex; flex-direction: column; }
  .navigation-topline { flex-shrink: 0; }
  .navigation-drawer nav { flex-shrink: 0; margin-top: auto; padding-top: .75rem; }
}
@keyframes navigation-nudge {
  0%, 65%, 100% { transform: translateX(0); }
  78% { transform: translateX(-4px); }
  90% { transform: translateX(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-trigger--mobile svg { animation: none; }
  .navigation-drawer, .navigation-drawer::backdrop { transition: none; }
}