/* ============================================
   <xm-navigation-drawer> — side navigation panel.

   Surface / ink (AD-13): the INVERSE-SURFACE family (the card stack) —
   panel background var(--md-sys-color-inverse-surface), ink
   var(--md-sys-color-inverse-on-surface), directional drawer shadow
   var(--xm-elevation-drawer). Hairline 1px borders only.

   Hosts light-DOM xm-sidebar-item children. Those items reference the desk
   surface roles (--md-sys-color-on-surface / -variant / -container-lowest); to
   keep AD-12 (no reaching into their shadow root) while making them read on
   the inverse-surface panel, the panel REMAPS those role custom properties to
   their inverse equivalents at the panel scope. Custom properties inherit, so
   the items pick up the right ink/hover automatically.

   Modal mode is a native <dialog> in EDGE layout (showModal gives focus-trap +
   inert for free; ::backdrop is the scrim). Persistent mode is a static panel;
   collapsed mode is an icon rail. Slide-in is short4 emphasized-decelerate.

   BEM block `nav-drawer`; elements `__dialog` `__panel`; modifiers `--open`
   `--collapsed` `--modal` `--persistent`.
   ============================================ */

.nav-drawer__panel {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  box-sizing: border-box;
  width: 280px;
  height: 100%;
  padding: var(--s-3);
  background: var(--md-sys-color-inverse-surface);
  color: var(--md-sys-color-inverse-on-surface);
  border-inline-end: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: var(--xm-elevation-drawer);
  overflow-y: auto;

  /* Remap the desk surface roles to the card-stack equivalents so slotted
     xm-sidebar-item children (which use these roles) read on inverse-surface.
     This is token-level composition, not reaching into the item's shadow. */
  --md-sys-color-on-surface: var(--md-sys-color-inverse-on-surface);
  --md-sys-color-on-surface-variant: var(--xm-color-inverse-on-surface-muted);
  --md-sys-color-surface-container-lowest: color-mix(
    in oklab,
    var(--md-sys-color-inverse-on-surface) 8%,
    var(--md-sys-color-inverse-surface)
  );
}

/* ---------- Modal: native <dialog> in edge layout ---------- */
.nav-drawer__dialog {
  margin: 0;
  inset-block: 0;
  inset-inline-start: 0;
  height: 100dvh;
  max-height: 100dvh;
  max-width: 92vw;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.nav-drawer__dialog::backdrop {
  background: var(--md-sys-color-scrim);
  opacity: 0.5;
}
.nav-drawer__dialog .nav-drawer__panel {
  border-radius: 0;
  /* Slide-in: panel translates from the leading edge on open. */
  transform: translateX(-100%);
  transition: transform var(--md-sys-motion-duration-short4)
    var(--md-sys-motion-easing-emphasized-decelerate);
}
.nav-drawer__dialog[open] .nav-drawer__panel {
  transform: translateX(0);
}

/* ---------- Persistent panel ---------- */
.nav-drawer--persistent .nav-drawer__panel {
  border-radius: var(--md-sys-shape-corner-medium);
  height: auto;
  /* Slide + collapse on open/close. Width animates to 0 so the closed drawer
     yields its layout space (not just translated off-screen). */
  transition:
    width var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate),
    transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate),
    opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

/* Closed persistent drawer: collapse to zero width, slide out, and hide so its
   slotted (focusable) children leave the tab order — `aria-hidden` alone would
   leave focusable descendants inside a hidden region (an a11y anti-pattern). */
.nav-drawer--persistent:not(.nav-drawer--open) .nav-drawer__panel {
  width: 0;
  padding-inline: 0;
  transform: translateX(-100%);
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  border-inline-end-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer--persistent .nav-drawer__panel {
    transition: none;
  }
}

/* ---------- Collapsed icon rail ---------- */
.nav-drawer--collapsed .nav-drawer__panel {
  width: 64px;
  align-items: center;
  padding-inline: var(--s-2);
}