.app-shell {
  display: flex;
  align-items: stretch;
  min-height: calc(100vh - 4.5rem);
}

.app-shell-content {
  flex: 1;
  min-width: 0;
}

/* Dark wood rail (matches docs/mockups/ -- every mockup's primary nav sits
   on a dark wood-grain panel, not the flat ivory the rest of the app uses).
   Nav text flips to light-on-dark; .app-sidebar-controls/.button-secondary
   below get matching overrides so the language/session controls rendered
   in here on mobile stay legible against the dark background. */
.app-sidebar {
  flex-shrink: 0;
  width: 14rem;
  padding: var(--space-4) var(--space-2);
  background: var(--color-wood-dark);
  background-image: linear-gradient(rgb(0 0 0 / 15%), transparent 6rem), url("/albiero-assets/albiero-ornament-vine.png");
  background-repeat: no-repeat;
  background-position: top left, bottom -1.5rem left -1.5rem;
  background-size: auto, 12rem auto;
}

.app-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}

.app-sidebar-link {
  display: block;
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid transparent;
  color: var(--color-parchment);
  text-decoration: none;
  font-weight: 600;
}

.app-sidebar-link:hover {
  background: rgb(255 255 255 / 8%);
}

.app-sidebar-link-active {
  border-left-color: var(--color-olive-muted);
  background: rgb(255 255 255 / 6%);
  color: var(--color-ivory);
  font-weight: 700;
}

.app-sidebar-backdrop {
  display: none;
}

/* Language/session controls rendered here only on narrow viewports (see
   AppHeader/AppSidebar) -- the header shows them itself everywhere else,
   so there's never more than one copy in the DOM at a time. */
.app-sidebar-controls {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgb(255 255 255 / 15%);
}

.app-sidebar-controls .app-header-auth-slot {
  color: var(--color-parchment);
}

@media (max-width: 59.9375rem) {
  .app-shell {
    display: block;
    min-height: 0;
  }

  .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    height: 100vh;
    width: min(80vw, 18rem);
    transform: translateX(-100%);
    transition: transform 0.2s ease-in-out;
    box-shadow: 0.5rem 0 1.5rem rgb(43 27 18 / 25%);
  }

  .app-sidebar-open {
    /* "none" (not translateX(0)) -- any non-none transform on a fixed-
       position ancestor makes Chromium miscompute where native <select>
       popups render (the language dropdown ends up pinned to the
       viewport's top-left instead of anchored to the control). */
    transform: none;
  }

  .app-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgb(43 27 18 / 45%);
  }
}