/* drawer.css — mobile menu sliding in from the left, 85% width (11 s6). Reuses the generated
   app/guide lists from _AppMenu/_GuideMenu inside <details> accordions. */

.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); }

.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.drawer__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 85%;
  max-width: var(--drawer-w);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  overflow-y: auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-6);
  background: var(--surface-raised);
  box-shadow: var(--sh-3);
  transform: translateX(-100%);
  transition: transform var(--dur) var(--ease);
}

.drawer.is-open .drawer__backdrop { opacity: 1; }
.drawer.is-open .drawer__panel { transform: none; }

.drawer__head { display: flex; align-items: center; justify-content: space-between; min-height: var(--control-h); }
.drawer__search { margin-block: var(--sp-2); }

.drawer__group { border-bottom: var(--border-w) solid var(--border); }

.drawer__summary, .drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--touch-min);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}

.drawer__summary::-webkit-details-marker { display: none; }
.drawer__summary::after { content: "\203A"; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.drawer__group[open] > .drawer__summary::after { transform: rotate(90deg); }
.drawer__link { border-bottom: var(--border-w) solid var(--border); }
.drawer__link:hover { text-decoration: none; color: var(--link-hover); }

.drawer__more { display: inline-flex; gap: var(--sp-1); align-items: center; margin: var(--sp-2) 0 var(--sp-4); font-weight: var(--fw-semibold); }

/* Generated lists inside the drawer: one column, comfortable touch targets. */
.drawer .mega-apps__cols { display: flex; flex-direction: column; gap: var(--sp-3); }
.drawer .mega-apps__link, .drawer .mega-apps__more, .drawer .mega-guides__link {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  font-size: var(--fs-body);
}

.drawer__foot { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); }
.drawer__foot .btn--block { display: flex; width: 100%; }
.drawer__theme { display: flex; flex-direction: column; gap: var(--sp-2); }