/* Desktop sidebar and accessible mobile off-canvas drawer. */

.drawer-header { display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); }
.sidebar-nav { min-width:0; }
.menu-toggle,.drawer-close,.nav-backdrop { display:none; }

.icon-button {
  align-items:center;
  justify-content:center;
  width:44px;
  min-width:44px;
  height:44px;
  padding:0;
  color:var(--text);
  background:var(--control-bg);
  border:1px solid var(--control-border);
  border-radius:var(--radius-sm);
  cursor:pointer;
}
.icon-button:hover { color:var(--accent); background:var(--control-hover); border-color:var(--accent); }

.nav-item {
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--s-2);
  white-space:nowrap;
}

.nav-item::before {
  content:"";
  flex:0 0 auto;
  width:6px;
  height:6px;
  border-radius:var(--radius-full);
  background:transparent;
  transition:background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.nav-item.active::before {
  background:var(--accent);
  box-shadow:var(--glow);
}

@media (max-width:820px) {
  .shell { grid-template:"top" auto "main" 1fr / minmax(0,1fr); }
  .menu-toggle,.drawer-close { display:inline-flex; }

  .sidebar {
    position:fixed;
    z-index:60;
    inset:0 auto 0 0;
    display:flex;
    width:min(86vw,320px);
    height:100dvh;
    padding:var(--s-4);
    border-right:1px solid var(--border);
    overflow-y:auto;
    transform:translateX(-105%);
    visibility:hidden;
    box-shadow:var(--shadow-2);
    transition:transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }

  .sidebar .sidebar-nav {
    display:flex;
    flex-direction:column;
    gap:var(--s-1);
    overflow:visible;
    padding:0;
  }

  .sidebar .nav-item { flex:0 0 auto; min-height:48px; padding:var(--s-3); }

  .nav-backdrop {
    position:fixed;
    z-index:50;
    inset:0;
    display:block;
    background:var(--backdrop);
    opacity:0;
    visibility:hidden;
    transition:opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }

  body.is-menu-open { overflow:hidden; }
  body.is-menu-open .sidebar {
    transform:translateX(0);
    visibility:visible;
    transition-delay:0s;
  }
  body.is-menu-open .nav-backdrop {
    opacity:1;
    visibility:visible;
    transition-delay:0s;
  }
}

/* prefers-reduced-motion обрабатывается глобально в app.css. */